Skip to content
Browse all guides

Issue #133 · standard

Issue 133

What is this issue?

sidebar_label: "What is this issue?"

What is this issue?

This issue checks whether pages declare multiple favicon size variants — at minimum 32×32 and 16×16 — using <link rel="icon" sizes="..."> tags so that browsers can select the most appropriate icon for each display context.

A passing implementation requires:

  • A <link rel="icon" sizes="32x32"> tag pointing to a 32×32 favicon file
  • A <link rel="icon" sizes="16x16"> tag pointing to a 16×16 favicon file
  • Both files must be accessible and return HTTP 200 status
  • Alternatively, an SVG favicon (<link rel="icon" type="image/svg+xml">) can serve as a universal fallback that scales to all sizes

Example: If your page declares both 32×32 and 16×16 favicon variants, browsers can use the 32×32 version for high-DPI displays and the 16×16 version for standard bookmarks and tabs.

Why does it matter?

sidebar_label: "Why is this important?"

Why is this issue important?

Favicon size variants are essential for ensuring crisp, clear icon display across different browsers, devices, and display contexts.

Impacts on user experience and visual quality:

  • Visual clarity: Different display contexts require different icon sizes. Browser tabs use 16×16 icons, while operating system taskbars and high-DPI displays use 32×32 or larger. Without explicit size declarations, browsers must scale icons, resulting in blurry or pixelated display.

  • User experience: Crisp, clear favicons enhance professional appearance and brand recognition. Blurry or poorly scaled icons can make a site appear unprofessional or broken.

  • Cross-device consistency: High-DPI screens (Retina displays) prefer larger icons and scale down, while standard displays need smaller icons. Size variants ensure optimal display across all device types.

  • Browser compatibility: Different browsers have different icon size preferences. Explicit size declarations ensure each browser can select the most appropriate icon for its display context.

Resolving this issue improves the overall SEO health score by ensuring professional visual presentation across all platforms, which contributes to better user trust, improved brand recognition, and reduced bounce rates from poor visual quality.

How to fix it

sidebar_label: "How to fix"

How to fix it

Declare explicit size variants in the page <head> section:

Minimum required implementation:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

Best practice full set:

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

Step-by-step recommendations:

  1. Create the favicon files:

    • Create PNG files at exactly 16×16 and 32×32 pixels
    • Use PNG format for size-specific variants (better browser support than ICO for explicit sizes)
    • Optionally create an SVG favicon that scales to all sizes

  2. Add the link tags:

    • Place the size-variant tags in the <head> section of all pages
    • Include the sizes attribute with the correct dimensions
    • Use the correct type attribute (image/png for PNG, image/svg+xml for SVG)

  3. Verify file accessibility:

    • Ensure each declared href returns HTTP 200 when accessed directly
    • Verify the actual image dimensions match the declared sizes value
    • Check that files are not missing after build or deployment

  4. Consider SVG fallback:

    • Add an SVG favicon (<link rel="icon" type="image/svg+xml" href="/favicon.svg">) as a universal fallback
    • SVG icons scale natively to all sizes without quality loss

  5. Test across browsers:

    • Check favicon display in different browsers (Chrome, Firefox, Safari, Edge)
    • Verify appearance in browser tabs, bookmarks, and taskbars
    • Test on both standard and high-DPI displays

Examples

sidebar_label: "Examples"

Examples

Example 1: Correct implementation with size variants

Scenario: A website properly declares both 16×16 and 32×32 favicon size variants.

Passes because:

  • Both <link rel="icon" sizes="16x16"> and <link rel="icon" sizes="32x32"> tags are present
  • Both files are accessible and return HTTP 200 status
  • Browsers can select the appropriate size for different display contexts
<head>
  <title>My Website</title>
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
</head>

Example 2: SVG favicon as universal fallback

Scenario: A website uses an SVG favicon that scales to all sizes.

Passes because:

  • An SVG favicon (<link rel="icon" type="image/svg+xml">) is present
  • SVG scales perfectly to any size (16×16, 32×32, etc.)
  • This is a valid alternative to declaring multiple size variants
<head>
  <title>My Website</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>

Example 3: Missing size variants

Scenario: A website only has a single favicon without size declarations.

Fails because:

  • Only a single <link rel="icon"> tag is present
  • No sizes attributes are declared
  • No SVG fallback is provided
  • Browsers cannot select the optimal icon for different display contexts
<head>
  <title>My Website</title>
  <link rel="icon" href="/favicon.ico" />
</head>

Corrected version:

<head>
  <title>My Website</title>
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
</head>

How PixyScan detects this

sidebar_label: "How PixyScan detects this"

How PixyScan detects this

PixyScan uses a comprehensive detection process to identify favicon size variant implementation:

  1. Fetch the page: PixyScan issues an HTTP GET request to the target URL and reads the raw HTML response without executing JavaScript.

  2. Scan for favicon link tags: The crawler scans the <head> block for all <link rel="icon"> tags.

  3. Extract size information: For each matched tag, PixyScan extracts the sizes attribute value and records all declared favicon sizes.

  4. Check for required sizes: The crawler checks whether the collected sizes include 32x32 and 16x16.

  5. Detect SVG fallback: PixyScan checks whether any <link rel="icon" type="image/svg+xml"> tag is present. An SVG favicon scales natively to all sizes and acts as a universal fallback.

  6. Extract href values: For each size variant, the crawler extracts the href attribute value.

  7. Test URL accessibility: PixyScan issues secondary HTTP GET requests to each extracted href URL and records the HTTP status code and Content-Type response header.

  8. Determine pass/fail: The issue passes if both 32×32 and 16×16 size variants are declared (or an SVG favicon is present), and all declared favicon URLs return HTTP 2xx status codes. The issue fails if either required size variant is missing (and no SVG fallback exists), or if any favicon URL returns a non-2xx status code.

References