How to make a favicon
The sizes, formats and code you need for a favicon that shows everywhere.
The favicon is the small icon in a browser tab, in bookmarks and next to your site in Google's mobile search results. A missing favicon makes a site look unfinished, and a blurry one looks worse. Making a good one takes a few minutes.
Start with the right artwork
A favicon is displayed as small as 16 by 16 pixels, so a full logo with a wordmark will be unreadable. Use a simple mark: the symbol from your logo, a single initial, or a bold shape in your brand colour. Test it by shrinking it to a quarter of the size on screen: if you can still tell what it is, it will work.
Start from a square image at least 512 by 512 pixels, ideally a PNG with a transparent background. If your logo is not square, crop it to a square with the ratio locked to 1:1.
The files you need
| File | Size | Used by |
|---|---|---|
| favicon.ico | Contains 16, 32 and 48 pixel versions | Browsers, older systems, the default request for /favicon.ico |
| A PNG icon | 32 by 32 and 192 by 192 | Modern browsers, Android home screens |
| apple-touch-icon.png | 180 by 180 | iPhone and iPad home screen bookmarks |
Google Search uses your favicon in results too. It needs to be a square at least 48 by 48 pixels and must be crawlable on your site.
Making the ICO file
Drop your square PNG into the PNG to ICO converter. It produces a real .ico file containing the small sizes browsers ask for. For the PNG versions, resize the same square image to 180, 192 and 32 pixels.
Adding it to your site
Upload favicon.ico to the root of your site so it is reachable at yoursite.com/favicon.ico, and add these lines inside the head of your pages:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
On WordPress, go to Appearance, Customize, Site Identity and upload a square image as the Site Icon; WordPress creates the sizes for you. Shopify, Wix and Squarespace each have a favicon setting in the site or theme settings.
When the new favicon does not show
Browsers cache favicons stubbornly. Open the site in a private window, or visit yoursite.com/favicon.ico directly and refresh. Google can take days or weeks to update the icon in search results, after it recrawls your homepage.
Common mistakes
- Using the full logo with small text, which turns into a smudge at 16 pixels.
- A white icon on a transparent background, which disappears on light browser tabs.
- Only providing a tiny 16 pixel file, which looks blurry on high-resolution screens.
- Forgetting the file at /favicon.ico, which some browsers and crawlers request no matter what the page says.