About the Favicon Generator
The Favicon Generator creates the full set of icons a website needs, from a few letters, an emoji or your own logo. Pick a background color and a shape, check the preview in a mock browser tab, and download everything as one ZIP file together with the HTML to paste into your page.
A favicon is the small icon in browser tabs, bookmarks, history and search results. Phones use larger versions when someone adds your site to the home screen. Each place expects a different size and format, so a modern site needs about half a dozen files. This tool makes all of them in one go.
The favicon.ico it makes is a real ICO file with 16, 32 and 48-pixel images inside, not a renamed PNG. Everything is drawn in your browser, so your logo is never uploaded.
How to use it
- Choose a sourceUnder "Make it from", pick Letters (up to three characters), Emoji, or Image to use your own PNG, JPG, WebP, GIF or SVG file.
- Style the iconFor letters, choose the font, weight and text color. For every source, set the background color, the shape (rounded square, square or circle) and the padding.
- Check the previewThe mock browser tab shows the icon at real tab size, and the row below shows it at 16, 32, 48, 180 and 512 pixels.
- Download the filesClick "Download all (ZIP)", or download single files from the Files list.
- Add them to your sitePut the files in the root folder of your website and paste the HTML from "HTML for your page" into the head of every page.
Key features
Seven files in one ZIP
favicon.ico, 16 and 32-pixel PNGs, a 180-pixel Apple touch icon, 192 and 512-pixel Android icons and a site.webmanifest.
A real multi-size ICO
The ICO holds 16, 32 and 48-pixel images, so each browser and Windows itself can pick the sharpest one.
Letters, emoji or image
Four fonts and four weights for letters, twelve quick emoji, or your own image fitted inside the padding.
Shapes and transparency
Rounded square, square or circle on a colored background, or a transparent background for logos that already have a shape.
Apple-ready touch icon
The 180-pixel icon is always a full, opaque square, because iPhones and iPads round the corners themselves.
Private by design
Icons are drawn on a canvas in your browser. Images are not uploaded and nothing is stored.
Examples
The files you get
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px | All browsers, Windows shortcuts |
| favicon-16x16.png | 16 px | Browser tabs |
| favicon-32x32.png | 32 px | Tabs on sharp screens, taskbars |
| apple-touch-icon.png | 180 px | iPhone and iPad home screens |
| android-chrome-192x192.png | 192 px | Android home screens |
| android-chrome-512x512.png | 512 px | Android splash screens, app installs |
| site.webmanifest | Text | Lists the Android icons and colors |
The HTML for your page
With the default blue background, the tool gives 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="#2b59ff">The paths start with a slash, so the files must sit in the root folder of your site, next to your home page. The theme color tints the browser bar on some phones and follows your background color.
The web manifest
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#2b59ff",
"background_color": "#2b59ff",
"display": "standalone"
}The name fields are left empty on purpose. Open the file and fill in your site's name, and a shorter version of up to about 12 characters for the home screen.
Transparent backgrounds
With "Transparent background" checked, the tab icons and Android icons have no background at all, which suits a logo that already has its own shape. The Apple touch icon still gets your background color, because iOS shows transparent areas as black.
Tips
- Keep it simple. At 16 pixels, one or two bold letters or a single strong shape reads best. Fine detail and thin lines disappear.
- Check the 16-pixel preview before you download. If you cannot recognize the icon there, increase the weight, reduce the padding or use fewer letters.
- Use a square source image of at least 512 × 512 pixels. Smaller images get blurry in the large Android and Apple icons.
- Emoji look different on each system, because they are drawn with your device's emoji font. Make the icon on the system whose emoji style you like.
- After uploading the files, open your site in a private window to see the new icon. Browsers cache favicons for a long time.
Common mistakes and limits
- Leaving the manifest names emptyAndroid uses the name when someone installs your site. Fill in "name" and "short_name" in site.webmanifest before uploading.
- Uploading the files to a subfolderThe HTML points to the root, such as /favicon.ico. If you place the files elsewhere, change every path in the HTML and the manifest.
- Renaming a PNG to .icoSome older tools do this, and Windows and older browsers reject the file. The ICO from this tool is a real ICO container.
- Using a wide logo as isA wide logo shrinks to a thin strip in a square icon. Use just the logo's symbol or first letter instead.
- Expecting the new icon right awayBrowsers keep old favicons in their cache, sometimes for days. A private window or a cleared cache shows the new one.
