Favicon check: formats, sizes, and errors

A favicon is a small website icon shown in browser tabs, bookmarks, and search results. It may seem like a minor detail, but a missing or incorrectly configured favicon causes errors 404 in logs, affects how your site appears in mobile browsers, and reduces user trust.

What a favicon is and why you need one

The browser automatically requests /favicon.ico every time a page loads. If the file is missing, an error 404 appears in the logs. Search engines take the presence of a favicon into account when generating snippets: the icon appears next to the URL in Google search results.

In addition to the traditional favicon, modern browsers and operating systems request icons in different sizes for different contexts: taskbars, smartphone home screens, and browser tabs.

Required favicon sizes

A complete set of icons for all platforms:

The minimum set for most websites: favicon.ico (16+32+48 in one file) and apple-touch-icon.png (180×180).

Formats: ICO vs PNG

ICO is an older format specific to Windows. Its advantage is that one file can contain multiple sizes (multiresolution ICO). Browsers can use it without an <link> tag.

PNG is the modern option. It offers better compression, supports transparency, and is processed quickly. It requires an explicit <link> tag in <head>.

Recommended HTML structure:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Common favicon errors

1. Incorrect path. If the favicon is located in /images/favicon.ico, the browser still checks /favicon.ico first. Always specify an explicit <link> tag or place the file in the root directory.

2. Browser cache. After the icon is updated, users may continue to see the old version for a long time. Add versioning: /favicon.ico?v=2 or use a hash in the filename.

3. Missing Apple Touch Icon. When an iOS user adds a website to the home screen, the browser looks for apple-touch-icon.png. Without it, iOS scales an arbitrary screenshot of the page, which looks unattractive.

4. Incorrect sizes. An icon sized 16×16 stretched to 180×180 will look blurry. Prepare a separate file at the required size.

5. Missing type in the tag. Some browsers do not recognize the format without an explicit type="image/png".

site.webmanifest and PWA icons

For a Progressive Web App, create a site.webmanifest file:

{
  "name": "Название сайта",
  "short_name": "Сайт",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Link the manifest in <head>:

<link rel="manifest" href="/site.webmanifest">

To check meta tags and the Open Graph snippet, use the meta tags tool. Preview how a link will look on social media with OG Preview. If you need to create a favicon from scratch, use the favicon generator.

How to check a website’s favicon

The favicon checker analyzes:

• Whether /favicon.ico is present at the standard path
• <link> tags in the page’s HTML code
• Whether all specified icons are accessible (HTTP status 200)
• Whether the sizes match those declared in sizes
• Whether apple-touch-icon and site.webmanifest are present

Tool on reChecker

The reChecker favicon checker analyzes your website’s icons by URL: it finds all declared icons, checks their availability and sizes, and identifies common configuration errors.

Open the tool on reChecker →