Favicon Generator
Generate favicons in all standard sizes (16, 32, 48, 180, 192, 512) from one image.
How to Use
- Drop a square image (PNG or JPG) into the input area. 512×512 or larger gives best results.
- If your image is non-square, check "Pad non-square to square" to add transparent padding instead of cropping.
- Click Generate All to create every common favicon size: 16, 32, 48, 180 (Apple), 192 (Android), 512 (PWA splash).
- Preview each size in the grid; click any to download individually, or download all as a zip.
- Click Copy HTML to grab the standard <link> tags for your site's <head>.
- Place the downloaded files at your site root and paste the HTML snippet into your <head>.
—
Sizes
Frequently Asked Questions
Why so many sizes?
Different platforms use different favicon sizes: 16×16 (browser tab), 32×32 (browser bookmark), 48×48 (Windows taskbar), 180×180 (Apple home screen 'apple-touch-icon'), 192×192 (Android home screen), 512×512 (Progressive Web App splash screens and high-DPI displays). Modern browsers pick the best size for each context, so providing all of them gives the cleanest result everywhere.
Do I still need a .ico file?
Optional. Modern browsers (Chrome, Firefox, Safari, Edge) all accept PNG favicons. <code>.ico</code> is mainly needed for Internet Explorer 11 and earlier — essentially extinct in 2026. The conventional <code>favicon.ico</code> file is still useful as a default fallback at your site root, but it's no longer strictly required.
What's the difference between favicon and apple-touch-icon?
Favicons (16/32/48) appear in browser tabs and bookmarks. Apple-touch-icons (180×180) appear when iOS users add your site to their home screen — they need their own size and a <link rel='apple-touch-icon'> tag. Android uses 192×192 referenced in manifest.json. Each platform has its own conventions; this generator produces all of them.
My favicon looks blurry. Why?
Browser favicon caching. Browsers aggressively cache favicons; updates can take days to propagate. Force refresh: open the favicon URL directly (yoursite.com/favicon-32.png), hard reload, or change the filename and update the link tag. Also: if your source image is small (e.g., 64×64) and being scaled up, it'll always look blurry — start from at least 512×512.
How do I add a favicon to a manifest.json (PWA)?
Reference the 192 and 512 sizes in your manifest.json under the icons array, with src, sizes, and type fields. The 512 is used for PWA splash screens; the 192 for the app icon on Android home screens. The HTML snippet generated by this tool includes both manifest reference and direct link tags.
Should the favicon match my logo exactly?
Often a simplified version works better at small sizes. A complex logo may be unrecognizable at 16×16 — strip detail to a single iconic mark, increase contrast, and avoid thin lines. Test at actual size before committing.
Common Use Cases
New website launch
Generate the full favicon set when launching a site to ensure clean rendering across browsers, mobile home-screen, and PWA installation.
Rebranding refresh
When updating brand identity, regenerate all favicon sizes from the new logo to keep tab and home-screen icons aligned.
PWA / web app conversion
Add the 192 and 512 sizes when converting an existing site to a Progressive Web App for proper install experience.
Internal tools and dashboards
Even internal sites benefit from a recognizable favicon for users with many tabs open.
WordPress / static site setup
Generate icon files to drop into wp-content/uploads or your static-site assets folder.
iOS home screen apps
Optimize the 180×180 apple-touch-icon for users who frequently add your site to their iPhone home screen.
Last updated: