No favicon

What a favicon does

The icon appears next to the title in browser tabs, in the bookmarks list, in history, and on a phone's home screen when someone saves the site. A client switching between ten tabs finds theirs by the icon. Search results on mobile also show a site icon next to the result, which Google builds from the favicon it finds for the site, so a missing one can leave your result with a generic globe.

Browsers request /favicon.ico on their own when a page names no icon, so some sites show an icon without declaring one. A page that declares nothing depends on that fallback and on the file existing at the root, which is easy to break during a move from staging. Declaring the icon explicitly removes the guesswork and lets you offer an SVG or PNG instead of only the old .ico format.

How Skewcheck detects it

Skewcheck reads the HTML for a <link> element whose rel includes icon or apple-touch-icon, with a non-empty href. If it finds one, the check passes. If not, the check warns with low severity and removes 1 point from the score, tied for the lowest weight of any check.

The check reads the link only. It does not download the icon, so a link pointing at a file that returns a 404 still passes. It also does not probe /favicon.ico for sites that rely on the fallback, which means such a site gets a warning even though browsers might show an icon. Fix it by declaring the link, and open the icon address in a browser to confirm the file loads.

curl -s https://example.com | grep -io '<link[^>]*icon[^>]*>'

Adding one

Export the logo mark as a square image. An SVG scales to every size and can even follow dark mode, and a 32 by 32 pixel .ico or PNG is the safe fallback. A 180 by 180 pixel PNG serves as the apple-touch-icon for iOS home screens. Place the files at the site root and link them from the <head> as shown above. In the Next.js App Router, an icon file in the app directory is picked up and linked for you.

Site builders have a dedicated field. Webflow and Framer both have a favicon setting in the site settings, WordPress has Site Icon under Appearance, Customize, Site Identity. After publishing, hard-refresh the page, since browsers cache icons aggressively and an old one can linger in a tab.

Before and after

<head>
  <title>Acme Plumbing</title>
</head>

<head>
  <title>Acme Plumbing</title>
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
</head>