What is a favicon?
A favicon is the small icon shown in the browser tab next to your page title, in bookmarks, in browser history and in Google mobile search results. When someone adds your site to their phone home screen, a larger version of the same icon is used. A clear favicon makes your website look finished and easy to recognise among many open tabs.
How to make your favicon
- Choose whether to build the icon from a letter (or emoji) or from your own logo image.
- For a letter icon, pick the background color, text color and shape. For an image, choose a square logo; non-square images are cropped from the centre.
- Click Download favicon.ico. Click any PNG preview to download that size too.
- Upload the files to the main folder of your website and paste the HTML code into the
<head>of your pages.
Which sizes do you need?
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px inside one file | All desktop browsers, including older ones |
| icon-32.png | 32 × 32 | Modern browser tabs |
| apple-touch-icon.png | 180 × 180 | iPhone and iPad home screen |
| icon-192.png / icon-512.png | 192 and 512 | Android home screen and installable web apps |
Design tips
At 16 pixels there is room for very little detail. A single bold letter or a simple symbol works far better than a full logo with small text. Use strong contrast between the icon and the background so it stands out in both light and dark browser themes.
Frequently asked questions
Why does my new favicon not show?
Browsers cache favicons for a long time. After uploading, open the icon URL directly, or test in a private window.
What is inside the .ico file?
The generated favicon.ico holds three PNG images (16, 32 and 48 pixels), and the browser picks the right one for the screen.
Does Google show my favicon in search results?
Google can show it when the icon is linked in your page head, is square and is at least 48 × 48 pixels. Our 192 px PNG meets that.