Design for 16 pixels, not for 512
A 16 by 16 favicon contains 256 pixels in total — roughly the area of a full stop on this page. That is the constraint everything else has to bend around, and it is why so many favicons end up as an unreadable smudge.
Detailed illustrations, thin strokes, gradients and anything resembling text will not survive the reduction. What does survive is a single bold shape, a strong silhouette, or one letter set in a heavy weight. Check the tab preview above before you commit: if you cannot tell what it is at 16 pixels, neither can anyone else, and no amount of quality at 512 will fix it.
This is also why shrinking a full logo rarely works. The favicon is not a small version of your logo — it is a separate mark that has to read at a glance. Most well-known sites use a simplified fragment of theirs, not the whole thing.
What each file is for
| File | Used by |
|---|---|
favicon-16x16.png | The browser tab, at standard density |
favicon-32x32.png | Tabs on high-density screens, bookmarks, history |
favicon-48x48.png | Windows desktop shortcuts |
apple-touch-icon.png | iOS home screen, 180 px |
android-chrome-192x192.png | Android home screen |
android-chrome-512x512.png | Android splash screen |
favicon.ico | Older browsers and direct /favicon.ico requests |
site.webmanifest | Home-screen name, icons and colours |
That is a deliberately short list. Icon generators have historically produced fifty files covering Windows tiles, obsolete Android densities and browser versions that no longer exist. Modern browsers read the PNG icons declared in your HTML, and the rest is clutter.
The favicon.ico in the ZIP is a 32 px PNG carrying the
.ico extension. Every browser that matters accepts this, and it means
a request to /favicon.ico — which some clients make regardless
of your markup — gets a real icon rather than a 404.
Installing it
Put every file in the root folder of your site, alongside index.html,
and paste the generated markup into the <head> of every page. If
you would rather keep them in a subfolder, move them and update the paths in both
the HTML and the manifest — the manifest references its icons by path too, and
it is the half people forget.
Non-square source images
Favicons are square. If your source is not, something has to give, and the three options do different things:
- Pad keeps your image intact and fills the leftover space. With the colour set to transparent, a wide logo simply floats in the square, which is usually what you want.
- Crop takes the largest square from the centre. Good when the subject is central and the edges are unimportant — bad when your mark happens to sit off to one side.
- Stretch distorts the image to fill the square. It is offered for completeness, but a squashed logo looks like a mistake at every size.
The manifest and theme colour
The web manifest is what turns a bookmark into something that looks like an app. It tells Android which icon to use on the home screen, what name to show beneath it, and which colour to paint the browser chrome. Without it you get a screenshot and the page title, which rarely looks intentional.
Set the theme colour to your brand colour rather than leaving it at the default. It shows in the address bar area on Android and in the task switcher, and it is a one-line change that makes a site feel considered.
When the old icon will not go away
Favicons are cached harder than almost anything else on the web, and a normal hard
refresh often will not clear one. The reliable fix is to open the icon URL directly
in a tab, which forces a fresh fetch, or to append a version query to the
href in your HTML when you change it. Seeing the old icon does not mean
the new files are wrong.
Everything here is generated in your browser. The image is never uploaded, there is no queue and no account, and the ZIP is assembled on your own device.