Favicon

What size should a favicon be, in pixels?

A favicon isn't just one size: it's normal to prepare a few sizes, each suited to where it appears. That's because the browser tab, Google search results and a phone's home screen each use a different size.

Google Search Central says to make your favicon square (1:1) and larger than 48×48 pixels so it looks good on different screens. If you use a web app settings file (manifest), web.dev says to include at least 192×192 and 512×512 icons.

The table below is a commonly used checklist. The files you actually need vary a little depending on how your website is built, so decide together with your web agency.

Once you pick a favicon, it's best to keep it for a long time. Customers remember your business by the icon's shape in their tabs and bookmarks, so changing it often actually makes you harder to find.

Which favicon file format is best: ICO, PNG or SVG?

These days the common approach is PNG as the default, with ICO and SVG added if needed. Google says it supports many formats, including ICO, PNG, GIF and JPEG.

ICO is an old format that can hold several sizes in one file, and almost every browser can read it. SVG stays sharp at any size, but it isn't supported everywhere yet, so it's safer to include a PNG as well.

iPhones use a separate icon called "apple-touch-icon" on the home screen instead of the regular favicon. Give this icon a solid background rather than a transparent one so it looks clean on the home screen.

An SVG favicon can even be made to change color to match dark mode. But browser support varies, so unless you really need it, a single design that's visible on both light and dark screens is simpler.

How do I make a favicon and add it to my website?

If you have your logo file, you can make one in a few steps. Whether you do it yourself or leave it to your web agency, knowing the steps makes it easier to check the result.

Some website builders and frameworks today generate the linking code automatically when you put icon files in a designated folder. Just ask your web agency whether the code needs to be added by hand.

Be sure to keep the large original file. If you need a new size later, enlarging a small file makes it blurry.

If you match your share preview image and social media profile picture to the same design as your favicon, customers can easily recognize your business wherever they see it.

1. 01Pick the part of your logo that's still recognizable when shrunk (the first letter, a symbol).
2. 02Place that part large on a square canvas, leaving only a little margin around the edges.
3. 03Make a large original first, such as 512×512, and export the smaller sizes you need from it.
4. 04Check that the shape is still visible when shrunk to 16×16 and 32×32, and thicken the lines if it gets muddy.
5. 05Add the "icon" and "apple-touch-icon" link code to the head of your website's front page.
6. 06Check it in the browser tab, when added to a phone's home screen, and on both light and dark tab bars.

Why isn't my favicon showing in Google search results?

Usually it's because one of Google's requirements was missed. Google says the favicon link code must be on your website's front page, and Google's crawler must be able to read both the front page and the favicon file.

Only one favicon is recognized per site address (host), and the front page of a subpath (e.g., address/shop) isn't recognized separately. It's also important not to change the favicon file's address often.

Even when you meet every requirement, it won't change right away. Google says it can take anywhere from a few days to a few weeks to recrawl, and requesting indexing of your front page with the URL Inspection tool in Google Search Console may speed things up a bit. Also note that meeting the requirements doesn't guarantee your favicon will be shown.

If search results show a default icon instead of yours, it often means Google hasn't found your favicon yet or decided it doesn't meet the requirements. Go back over the requirements above one by one.

How should I design a favicon for my type of business?

A favicon is the marker that helps people find your business among dozens of tabs, so a shape unique to your business is more useful than a picture of your industry. Common images like a coffee cup or scissors easily blend in with other businesses.

Using just one main color from your logo keeps it sharpest when shrunk. Gradients and thin lines are barely visible at 16 pixels.

Once it's made, open it among several real tabs and compare. Whether your icon catches the eye right away next to the icons of sites you use often is the surest test.

• Cafe: put the first letter of your shop's name inside a circle in your brand color.
• Hair salon: take just the symbol from your logo and redraw it with thick lines.
• Craft studio: a handwritten logo becomes unreadable when shrunk, so use a single initial.
• Online store: many shoppers keep several store tabs open, so use strong color contrast to stand out.

What are common favicon mistakes?

The most common mistake is squeezing a wide logo as-is into a square, which makes it tiny. Another frequent one is a black logo on a transparent background that disappears on dark tab bars.

Sometimes the website builder's default icon is still there. One look at the tab before launch will tell you, so be sure to check.

If you changed the favicon file but it looks the same on your computer, it's usually because your browser saved the old icon. Open the site in another browser or a private (incognito) window to see whether it changed.

What should I confirm with my web agency about the favicon?

Confirm the four things below with your web agency before launch, and your icon will look sharp everywhere: in tabs, in search and on phone home screens.

• Do you make icons for browser tabs, Google search and phone home screens?
• Did you add a background or outline so it's visible on dark screens too?
• Is anything blocking Google's crawler from reading the favicon file?
• Can I get the original (large) file?