Required Favicon Sizes
| File | Size | Used by |
|---|---|---|
favicon.ico | 16×16, 32×32 (bundled) | Browser tabs, bookmarks, legacy browsers |
favicon-32x32.png | 32×32 | Modern browsers (PNG favicon) |
favicon-16x16.png | 16×16 | Browser tabs at standard DPI |
apple-touch-icon.png | 180×180 | iOS "Add to Home Screen" |
android-chrome-192x192.png | 192×192 | Android PWA home screen |
android-chrome-512x512.png | 512×512 | Android PWA splash screen |
How to Use It
1
Open the tool
Go to Images & Files and scroll to the Favicon Generator.
2
Upload your image
Upload a square PNG or SVG — at least 512×512px. Simple, bold designs look best at small sizes.
3
Download favicon files
Download the ICO file and all PNG sizes required for cross-platform support.
4
Add to your HTML
Place the files in your site root and add the link tags below to your <head>.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Pro Tips
💡Design your favicon at 32×32px first — if it looks clear at that size, it will work at all sizes. Avoid fine lines and complex gradients that disappear when scaled down.
💡Use a transparent PNG background so the favicon adapts to both light and dark browser chrome. Add a solid background fill only if your icon requires it for contrast.
💡Modern browsers also support SVG favicons:
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> — SVG favicons are infinitely sharp and support dark-mode via prefers-color-scheme media queries inside the SVG.Frequently Asked Questions
What sizes does a favicon need to be?
16×16 and 32×32 (browser tabs), 180×180 (Apple Touch Icon), 192×192 and 512×512 (Android PWA). An ICO file bundles multiple sizes for maximum legacy compatibility.
What image should I start with?
A square PNG or SVG at 512×512px or larger. Simple shapes and bold icons work better than fine-detail logos — detail is lost at 16×16.
Do I still need an ICO file?
For maximum compatibility yes — older browsers, RSS readers, and some desktop apps use ICO. Modern browsers accept PNG or SVG but fallback to ICO when needed.
How do I add a favicon to my website?
Place files in the site root and add link tags in
<head>: one for the ICO, one for the 32×32 PNG, and one for the Apple Touch Icon. The code block above shows the full set.Generate your favicon now
Open the Favicon Generator and create all required sizes from a single image — free, instant, no login.
Open Favicon Generator →