How to use Favicon Generator
- 1Drop in a PNG, JPG or any other image — a square logo mark works best
- 2Pick a shape: square, rounded corners or a circle
- 3Add padding and a background colour, watching the browser tab preview update
- 4Switch the preview to dark tabs to check the icon does not vanish
- 5Check the actual-size row, where 16 px is shown at 16 px
- 6Generate the pack and download the ZIP, then paste the snippet into your head
What Favicon Generator does
A favicon is the smallest piece of branding a site has and the hardest to get right. At 16 by 16 pixels there are 256 pixels in total to work with. Anything with a tagline, a thin outline or more than two colours turns to mush at that size, and a logo that looks confident on a slide can be unreadable in a tab.
The other half of the problem is that one file is no longer enough. Browsers want favicon.ico and PNGs, iOS wants a 180 px touch icon with no transparency because it composites onto black, and Android reads its icons out of a web manifest. Ship only a favicon.ico and your site gets a grey globe on a phone home screen.
This tool renders every size from one source image and shows the 16 px result in a mock tab, a bookmarks bar, a search result and a phone home screen before you commit — including on dark tabs, where transparent icons quietly disappear.
When to use it
- Launching a site with a logo that was never designed small
- Most brand assets are drawn for a header, not a tab. Padding and a background reframe the mark, and the actual-size row says immediately whether it survives.
- Fixing the grey globe on iPhone
- A site with only favicon.ico gets a blank tile when someone adds it to their home screen. The pack includes the 180 px Apple touch icon, flattened, which is what iOS actually looks for.
- An icon that vanishes in dark mode
- A dark transparent logo is invisible against a dark tab strip. Toggling the preview to dark tabs catches it in a second, and a background colour fixes it.
- Replacing a stale favicon after a rebrand
- Drop in the new mark, keep the same file names, and the pack overwrites the old files in place — no template or build change needed.
Favicon Generator settings explained
- Shape
- Square, rounded or circular. Browsers never round a favicon for you, so the corners have to be cut into the file itself. iOS is the exception: it masks the home-screen tile whatever you send it, which is why that preview shows rounded corners even on a square icon.
- Corner radius
- The radius for the rounded shape, as a percentage of the icon's edge, so it scales correctly at every size. Around 20% matches the look of most app icons; 50% is a circle.
- Padding
- Empty margin around the artwork. Around 20% keeps anything important clear of the circular mask Android may apply to an installed icon. Costly at 16 px, where every pixel given to padding is one taken from the mark.
- Framing
- Fit whole image letterboxes a non-square source so nothing is lost; fill the square scales it up and crops the long edge. Fit is safer for logos, fill is usually right for photographs.
- Background
- Transparent, a preset swatch or any colour you pick. Transparency is the default and the most common cause of an invisible icon — check both the light and dark tab previews before leaving it off.
- Site name
- Written into site.webmanifest as the name and short name, and shown as the label under the icon in the home-screen preview — the text a visitor sees once your site is installed.
What each file in the pack is for
| File | Used by | If you omit it |
|---|---|---|
| favicon.ico | Every browser, and the address bar | Some browsers and RSS readers show nothing |
| favicon-16 / 32.png | Current browsers, tabs and bookmarks | Browsers fall back to the .ico, which is slightly softer |
| apple-touch-icon.png | iPhone and iPad home screens | iOS renders a screenshot of the page instead |
| android-chrome-192 / 512.png | Android home screens and install prompts | Android shows a grey globe placeholder |
| site.webmanifest | Android, and the install prompt | The Android icons are never found at all |
Limits and what to expect
- A 16 px favicon has 256 pixels. Detailed logos, taglines and thin outlines cannot survive it, whatever tool you use.
- The output can only be as sharp as the source. Feed it at least 512 px square for a clean 512 px Android icon.
- Animated GIF and SVG favicons are not produced — an animated source contributes a single still frame.
- The Apple touch icon is always flattened onto your background colour, or white, because iOS cannot display transparency.
- One image at a time, up to 100 MB.
Troubleshooting
- The icon is invisible on dark tabs
- A dark, transparent logo has nothing to sit against. Toggle the preview to dark tabs to confirm, then add a background colour or use a lighter version of the mark. No browser works around it for you.
- My logo is unreadable at 16 px
- Almost every full logo is. Crop to the symbol alone — no wordmark, no tagline — set padding to zero and check the actual-size row. If the symbol still fails, a single bold letter usually reads where a detailed mark cannot.
- The browser still shows the old favicon
- Favicons are cached hard, sometimes for weeks. Hard-refresh the page, or open the favicon.ico URL directly and reload it. New visitors, who never saw the old file, are unaffected.
- My phone home screen shows a black square
- That is a transparent Apple touch icon composited onto black, which iOS does by default. The pack already flattens it onto your chosen background — if you are using an icon from elsewhere, flatten it or set a background here and regenerate.
Your files and your privacy
The image is decoded and every icon size rendered on a canvas in your browser. The .ico container, the PNGs, the manifest and the ZIP are assembled on your device — no file, and no site name you type, ever reaches a server. Close the tab and nothing remains.
What to use next
FAQ
How do I convert a PNG to a favicon?
Drop the PNG in, choose a shape, padding and background while watching the tab preview, then generate the pack: favicon.ico plus the PNG, Apple and Android sizes as a ZIP, with the HTML to paste into your head.
What size should my source image be?
At least 512 px square. Everything is downscaled from that one file, and the largest icon in the pack is 512 px — starting smaller means upscaling, which shows.
Do I still need favicon.ico in 2026?
Yes, though less than before. Browsers request /favicon.ico by default when no link tag matches, and some feed readers look for nothing else. The pack includes it with 16, 32 and 48 px frames inside.
Where do the files go on my site?
In the root folder, next to your index page, so they resolve at /favicon.ico and /site.webmanifest. Then paste the five link tags into your head, adjusting the paths if you host under a subpath.
Why does my favicon have a black background on iPhone?
iOS ignores the alpha channel in a touch icon and composites it onto black. This tool flattens the 180 px Apple icon onto your background colour, or white if you left it transparent, so it cannot happen here.
Can I use a photo instead of a logo?
You can, and the fill-the-square framing is there for exactly that, but photographs rarely read at 16 px. A single strong subject filling the frame, or a flat graphic, works far better.