How to use it
- Choose a source: letters, an emoji, or your own image (PNG, JPG, SVG…).
- Set the background, shape (square, rounded, circle) and padding.
- Enter your site name and theme color for the manifest.
- Download the ZIP, copy the files to your site's root, and paste the HTML into <head>.
What's in the pack?
The minimal but complete set recommended since 2023:
| File | Who needs it |
|---|---|
| favicon.ico (16, 32, 48px) | older browsers, Google results, Windows |
| icon.svg | modern browsers, sharp at any size |
| apple-touch-icon.png (180px) | iPhone and iPad home screens |
| icon-192.png, icon-512.png | Android, installable web apps (PWA) |
| icon-mask.png (512px) | Android adaptive icon (maskable) |
| site.webmanifest | name, colors, icon list |
The dozen legacy sizes (57, 72, 114, 144px…) aren't needed anymore: browsers scale down from these.
Why separate Apple and maskable icons?
Apple fills transparent areas with black, so the 180px icon always gets a background and a little padding.
Android crops maskable icons into a circle, a square or a squircle, so the content has to fit inside the central safe zone, a circle 80% of the icon's width. The generator sets that up for you.
The SVG is always made for letters and emoji. For images, only if you upload an SVG, since wrapping a PNG in SVG wouldn't make it any sharper.
Why isn't my new favicon showing?
- Browsers cache favicons hard: open the site in a private window, or reload with Ctrl+F5 (Cmd+Shift+R on Mac).
- Google results update over days or weeks. Google wants a square icon of at least 48px, which the 48px layer of favicon.ico covers.
- Make sure the files really sit in the root (does
https://example.com/favicon.icoopen?).
Your image stays on your device: everything is processed in your browser, and nothing is uploaded.
Frequently asked questions
What size should a favicon be?
favicon.ico holds 16, 32 and 48px; add 180, 192 and 512px PNGs and an SVG. The pack includes all of them.
Where do the files go?
In your site's root folder (next to index.html), with the HTML in the <head>.
Can I use an emoji as a favicon?
Yes. The emoji is drawn with your device's font, so the PNGs look exactly like the preview.
Do I need site.webmanifest?
For Android and installable web apps, yes. For a simple site it doesn't hurt.