How the icon is drawn
The favicon is painted on a square HTML canvas at the exact pixel size you request, so each download is rendered natively at that size rather than scaled down from one large image. The steps are fixed.
- The canvas is cleared to transparent.
- The background is filled as a square, a circle, or a rounded square whose corner radius is 22 percent of the side.
- Your first one or two characters are centered in bold system-ui type, sized at 62 percent of the canvas for one character or 50 percent for two, and nudged down 4 percent so they sit optically centered.
The input box holds up to four UTF-16 units, which allows two emoji, but only the first two characters are drawn. If the box is empty, a question mark is used.
Which size is for what
| Button | Used for |
|---|---|
| 16 px | Classic browser tab size on standard-density screens |
| 32 px | Tabs on high-density screens |
| 64 px | Between sizes, useful for bookmark lists and some launchers |
| 180 px | The Apple touch icon used when a page is added to an iPhone home screen |
| 512 px | Large icon for web app manifests and Android installs |
| favicon.ico | One file holding 16, 32 and 48 px, for the /favicon.ico path that browsers, RSS readers and crawlers request by default |
Worked example
Typing a single "A" with the default indigo background and a rounded shape, then downloading the 32 px button, writes favicon-32x32.png. The letter is drawn at about 19.8 px (0.62 times 32) and the rounded corner radius is about 7 px (0.22 times 32).
Limits and gotchas
- Emoji look different per device. The glyph comes from the operating system's emoji font, so a rocket drawn on Windows will not match one drawn on a Mac or Android phone. The downloaded PNG keeps the style of the machine that made it. A color emoji is not tinted by the text color either.
- Transparent corners on circles and rounded squares. The PNG keeps its alpha channel, and iOS typically fills transparent areas of a touch icon with black. For the 180 px icon, choose the square shape and let iOS round it.
- The .ico holds three sizes, not five. The favicon.ico button packs 16, 32 and 48 px images, each drawn fresh at that size, so the 48 px Windows shortcut icon is as crisp as the tab icon. They are stored as PNG data inside the ICO container, which Windows Vista and later and every current browser read; Windows XP-era software expects bitmap entries and may show nothing. The 64, 180 and 512 px sizes stay separate PNG downloads because nothing looks for them inside an .ico. There is no SVG output.
- Tiny sizes lose detail. At 16 px, two letters or a detailed emoji turn to mush. A single bold letter on a strong background reads best.
- Color values. Type any valid CSS color, such as a hex code or a name like
tomato. An invalid value shows an error message, pauses the preview and disables the download buttons until it is fixed, so you never get a wrongly colored file.
For a full home-screen icon set, see the app icon generator. Check that the text is legible against your background with the contrast checker.