Favicon Generator
Create favicons from an image, text, or emoji. Instantly generates all required PNG sizes (16-512px) and the necessary HTML.
Upload an image or enter text, and size-specific icons will be generated here.
Usage by Size
| Size | Filename | Where it's used | Required? |
|---|---|---|---|
| 16ร16 | favicon-16.png | Browser tab/address bar | Optional (can be replaced by 32px) |
| 32ร32 | favicon-32.png | Browser tab (high-res), bookmarks | Required |
| 48ร48 | favicon-48.png | Windows shortcut, Google search results icon | Recommended |
| 180ร180 | apple-touch-icon.png | iPhone/iPad home screen | Required |
| 192ร192 | icon-192.png | Android home screen, PWA | Required |
| 512ร512 | icon-512.png | PWA splash screen, app list | Recommended |
What is the Favicon Generator?
A favicon is the small icon for your website that appears in browser tabs, bookmarks, and smartphone home screens. Modern sites need a whole set of sizes for different devices, from a 16px tab icon to a 512px PWA icon. This tool generates them all in one click. Upload your logo to resize it for all formats, or create a new icon from scratch using text or an emoji. It's free, and because all processing is done in your browser, your images are never uploaded to a server.
How to use
- Select your creation method: `๐ผ๏ธ From Image` to upload a file, or `๐ค From Text/Emoji` to create a new icon.
- For images, drag and drop a PNG, JPG, or SVG file. A square image 512px or larger gives the best results.
- For text, enter a character or emoji and choose your desired font, colors, and size.
- Adjust the `Corner Roundness` and `Padding` sliders to fine-tune the final look across all sizes.
- Click `Save All` to download every icon size, or use the `Save` buttons on individual previews.
- Upload the PNG files to your site, then copy the generated HTML and paste it into the `<head>` of your pages.
Favicon Generator guide
How this tool is used in real work, and what to watch out for.
Why One File Is Not Enough
In the old days, a single `favicon.ico` file was all you needed. Today, icons appear in many more places, and each demands a different size: 16-32px for browser tabs, 180px for the iPhone home screen, and 192/512px for Android and PWAs. If you just let the browser shrink one large image, it will be a blurry mess at smaller sizes.
The practical minimum set is four icons: 32px (for tabs), 180px (`apple-touch-icon`), and 192/512px (Android/PWA). If a 32px icon is present, browsers will scale it down for the 16px slot, but if your design gets muddy at that tiny size, providing a separate, crisper 16px version is better. A 48px version is also recommended, as Google references this size for its search result icons.
The `apple-touch-icon` has its own special rules. iOS fills any transparent areas of this icon with black, which can lead to your logo being surrounded by an ugly black square when added to the home screen. To avoid this, make sure the background of the image you use for `apple-touch-icon` is opaque. Setting "Padding/Background Fill" to white or a custom color will take care of this.
Designing to Survive at 16px
The "Browser Tab Preview" on the right is the most useful part of this tool. It renders the icon at the actual 16px size you see in a tab, so if it looks blurry here, it will look blurry in a real tab. Don't be fooled by how good it looks in the 96px preview.
At 16-32px, all details disappear. Fine character strokes, gradients, thin lines, and full company names just become a gray blob. The only things that survive are simple shapes, bold strokes, and strong contrast.
- Don't try to cram your entire logo in. Crop out a symbol or use a single, large initial. The "From Text/Emoji" mode is perfect for this.
- Long, horizontal logos become invisible when shrunk. Using 'contain' will just leave empty space above and below, and the symbol will become a tiny dot.
- Use high contrast between the background and the icon. A light blue logo on a light gray background will be invisible in a tab.
- Consider dark mode tabs. A black character on a transparent background will disappear in a dark-themed tab. Using an opaque background is safer.
- In 'From Text/Emoji' mode, a single character is far more legible than a full word. You can make it appear larger by increasing the 'Font Size' slider.
The Favicon in Search Results
The small icon next to your site's name in Google's mobile search results is your favicon. We get a lot of questions about why it's not showing up. Google has outlined a few conditions:
- The `<link rel="icon">` tag must be in the HTML of your homepage (the site root). Having it only on individual article pages is not enough.
- The icon file must be crawlable. If you've blocked the image path with `robots.txt`, Google can't read it. This is a surprisingly common reason.
- It must be square, and a multiple of 48px is recommended (e.g., 48, 96, 144, 192...). A single 512px square icon usually satisfies this requirement.
- The URL must be stable. Avoid filenames with a hash that changes on every deployment.
- It takes time to appear. Google needs to recrawl your homepage, which can take anywhere from a few days to several weeks.
I Changed It, But I Still See the Old One
Favicon caches are unusually aggressive. A regular refresh rarely works, and even a hard refresh (Ctrl+Shift+R) often fails. This is because browsers store favicons in a separate cache from the rest of the page content.
- First, confirm the file actually changed. Enter the icon's URL directly into your browser's address bar (e.g., https://example.com/favicon-32.png) to see if the new image loads. If you see the old one, the upload failed.
- Open your site in an incognito window. If the new icon appears there, it's purely a local caching issue.
- Append `?v=2` to the URL in your `link` tag to create a new address. This is the most reliable method.
- If that still doesn't work, change the filename itself and update the `link` tag to match.
- If you use a CDN or proxy, you'll need to clear its cache as well.
Frequently asked questions
What are the most essential favicon sizes?
A practical set includes 32px (tabs), 180px (`apple-touch-icon` for iOS), and 192/512px (for Android & PWA manifests). Browsers can often downscale the 32px icon to 16px.
Do I still need a favicon.ico file?
Generally, no. Modern browsers all support PNG favicons. However, creating a copy of your 32px PNG and naming it `favicon.ico` in your root directory can prevent 404 errors from old bots.
My logo is unreadable as a small icon. What can I do?
At 16-32px, details are lost. Use a simplified symbol or the first letter of your brand name instead of the full logo. The `From Text/Emoji` mode is designed for this exact purpose.
Are my uploaded images sent to a server?
No. Your files are processed entirely within your browser using its built-in Canvas API. Nothing is ever uploaded, ensuring your data remains private. The tool even works offline.