Free Favicon Generator
Turn one image into a complete favicon pack: the ICO file, every PNG size, an Apple touch icon, a web manifest, and the HTML to paste into your page.
Preview at real sizes
If it turns to mush at 16 pixels, simplify the design before you generate the pack.
What Is in the Pack
Non square images are padded to a square with transparency, so nothing gets stretched.
| File | Used by |
|---|---|
| favicon.ico | Browser tabs and bookmarks. Holds six sizes in one file. |
| favicon-16x16.png | The tab icon on standard screens. |
| favicon-32x32.png | The tab icon on retina screens, and taskbar shortcuts. |
| favicon-48x48.png | Windows site tiles and some desktop shortcuts. |
| favicon-64x64.png | High density bookmark bars. |
| favicon-128x128.png | Extensions and app listings. |
| apple-touch-icon.png | The home screen icon on iPhone and iPad, at 180 pixels. |
| android-chrome-192x192.png | Android home screen and app switcher. |
| android-chrome-512x512.png | Android splash screens and install prompts. |
| site.webmanifest | Tells the browser your site can be installed. Fill in the name field. |
| paste-into-head.html | The five link tags, ready to copy. |
Designing an Icon That Survives 16 Pixels
A favicon is roughly the size of a full stop on a printed page. Almost everything that works on a business card fails at that size.
- One shape, not a scene. A single letter, a simple mark, or a bold silhouette.
- Two colours at most. Gradients turn to a muddy average.
- Thick strokes. Anything under about 1/16th of the width disappears completely.
- High contrast against both themes. Tabs are light in one browser and dark in another. Pure white or pure black icons vanish on one of them.
- Fill the frame. Your logo's usual padding is wasted space here. Let the mark run close to the edges.
- Skip the words. Nobody has ever read text in a favicon.
Making the mark in GIMP? Create a 512 x 512 image with a transparent background, draw at that size, and let this tool do the downsizing. Enlarging a small icon never works, as the upscaler page explains.
Installing It
- Unzip the pack.
- Upload every file to the root folder of your site, so
favicon.icosits atyoursite.com/favicon.ico. - Open
paste-into-head.htmland copy those lines into the<head>of every page. - Open
site.webmanifestand fill in the name and short_name fields. - Force refresh the page. Browsers cache favicons harder than almost anything else.
Common Questions
Do I still need favicon.ico?
Yes. Some browsers and crawlers ask for /favicon.ico at the root regardless of what your HTML says. Keeping it costs nothing.
Can I use a JPG?
You can, but the corners will be filled with whatever colour they were. Icons look best with transparency, so use a PNG. Run it through the background remover first if needed.
My image is not square
It gets padded, not stretched. Your artwork keeps its shape, with transparency added around it.
Does it work for a Progressive Web App?
The 192 and 512 pixel icons plus the manifest are exactly what a PWA install prompt needs. Fill in the manifest name fields and you are set.