How to Make a Favicon for Your Website
Updated October 2026
A favicon is the small icon next to your site's name in a browser tab, in bookmarks and on a phone's home screen. Without one, browsers show a blank page symbol. Making one takes a few minutes.
Start with the right image
A favicon is shown as small as 16 by 16 pixels, about the size of a letter on this page. Detail disappears at that size, so a simple image works best.
- Use a square image of at least 512 by 512 pixels.
- Pick one clear shape: the symbol from your logo, or a single letter.
- Leave out small text and thin lines. They turn into a smudge.
- Use strong contrast, and check that it stays visible on both light and dark browser tabs.
Is your logo wide instead of square? Crop the symbol out of it first.
Which files do you need?
Different devices ask for different sizes. This set covers browsers and phones:
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Browser tabs and bookmarks, including older browsers |
| apple-touch-icon.png | 180 x 180 px | iPhone and iPad home screen |
| icon-192.png | 192 x 192 px | Android home screen |
| icon-512.png | 512 x 512 px | Android splash screen and app lists |
| site.webmanifest | Text file | Tells Android which icons to use |
An .ico file is special because it can hold several sizes at once. The browser picks the one that fits.
Make the files
- Open the Favicon Generator.
- Choose your square image.
- Check the small previews. If the 16 pixel version is unclear, simplify the image and try again.
- Download the ZIP. It contains all the files in the table above.
Add them to your site
Put the files in the main folder of your website, next to the home page. Then add the lines of HTML from the generator inside the head section of your pages. They tell browsers where to find each icon.
Browsers also look for a file named favicon.ico in the main folder by themselves, so that one file already works without any HTML. The extra lines are what make phones show a proper icon.
If you use a site builder such as WordPress, Wix or Shopify, you do not need the HTML. Look for a setting called site icon or favicon and upload the 512 pixel image there.
The new icon does not appear
This is almost always the browser remembering the old icon. Favicons are kept much longer than normal pages.
- Reload the page with Ctrl+F5, or Cmd+Shift+R on a Mac.
- Open the site in a private window.
- Open the icon directly by adding /favicon.ico after your address, to check that the new file is really online.
- Give it time. Search results in Google can take days or weeks to show a new favicon.