Design & UX

Favicon

The small icon shown in browser tabs, bookmarks and sometimes search results.

By Nick Irmo · Updated

What Favicon means

A clear favicon makes your site easier to spot among open tabs. Google can show it next to your result, so use a simple square version of your logo.

Why it matters for your website

Your favicon helps people find your tab among many open ones and makes the site look finished. Google can also show it next to your result in search, so a blurry or missing icon looks less trustworthy. It is a small detail with an outsized effect on first impressions.

Example

A yoga studio replaces its generic browser icon with a simple version of its lotus logo. The icon now shows in tabs, bookmarks and next to its listing in Google results.

Tips

  • Use a simple, square version of your logo that reads at very small sizes.
  • Provide several sizes so it looks sharp on phones and desktops.
  • Follow Google's favicon guidelines so it can appear in search results.

Common mistakes

  • Shrinking a detailed full logo that turns into an unreadable blob.
  • Forgetting to update the favicon after a rebrand.

Questions about Favicon

What is Favicon?
The small icon shown in browser tabs, bookmarks and sometimes search results.
Why is my favicon not showing in Google search results?
Google needs to crawl the favicon and home page and may take time to update. Make sure the icon is square, crawlable and follows Google's guidelines.
What file format should a favicon be?
ICO, PNG and SVG are all widely supported. Many sites include a PNG or SVG plus an Apple touch icon for phones.

Tell us what the site needs to do.

Share a few details and a budget range. We reply within one business day with a plan, a platform recommendation and a fixed quote.