How to Make a Favicon for Your Website (All Sizes)
Create favicon.ico, Apple touch and Android icons and a web manifest from one image, plus the exact HTML tags to paste into your site. Free, no upload.
3 min read ·
A favicon is the small icon in browser tabs, bookmarks and phone home screens. To make one, open the Favicon Generator, add a square image of your logo, check the previews (especially the tiny 16-pixel one), and download the package: a multi-size favicon.ico, PNG icons from 16 to 512 pixels, a site.webmanifest, and the HTML tags to paste into your site's head section.
Make a favicon step by step
- Prepare a square image of your logo or initial — at least 512 × 512 pixels, ideally a PNG with a transparent background.
- Open the Favicon Generator and add it.
- Check the previews, especially the 16-pixel one: that's the size in most browser tabs.
- Download the files.
- Upload them to the root folder of your website.
- Paste the generated HTML tags into the head section of your pages (or your site builder's "custom code" setting).
What you get, and why
Different devices look for different files:
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Browser tabs, older browsers, Windows |
| PNG icons | 16, 32, 48 px | Modern browser tabs |
| Apple touch icon | 180 px | iPhone and iPad home screens |
| Android icons | 192 and 512 px | Android home screens and the web manifest |
| site.webmanifest | — | Lets phones add your site like an app |
The generated HTML tags tell each browser where to find its icon.
Designing an icon that works at 16 pixels
At 16 × 16 pixels — about the size of a letter on your screen — detail disappears. The icons that work best:
- Use a simple shape or a single bold letter rather than your full logo with text.
- High contrast: a strong shape on a plain background, or a bold colour on transparency.
- Fill the space: crop tightly so the mark fills most of the square. Use the Image Cropper to crop to a square first.
- Check the preview. If the 16-pixel version is a blur, simplify or crop to the main mark.
Transparent or solid background?
- Transparent icons adapt to light and dark browser themes, but a dark logo can vanish on a dark tab bar.
- A solid background guarantees contrast everywhere and looks consistent on phone home screens, where transparent areas are often filled with black or white.
A common approach: a transparent favicon for browser tabs and a solid-background version for the Apple and Android icons. To remove a background from your logo first, try the Background Remover.
Round icons on phones
Android may mask home-screen icons into circles or rounded shapes, and iPhones round the corners automatically. Keep important parts of the icon away from the corners. To preview your mark as a circle, try Round Image Crop.
Installing on popular platforms
- WordPress: Appearance › Customize › Site Identity › Site Icon (upload the 512-pixel PNG; WordPress makes the sizes).
- Shopify: Online Store › Themes › Customize › Theme settings › Favicon.
- Wix and Squarespace: in site settings, look for Favicon.
- Custom sites: upload the files and paste the HTML tags into your page template's head.
Troubleshooting
- Old icon still showing? Browsers cache favicons aggressively. Open the site in a private window, or clear the cache.
- Not showing in Google results? Google needs a favicon at least 48 × 48 pixels, linked in the page, and recrawls on its own schedule.
Frequently asked questions
Is my logo uploaded?
No. All the icon sizes are generated in your browser.
Can I use a JPG?
Yes, but a PNG with transparency gives better results for logos.