How to use the favicon generator
- Choose the source: Letters or emoji, or An image.
- For letters, type one or two characters, choose a font, weight and text colour.
- For an image, choose a square SVG or a large PNG, and pick a transparent or coloured background.
- Set the background colour, shape and padding.
- Enter your site name for the web app manifest.
- Check the previews at 16, 32, 48, 180 and 192 pixels.
- Download the ZIP, upload the files to your site’s root folder, and paste the HTML snippet into your
<head>.
What’s in the ZIP
| File | Size | Used by |
|---|---|---|
favicon.ico |
16, 32, 48 | Browsers, bookmarks, tools that request /favicon.ico |
icon.svg |
scalable | Modern browsers (letter and emoji icons) |
apple-touch-icon.png |
180 × 180 | iPhone and iPad home screens |
icon-192.png, icon-512.png |
192, 512 | Android and installed web apps |
icon-maskable-512.png |
512 | Android adaptive icons |
site.webmanifest |
– | App name, icons and colours |
favicon-snippet.html |
– | The tags for your <head> |
The ICO file contains PNG-compressed images, which every current browser and Windows supports, and keeps the file small.
How it works
Your image, letters or emoji are drawn onto a canvas in your browser at each required size, from 16 × 16 up to 512 × 512, and saved as PNG. The 16, 32 and 48 pixel images are packed into a single favicon.ico. A web app manifest and the HTML link tags are written to match, and everything is bundled into a ZIP on your device. Nothing is uploaded.
Worked examples
Example 1: initials for a personal site
Type AE, choose a bold sans-serif in white on your brand colour with rounded corners. Two letters are automatically sized smaller than one so they still fit at 16 pixels. The contrast check confirms the letters stay readable.
Example 2: a logo with a transparent background
Choose your logo SVG with a transparent background. Browser tabs show it on light or dark backgrounds, so check the 16-pixel preview. If thin strokes disappear, use a coloured background or a simplified logo mark.
Example 3: an emoji icon for a side project
Type 🚀 on a dark circle. Emoji icons look friendly and are quick to make, but each operating system draws emoji differently. Check the PNGs, which capture your system’s emoji, and keep the SVG only if that variation is acceptable.
Installing the files
Put all files in the root of your site so /favicon.ico resolves, then add the snippet:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Browsers cache favicons aggressively. If an old icon persists, open the icon URL directly and refresh, or test in a private window.
Common mistakes
- Detailed logos at 16 pixels. Simplify the mark for small sizes.
- Forgetting the Apple touch icon, which leaves a screenshot or blank tile on iOS home screens.
- Non-square source images, which end up small with empty space at the sides.
- No maskable icon, which lets Android crop the edges of your logo.