Favicon generator
Updated Nothing is uploaded
Make every icon a modern website needs from one source — a logo, an SVG, a letter or an emoji. Preview it in a real browser tab (light and dark) and on Android and iOS home screens, then download a ready-to-upload ZIP with the HTML snippet.
1. Source
2. Style
App name, theme color & path
3. Preview
Keep everything important inside the dashed circle (80% of the icon) — Android may cut off the rest.
4. Download
- favicon.icoLegacy browsers, Windows, /favicon.ico requests (16, 32 and 48 px inside)
- favicon-16x16.pngBrowser tab (standard displays)
- favicon-32x32.pngBrowser tab (retina), taskbar shortcuts
- apple-touch-icon.pngiPhone/iPad home screen (iOS adds its own rounded corners)
- android-chrome-192x192.pngAndroid home screen, web manifest
- android-chrome-512x512.pngAndroid splash screen, PWA install
- maskable-icon-512x512.pngAndroid adaptive icon (any mask shape)
How to create a favicon
- Pick a source: type a letter or emoji, upload a logo (PNG, JPG, SVG) or paste SVG code.
- Choose a background — transparent, square, rounded or circle — and adjust the artwork size until the 16 px preview is readable.
- Check the browser-tab mockup in light and dark mode and make sure your logo stays inside the dashed safe zone of the maskable icon.
- Set your site name and theme color, then press Download favicon package.
- Unzip the files into your site's root folder and paste the HTML snippet into the <head> of every page.
What's in the favicon package
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32, 48 px | All browsers, Windows shortcuts, RSS readers, /favicon.ico requests |
| favicon-32x32.png / -16x16.png | 32 / 16 px | Browser tabs and bookmarks |
| apple-touch-icon.png | 180 × 180 | iPhone & iPad “Add to Home Screen” (iOS rounds the corners itself) |
| android-chrome-192x192.png | 192 × 192 | Android home screen, web app manifest |
| android-chrome-512x512.png | 512 × 512 | PWA install dialog and splash screen |
| maskable-icon-512x512.png | 512 × 512 | Android adaptive icons (circle, squircle, rounded square masks) |
| site.webmanifest | — | Name, colors and icon list for Android/Chrome installs |
The HTML to add
Upload the files to the root of your domain (so https://example.com/favicon.ico works) and add these tags inside <head>. If you put the icons in a sub-folder, set the “Icons folder” field before downloading and the paths are adjusted for you.
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">Tips for a favicon that reads at 16 pixels
- Simplify. A full logo with a wordmark turns into mush at 16 px. Use the symbol, a monogram or one bold letter.
- Use contrast against both tab colors. Dark-mode tabs are dark gray; a black transparent icon disappears. A colored plate (rounded square or circle) works everywhere.
- Fill the space. Browsers don't add padding — keep the artwork at 80–100% for transparent icons.
- Maskable ≠ regular. Android crops adaptive icons to a circle or squircle. Only the central 80% circle is guaranteed visible, which is why the maskable file gets extra padding and a solid background.
Why the browser still shows the old icon
Browsers cache favicons aggressively, sometimes for weeks. After uploading, open /favicon.ico directly and hard-refresh it, or add a version query to the links (for example href="/favicon.ico?v=2").
Private by design
Everything runs in your browser — your images are never uploaded, stored or seen by anyone.
Related tools
Frequently asked questions
What size should a favicon be?
Provide several: a favicon.ico containing 16, 32 and 48 px, PNGs at 16 and 32 px, a 180 × 180 apple-touch-icon and 192 and 512 px icons for Android. This generator creates all of them from one image.
Do I still need favicon.ico in 2026?
Yes. Many tools, RSS readers and crawlers request /favicon.ico directly without reading your HTML, and it's the most reliable fallback. Modern browsers also use the PNG and SVG links.
Can I use an emoji as a favicon?
Yes — type it in the text box. The emoji is rendered to PNG and ICO files, so it looks the same everywhere (as drawn by your device's emoji font).
What is a maskable icon?
An Android adaptive icon whose artwork sits inside a safe zone (a centered circle 80% of the icon's width) on a full-bleed background, so the system can crop it to any shape without cutting off your logo.
Are my images uploaded?
No. All icons are drawn and packed into the ZIP in your browser.
Your business here? Sponsor this tool from $9/week. See placements