← Back to Index

Favicon

FigureWhere favicons appear. They are no longer just for tabs; they are a key part of your search listing (SERP) branding.

What is a Favicon?

A favicon (short for "favorite icon") is the small icon associated with a website that appears in browser tabs, bookmarks, history, and increasingly important for SEO, in Google mobile search results.

Originally just a user interface element to help users identify tabs and bookmarks, the favicon has gained significant SEO importance. Google now displays favicons next to URLs in mobile search results (and has been testing this on desktop), making them a visible part of your brand's search presence.

When users see a row of search results, your favicon is often the first visual element they notice. A professional, recognizable icon contributes to brand recognition and can influence click-through rates.

Why Favicons Matter for SEO

1. Brand Recognition in Search Results

In mobile search results, the favicon appears prominently next to your URL. This small image becomes part of your brand's visual identity in search:

  • Recognizable logos stand out in a list of results
  • Consistent branding builds trust
  • Users learn to associate your icon with quality content
  • Repeat visitors may specifically look for your favicon

Sites without favicons display a generic globe icon, which looks unprofessional and may reduce trust.

2. Click-Through Rate Impact

While direct studies on favicon CTR impact are limited, the visual prominence in mobile search suggests influence on user behavior:

  • Professional icons signal established, trustworthy sites
  • Generic icons may be unconsciously skipped
  • Distinctive icons are memorable for return searches
  • Brand consistency across touchpoints reinforces trust

3. User Experience and Trust

Beyond search results, favicons matter throughout the user journey:

Browser Tabs: When users have multiple tabs open, favicons help them quickly identify your site. A missing favicon makes your tab look broken or incomplete.

Bookmarks: Saved bookmarks without favicons appear unprofessional and are harder to find in a list.

History: Users scanning their browsing history rely on favicons for quick identification.

Mobile Home Screen: When users add your site to their phone's home screen, the favicon (or related touch icon) becomes your app icon.

4. Perceived Quality Signal

A missing or low-quality favicon signals an unfinished or amateur website. While this is not a direct ranking factor, it affects:

  • First impressions for new visitors
  • Perceived professionalism
  • Trust in your content
  • Likelihood of engagement

Technical Requirements

File Formats

ICO (Traditional): The original favicon format supporting multiple sizes in one file. Still widely supported but being replaced by modern formats.

PNG: Common modern format with good quality and compression. Widely supported across browsers.

SVG: Vector format that scales perfectly at any size. Modern browsers support SVG favicons, making them ideal for responsive display.

Size Requirements

Browser Tabs: 16x16 and 32x32 pixels (traditional sizes)

Google Search Results: Google recommends icons that are multiples of 48x48 pixels (48x48, 96x96, 144x144, or 192x192)

Apple Touch Icons: 180x180 pixels for iOS devices

Android Home Screen: 192x192 and 512x512 pixels

Windows Tiles: Various sizes including 150x150 for medium tiles

Google's Favicon Guidelines

For display in Google search results:

  • Must be a multiple of 48x48 pixels
  • Must be visually representative of your website
  • Must not contain inappropriate content
  • Must not be a generic icon
  • Should be the same as your brand logo where possible

Code Implementation

Basic HTML Implementation

html
<!-- Standard favicon -->
<link rel="icon" href="/favicon.ico" sizes="any" />

<!-- PNG versions for modern browsers -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />

<!-- SVG favicon for perfect scaling -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

<!-- Apple Touch Icon for iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

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

Web Manifest for Android

Create a site.webmanifest file:

json
{
  "name": "Your Site Name",
  "short_name": "SiteName",
  "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"
}

Root Directory Fallback

Even without link tags, browsers look for /favicon.ico in your root directory. Always include this file as a fallback.

Best Practices

Design for Small Sizes

Favicons display at tiny sizes. Your design must be:

  • Simple and recognizable
  • High contrast
  • Readable at 16x16 pixels
  • Distinct from competitors

Complex logos often fail at favicon sizes. Consider using just a logomark, initial, or simplified version of your brand symbol.

Test on Multiple Backgrounds

Browsers have light and dark modes. Test your favicon against both:

  • Light backgrounds (traditional browser chrome)
  • Dark backgrounds (dark mode, some mobile browsers)
  • System accent colors (some browsers tint tab backgrounds)

Avoid pure black or pure white favicons that disappear against matching backgrounds.

Provide Multiple Sizes

Different contexts require different sizes. Provide:

  • 16x16 and 32x32 for browser tabs
  • 48x48+ for Google search results
  • 180x180 for Apple touch icons
  • 192x192 and 512x512 for Android home screens

Favicon generators can create all required sizes from a single high-resolution source.

Use Consistent Branding

Your favicon should match your overall brand identity:

  • Use brand colors
  • Match your logo style
  • Maintain consistency across all icon contexts
  • Update if your brand evolves

Common Favicon Mistakes

Using Full Logos

Detailed logos with text become unreadable at 16x16 pixels. Use a simplified symbol or initial instead.

Ignoring High-Resolution Needs

Creating only a tiny 16x16 favicon misses modern requirements. Create larger versions (512x512) for home screen icons and PWA contexts.

Transparency Issues

Transparent backgrounds can cause problems:

  • Black logos disappear on dark backgrounds
  • White logos disappear on light backgrounds
  • Some contexts may not support transparency

Test thoroughly or use a small background element for contrast.

Infrequent Updates

Google caches favicons aggressively. If you change your favicon, expect weeks before the new version appears in search results. Plan icon changes carefully.

Missing Apple Touch Icon

iOS devices use a separate apple-touch-icon. Without it, iOS creates a screenshot of your page instead — usually an ugly result for home screen icons.

Testing Your Favicon

Browser DevTools

Check the Network tab to verify all favicon files load correctly.

Favicon Checker Tools

Online tools validate that all required favicon files are present and properly configured.

Real Device Testing

Test on actual iOS and Android devices by adding your site to the home screen.

Google Search Console

After Google indexes your site, verify your favicon appears correctly in mobile search results.