Favicon Generator
Six PNGs, a real multi-size favicon.ico, the link tags and the manifest, all built in the browser from one square image.
The images need JavaScript, because they are drawn in your browser. The tags and the manifest below are written here and work either way.
Goes in the manifest, which is what Android shows under the icon on a home screen.
Twelve characters or fewer. Left empty the site name is cut down to fit.
The browser chrome on Android, and the title bar of an installed app.
The colour behind the icon while an installed app starts.
Room around the artwork. Android masks icons into a circle, so about 10 percent keeps the edges of a square logo inside it.
Left empty the icons stay transparent, which is what you want for a tab. Set a colour to flatten them.
Where the files will live. A slash means the site root, which is where Safari looks for apple-touch-icon.png.
Choose a square image, at least 512 pixels. The tags and the manifest below are ready either way.
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#1E56EC" />
Choose a square image, at least 512 pixels. The tags and the manifest below are ready either way.
One square image in, six PNGs, a real multi-size favicon.ico, the link tags and
the manifest out. All of it in the browser: the image is read, drawn and encoded
in the page, and nothing is uploaded, which is more than can be said for most
favicon generators.
The ICO is assembled here too. An .ico is a six byte header, a sixteen byte
directory entry per image and then the images, and since Windows Vista those
images may be PNGs. So a browser that can write a PNG can write an ICO, and no
server is needed.
How to use
- Drop a square image, 512 pixels or larger. SVG works and gives the sharpest result, because every size is drawn from the vector.
- Set the site name and the two colours. Those go into the manifest, not into the images.
- Add padding if the artwork runs to the edge. Android masks icons into a circle, so 10 percent keeps the corners of a square logo inside the mask.
- Download each file, put them where the Path field says, and paste the tags
into your
<head>.
The tags and the manifest are there before you choose an image, so you can copy them first and produce the images later.
Example
The six files and what each one is for:
favicon.ico, with 16, 32 and 48 inside it. Windows shortcuts, older browsers, and anything that asks for/favicon.icowithout reading your HTML.favicon-32x32.png. The tab, in practice, on most browsers.favicon-16x16.png. The tab on a low density screen.apple-touch-icon.png, at 180. The iOS home screen; Safari looks for this exact name at the site root.icon-192.png. The Android home screen, through the manifest.icon-512.png. The Android splash screen.
And the tags:
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#1E56EC" />Six lines, not the sixteen a generator gave you in 2015. msapplication-TileImage
is for a Windows 8 start screen; the sizes list on apple-touch-icon has been
unnecessary since iOS 8; and browserconfig.xml is read by nothing that is still
shipping.
Pitfalls
A 16 pixel icon is 256 pixels of information. Detail that reads at 512 becomes mud at 16. If your logo has a wordmark, use the symbol on its own for the favicon, or draw a 16 pixel version by hand. This tool scales; it cannot simplify.
Safari wants apple-touch-icon.png at the site root. It looks for that path
directly if no tag says otherwise, so putting the icons in a subfolder means the
tag is doing real work. Keep both: the tag and a copy at the root.
Android masks icons. A square logo that touches its own edges gets its corners
cut off by the circular mask. That is what the padding field is for, and why the
manifest declares a maskable icon.
Transparent or flattened is a real choice. Leave Behind transparency empty for a tab icon, which sits on whatever colour the browser uses. Set it for a home screen icon, where a transparent PNG can end up on an unpredictable background.
A PNG favicon does not replace the ICO. Anything that requests /favicon.ico
directly, including some feed readers and older Windows software, gets a 404
otherwise. It costs a couple of kilobytes.
Compatibility
The images are drawn with <canvas> and encoded with canvas.toBlob, which every
browser since about 2013 supports. The ICO is assembled from those PNGs in
JavaScript.
PNG-in-ICO is read by Windows Vista and later, and by every browser. A Windows XP era ICO needs BMP data inside it, which nothing in the last fifteen years requires.
The manifest is the W3C web app manifest, read by Chrome, Edge and Samsung
Internet for installed apps. Safari ignores most of it and uses
apple-touch-icon.png, which is why the set has both.
An SVG source is drawn at each size from the vector, so every file is sharp. A raster source is scaled down with the same stepped halving the image resizer uses, and is enlarged only if it has to be, with a warning when that happens.
Frequently asked questions
Do I still need favicon.ico?
/favicon.ico
without reading your HTML. Everything that reads your HTML will prefer the 32
pixel PNG.Why is there no 64, 70, 150 or 310 pixel icon?
Can I use an SVG as the favicon itself?
<link rel="icon" type="image/svg+xml" href="/icon.svg">, and
Chrome and Firefox will use it. Safari will not, so you still need the PNGs. If
you want both, add that line to the generated tags.What does the maskable icon in the manifest do?
Does WordPress not do this already?
functions.php snippet is for.