Favicon Generator
Turn one image into every favicon size, plus the HTML.
Put every file in your site root, next to index.html, then paste the link tags above into your head. Design for the 16-pixel size — fine detail and small text vanish completely there.
About this tool
Upload one square image and get the full set of icons a modern site needs — every PNG size, the Apple touch icon and a web app manifest — bundled into a zip, along with the exact HTML to paste into your head.
How to use it
- Upload a square image, ideally 512 by 512 or larger.
- Preview the generated sizes and set a background colour if you want one.
- Download the zip and copy the HTML snippet.
Designing for 16 pixels
A favicon is often rendered at 16×16. That is 256 pixels total, and almost nothing survives at that size.
What does not work:
- Text of any kind, including a single letter in a detailed typeface
- Fine lines — they disappear or alias into grey mush
- Gradients and shadows — they become noise
- A detailed logo scaled down
What does work: one bold shape, two or three high-contrast colours, and generous internal spacing. Many strong favicons are a single letter in a heavy weight, or one simplified element lifted from a larger logo.
Design at 16px first, then scale up. Almost everyone does the reverse — shrinking a full logo — and discovers at the end that it is unreadable. Working the other way forces the right decisions.
Test against both themes. Browser tab bars are light or dark depending on the user's settings. A dark logo on a transparent background vanishes in dark mode; the "fill transparency" option here is how you avoid that.
What each file is for
The set generated here covers what a modern site actually needs.
- favicon-16x16.png / 32x32 — browser tabs, standard and retina
- favicon-48x48 — Windows desktop shortcuts
- favicon-96x96 — Google TV and some Android surfaces
- apple-touch-icon.png (180×180) — iOS home screen. iOS ignores transparency and composites onto black, so give this one a background
- android-chrome-192x192 / 512x512 — Android home screen and PWA splash
- site.webmanifest — tells Android which icons to use, plus theme colours
Do you still need a .ico file? Almost certainly not. Every browser released in the last decade reads PNG favicons. The .ico format persists only for very old Internet Explorer, which is why this tool produces PNGs and a manifest instead.
Put everything in your site root and paste the generated link tags into your <head>. The manifest path in the snippet assumes the root — adjust it if you put the files in a subfolder.
Frequently asked questions
- What source image should I use?
- Square, at least 512 by 512, with simple bold shapes. Fine detail and small text disappear entirely at 16 pixels, so design for the smallest size rather than shrinking a detailed logo.
- Do I still need an .ico file?
- Rarely. Every current browser reads PNG favicons. An .ico is only needed for very old Internet Explorer versions, which is why this tool produces PNGs and a manifest instead.
- Where do the files go?
- The root of your site, alongside index.html, then paste the generated link tags into your head. The manifest path in the snippet assumes the root — adjust it if you put them in a subfolder.