Deutsch
CMS, operations & special files

Favicon

Also known as: favorite icon, site icon

A favicon (favorite icon) is the small icon of a website. Browsers show it in tabs and bookmarks, and Google can show it next to a result in Search.

How do you add a favicon?

MDN names <link rel="icon"> in the page head as the way to specify a favicon. For Google Search, the documentation sets these requirements:

  • The image is square (1:1) and at least 8 x 8 pixels. Google recommends a size larger than 48 x 48 pixels.
  • Google supports one favicon per hostname. Subdirectory pages use the favicon of the host.
  • Googlebot and Googlebot-Image must be able to crawl both the favicon file and the home page.
  • The favicon URL should stay stable.
  • Google replaces inappropriate images, such as hate symbols, with a default icon.

Google supports the rel values icon, shortcut icon, apple-touch-icon and apple-touch-icon-precomposed. After a change, an update in search results can take anywhere from several days to several weeks.

Example

HTML
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Common mistakes

  • The favicon file or home page is blocked in robots.txt.
  • The image is smaller than 8 x 8 pixels or not square.
  • The favicon URL changes with every release.
  • The favicon is set only on a subdirectory home page. Google reads it from the home page of the hostname and does not support subdirectory-level home pages.
  • A change is expected to show immediately. Google says recrawling can take several days to several weeks, and a favicon is not guaranteed to appear even when all guidelines are met.

FAQ

Which file format works for a favicon? MDN lists GIF, PNG and ICO. Google Search supports BMP, GIF, ICO, PNG, JPEG, PPM and TIFF according to its documentation. SVG is not on that list.

Why does Google not show my favicon? Typical causes are a blocked file, a missing link on the home page or an image below the minimum size. Google may also need days or weeks to recrawl.

Sources

  1. Define a favicon to show in Google Search results – Google Search Centraldevelopers.google.com
  2. Favicon – MDN Web Docs Glossarydeveloper.mozilla.org
  3. HTML Favicon – W3Schoolsw3schools.com

Last updated: