tool · one of 51 Pro ZIP and head tags
Favicon kit
What favicon files does a site need, and how do I make them?
A modern site needs a favicon at 16, 32 and 48 pixels, a 180px Apple touch icon, two Android sizes, an .ico holding the small three, a web manifest and the tags that name them - and most generators want you to upload a picture to get them. This draws the icon from a letter or an emoji, shows it in a real browser tab on a light and a dark strip, because a favicon fails at 16 pixels on a dark tab and not in a 512px preview.
Reach it Press ⌘ + K on any tab and type favicon kit. Ctrl + K on Windows and Linux
in the panel · this one is Pro
What this actually is
every favicon size, an .ico, the manifest and head tags from one letter or emojiLaunching a side project, replacing the framework's default icon before a demo, or giving a staging site a different mark so its tabs cannot be confused with production. Each size is drawn at its own resolution rather than scaled down from the biggest.
Asked about this tool
3 of themDo I still need a favicon.ico?
Some browsers, feed readers and bookmark tools still ask for /favicon.ico before reading any tags. The kit writes one holding 16, 32 and 48, so the old request is answered and the modern tags do the rest.
Why draw each size separately?
A letter scaled down from 512 pixels to 16 turns into a smudge. Drawing each size at its own resolution keeps the edges on whole pixels, which is what makes a small icon legible.
Can I use an emoji?
Yes. Type it into the letters field. It is drawn with the system's emoji font, so it looks the way emoji look on the machine that made it.
how to use favicon kit
- Open Favicon kit and type the letters or emoji the icon should carry.
- Set the shape, the colours, the weight and the glyph size.
- Check it in the tab strip on both grounds and at every size.
- Save the archive and paste the head tags into the page.
96 of these · no host permissions · three free audits