Favicon Generator
Upload one square logo and get every icon a modern site needs: favicon.ico, PNG favicons, the Apple touch icon, Android and PWA icons, a web manifest and the tags to paste in your page. It is all built in your browser.
Runs in your browser — nothing is uploaded.
Reading…
Loaded: ·
Settings
Where you will upload the files, for example / or /icons/.
Used for the Apple touch icon and the manifest.
Files
-
·
HTML for <head>
Copiedsite.webmanifest
CopiedHow to use it
- Drop a square PNG, SVG, JPEG or WebP (at least 512×512 px for raster images).
- Set the app name and colours if you want a web manifest, and the folder where you will put the icons.
- Download the ZIP, upload the files to that folder, and paste the snippet in the <head> of your pages.
Frequently asked questions
Is my logo uploaded?
No. The icons are drawn with your browser’s canvas and zipped on your device.
What size should my source image be?
Square and at least 512×512 px, or an SVG. A picture that is not square is centred and shown whole, with empty space around it.
What is in the package?
favicon.ico with 16, 32 and 48 px images, favicon-16x16.png and favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png and 512x512.png, site.webmanifest, and favicon.svg when you start from an SVG.
Why does the Apple touch icon have a background?
iOS fills transparent areas with black, so this icon is drawn on the background colour you choose. The other icons stay transparent.
Do I still need favicon.ico?
Yes, put it at the root of your site: some browsers, feed readers and crawlers request /favicon.ico without reading your HTML.
What does the padding setting do?
It keeps a margin around the logo, which helps icons that get rounded or masked by the operating system.