What a favicon needs
The favicon is the small icon of your website. It appears in the browser tab, in bookmarks and next to your result in Google.
How it works
Browsers look for the favicon in two places. First in a <link rel="icon"> in the head of the page:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Without that reference, they request the fixed address /favicon.ico. Google shows the favicon in mobile and desktop search results next to the site name. Without one, a neutral placeholder appears there, and your page stands out less among the others.
bytereport checks both: whether the start page names an icon and whether there is one at /favicon.ico. Either is enough.
What matters
- SVG or PNG. SVG is a vector graphic and stays sharp at any size. PNG works just as well; the old ICO format is still understood.
- At least 48 × 48 pixels. Google requires a square image and recommends more than 48 × 48 pixels. An SVG meets that by itself.
- Simple and recognisable. At 16 pixels in a tab, nothing is left of a logo with lettering. A single letter or the logo's symbol works better.
- Reachable for crawlers. The icon must not be blocked in robots.txt, and its address should not keep changing.
- For the home screen. When someone adds the page to the home screen on an iPhone, they get the
apple-touch-icon, a PNG of 180 × 180 pixels. That is an extra, not needed for search.
How to set it up
In WordPress you upload it as the “Site Icon”; other CMSs and site builders have a similar setting. The system then generates the sizes and references it needs.
Without a CMS, put the file in the root directory and reference it in the <head>:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">It can take a few days before Google shows a new favicon in search results.