Favicon

The name comes from "favourites icon", from the early days when browsers showed it next to bookmarked sites. Today it appears in many more places: tabs, address bars, home screen shortcuts on phones and next to the site name in Google's search results. A favicon is not the full logo shrunk down; at 16 or 32 pixels, detailed logos turn into blurs, so most brands use a simplified mark or a single letter.

A favicon is also not the image people see when a page is shared on social media or in messaging apps. That preview image is a separate, much larger file, usually set with Open Graph tags, and a site needs both for its links to look right everywhere.

How it works

Browsers look for the icon in two ways. The page's HTML can include link elements in the head that point to icon files, such as a PNG or SVG favicon and an apple-touch-icon used when someone adds the site to an iPhone home screen. If no link is given, many browsers also check for a file named favicon.ico at the root of the domain, so having one there is a useful fallback.

Different places use different sizes, so a typical setup includes a small icon for tabs, a larger one for phone home screens, often 180 by 180 pixels for Apple devices, and sometimes a web app manifest listing bigger icons for Android and installed web apps. An SVG favicon can scale to any size and, in browsers that support it, can even switch colours for dark mode.

Google shows a favicon next to search results. Its guidelines ask for an icon defined on the home page, crawlable by Google, square, and comfortably larger than 48 by 48 pixels, and a visual representation of the brand. Google may take some time to pick up a new favicon after it changes, and it can show a generic icon if the file is missing or breaks the guidelines.

Example

A physiotherapy clinic's favicon is a detailed version of its logo with fine text. In browser tabs it looks like a grey smudge, and in Google's mobile results it is unrecognisable next to competitors' crisp marks. The designer creates a simplified icon, a single bold letter in the brand colour on a solid background, exports it as an SVG plus PNG sizes and a favicon.ico, and links them in the site's head.

Checking takes a few minutes: open the site in a few browsers and look at the tab, add it to a phone home screen, and search for the clinic's name on a phone to see the icon in results once Google has updated it. The URL Inspection tool in Google Search Console can confirm Google can fetch the home page and its files.

Why it matters for your business

A favicon is small but visible in every tab and on search results pages next to competitors, so a clear one helps people recognise and return to your site. It costs very little to get right. It will not, by itself, change rankings or bring new customers, and it is not worth weeks of design iteration; a simple, legible mark that matches the brand is enough.

Common mistakes

• Using the full logo with small text, which becomes unreadable at tab size.
• Providing only one tiny size, so the icon looks blurry on phone home screens.
• Blocking the icon file from search engine crawlers, so Google shows a generic icon.
• Forgetting to update the favicon after a rebrand, leaving the old mark in every tab.

Questions people ask

What size should a favicon be?

Provide several sizes. A small icon such as 32 by 32 pixels covers browser tabs, a 180 by 180 pixel apple-touch-icon covers Apple home screens, and larger icons in a web app manifest cover Android. For Google results, use a square icon comfortably larger than 48 by 48 pixels.

Why is my favicon not showing in Google?

Google may not have recrawled your home page since you added or changed it, which can take some time. Also check that the icon is linked from the home page, is square, is not blocked by robots.txt and follows Google's favicon guidelines. Search Console's URL Inspection tool helps confirm it can be fetched.

Do I need a favicon.ico file?

It is no longer strictly required, since modern browsers read PNG or SVG icons linked in the HTML. Keeping a favicon.ico at the root of the domain is still a sensible fallback, because some browsers and tools request that file automatically when no other icon is declared.