Favicon Generator
A favicon needs several sizes: 16, 32 and 48 px for browsers, 180 px for Apple devices and 192 and 512 px for web app icons. This tool makes all of them plus a multi-size favicon.ico, with no upload.
How to use
- Pick Text or emoji and type one to three characters, or pick Image and drop a logo (up to 50 MB). A non-square image is cropped from the center.
- Choose the background color, text color and shape. Tick Transparent background if you want see-through corners; the Apple icon always keeps a solid background.
- Download each file with its button, then copy the link tags into your page head and the manifest into a file named site.webmanifest. Put all the files in the root folder of your site.
How it works
Each size is drawn on its own canvas. A big image is halved in steps before the last resize, so thin lines stay readable at 16 px. Text is centered by its measured height and shrunk automatically when it would not fit.
The favicon.ico is built by this page, byte by byte: a 6-byte header, one 16-byte entry per size, then the PNG files themselves. Modern browsers and Windows read PNG inside an ICO, and one file then covers the 16, 32 and 48 px sizes.
Nothing is sent to a server. Your image is read by your browser, the icons exist only in this tab, and they are saved directly to your device when you press Download.
Which size is used where
| File | Size (px) | Used for |
|---|---|---|
| favicon.ico | 16, 32, 48 | Browser tabs, old browsers, Windows |
| favicon-32x32.png | 32 | Tabs and bookmarks on high-density screens |
| apple-touch-icon.png | 180 | iPhone and iPad home screen |
| android-chrome-192x192.png | 192 | Android home screen |
| android-chrome-512x512.png | 512 | Android splash screen and installable apps |
Where to put the files
Upload everything to the top folder of your site, so that yoursite.com/favicon.ico opens the icon. Browsers ask for /favicon.ico on their own even when no tag is present. After changing a favicon, tabs can show the old one for a while because browsers cache it. Open the icon address directly and reload to check.
FAQ
Is my logo uploaded?
No. The image is drawn and encoded inside this browser tab. There is no upload, no account and no copy kept anywhere else.
Which files do I really need?
A favicon.ico in the site root works for almost every browser. Adding the 32 px PNG, the 180 px Apple touch icon and the 192 and 512 px icons covers tabs, bookmarks, iPhone home screens and Android installs.
Why is the Apple icon not rounded or transparent?
iOS rounds the corners itself and shows transparent areas as black. The 180 px icon is always a full square with a solid background so it looks right on the home screen.
What image should I start with?
A square PNG of at least 512 by 512 pixels with the logo in the middle and a little space around it. Detailed artwork gets hard to read at 16 px, so a simple mark or one letter works best.
Why does my emoji look different on another device?
Emoji are drawn with the fonts on your own device, so the icon uses your system artwork. The saved PNG does not change after that, so every visitor sees the same picture.