Favicon Generator - Every Size Plus the HTML
Favicon generator
Sizes
HTML for your head
Put the files in your site root, then paste this inside head.
What this tool does
A favicon stopped being one 16 pixel square years ago. A site now needs a handful of sizes for tabs, Windows shortcuts, iPhone home screens and Android install prompts, plus the markup that points to them. This page makes all of it from one image, in your browser.
How to use it
- 1 Drop in a square image, ideally 512 px or larger.
- 2 Check each size in the preview and set a background if yours is transparent.
- 3 Download the zip, unpack it into your site root and paste the HTML.
Design for 16 pixels, not for the logo
At tab size a favicon is about the width of a full stop on this page. Wordmarks turn into grey smudges and thin lines disappear entirely. A single letter, a simple shape or the most distinctive fragment of the logo survives that scale; the whole logo almost never does.
| Size | Where it is used |
|---|---|
| 16×16 | Browser tab, bookmarks bar |
| 32×32 | Tab on high-density screens, taskbar |
| 48×48 | Windows shortcuts and site tiles |
| 180×180 | iPhone and iPad home screen |
| 192×192 | Android home screen and app switcher |
| 512×512 | Install prompt and splash screen |
PNG is enough; ICO is a leftover
Every browser in use today reads PNG favicons, so a stack of PNG files and the right link tags covers the web. The .ico container exists because Internet Explorer looked for it at the site root; unless you must support something ancient, you can skip it.
Transparency behaves differently on a phone
In a browser tab a transparent icon sits nicely on whatever the theme provides. On an iPhone home screen the same file gets a solid black square behind it, because iOS does not composite transparency there. Set a background colour and the icon looks intentional on both.
Why the browser still shows the old one
Favicons are cached hard and for a long time, sometimes past a normal refresh. Open the icon file directly to confirm the new one is really there, then use a private window to check. Changing the file name, or adding a version to it, is the reliable way to force the update.