Favicon: what it is and how to create one

What is a favicon

A favicon (short for "favorite icon") is a small image that a browser displays before a website's name in a tab, in the address bar, in bookmarks, and in browsing history. The standard sizes are 16×16 or 32×32 pixels.

The favicon was introduced in Internet Explorer 5 in 1999. Modern browsers support multiple sizes and formats for different devices and contexts, from a small favicon in a tab to an icon on a mobile home screen.

Default filename: /favicon.ico. Most browsers automatically request this file each time you visit a website.

Why you need a favicon

Brand recognition: users see the favicon in all their tabs and bookmarks, making it a visual identifier for the website.

Trust: a website without a favicon looks unfinished or unprofessional.

Bookmarks and history: without a favicon, the browser's default icon is shown instead, making your website harder to find in bookmarks.

PWA and mobile: when a website is added to a phone's home screen, an apple-touch-icon or mask icon is used.

Favicon sizes

Favicon formats

ICO — the classic format, supporting multiple sizes in one file. Recommended for the root favicon.ico.

PNG — a modern format with better quality and a smaller file size. Used for all specific sizes.

SVG — a vector format that scales perfectly. Supported by Chrome, Firefox, and Edge (but not Safari for tabs).

WebP — offers good compression but has limited favicon support.

How to add a favicon

Full set of HTML tags

<head>
  <!-- Классический favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />

  <!-- PNG версии -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

  <!-- SVG (поддерживает тёмную тему) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

  <!-- Apple устройства -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

  <!-- Android / PWA -->
  <link rel="manifest" href="/site.webmanifest" />
</head>

Web App Manifest (site.webmanifest)

{
  "name": "reChecker",
  "short_name": "reChecker",
  "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"
}

SVG with a dark theme

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    circle { fill: #333; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #fff; }
    }
  </style>
  <circle cx="50" cy="50" r="40"/>
</svg>

Tools for creating a favicon

• favicon.io — generates all sizes from a single PNG or letter
• realfavicongenerator.net — creates a complete set for all platforms
• Figma/Photoshop — create one from scratch

Check your favicon with reChecker

Use the Favicon Checker to audit your website's icons. The tool shows:

• Whether a favicon is present and accessible
• Supported sizes and formats
• Whether an Apple Touch Icon and Web Manifest are present
• Warnings about missing sizes

FAQ

Does a favicon affect SEO? Not directly. However, a favicon improves the user experience and trust in a website. Google sometimes shows a favicon in mobile search results before the website name — this affects CTR.

Why is my browser showing an old favicon? Browsers cache favicons aggressively. To clear the cache: open DevTools → Network → check Disable cache → refresh the page. Or add versioning: href="/favicon.ico?v=2".

Do I need a separate favicon for mobile? Yes. An Apple Touch Icon (180×180) is used when a website is added to an iOS home screen. Android uses icons from the Web App Manifest. Without them, the browser uses the default favicon or a screenshot of the page.