Skip to main content

Favicon Size Variants (32x32 and 16x16)

Issue No: 133

Category: Link Rel Tags Issue type: Issue Priority: STANDARD

Description​

Pages should 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 including tabs, taskbars, and high-DPI screens.

How do we capture it​

Inside HTML <head>:

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

Can also be declared with SVG:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
  1. Issues an HTTP GET to the target URL.
  2. Reads raw response bytes without JavaScript execution.
  3. Scans the <head> block for all <link rel="icon"> tags.
  4. Extracts the sizes attribute from each matched tag.
  5. Checks whether the collected sizes include 32x32 and 16x16.
  6. Extracts the href from each size variant.
  7. Records all declared favicon sizes into an array.
  8. Checks whether any <link rel="icon" type="image/svg+xml"> tag is present. Set has_svg_favicon = TRUE if found. An SVG favicon scales natively to all sizes and acts as a universal fallback.
  9. Records the Content-Type response header returned when fetching the 32x32 and 16x16 favicon URLs into favicon_content_type_32x32 and favicon_content_type_16x16 respectively.

The crawler validates:

  • Whether any <link rel="icon" sizes="32x32"> tag exists.
  • Whether any <link rel="icon" sizes="16x16"> tag exists.
  • Whether the href attributes are non-empty valid URLs.
  • The full set of declared sizes for audit reporting.

What to store​

FieldTypeComment
has_favicon_32x32BOOLEANWhether a 32x32 favicon link tag is declared in the page head
has_favicon_16x16BOOLEANWhether a 16x16 favicon link tag is declared in the page head
favicon_32x32_hrefTEXTThe href value of the 32x32 favicon link tag
favicon_16x16_hrefTEXTThe href value of the 16x16 favicon link tag
favicon_sizesTEXT[]Array of all declared favicon size values found on the page
favicon_32x32_href_statusINTHTTP status code returned when fetching the 32x32 favicon URL
favicon_16x16_href_statusINTHTTP status code returned when fetching the 16x16 favicon URL
has_svg_faviconBOOLEANWhether a type="image/svg+xml" favicon link tag is declared in the page head
favicon_content_type_32x32TEXTContent-Type response header returned when fetching the 32x32 favicon URL
favicon_content_type_16x16TEXTContent-Type response header returned when fetching the 16x16 favicon URL

Condition for trigger​

The following trigger rules evaluate favicon size variant declaration and reachability.

  • Trigger Rule 1: Missing 32x32 Favicon Variant

    • Target Field: has_favicon_32x32
    • Evaluation Logic: = FALSE
    • Severity: STANDARD
    • Diagnostic Message: "No 32x32 favicon size variant was declared. Browsers and operating system taskbars may display a blurry or incorrectly scaled icon."

  • Trigger Rule 2: Missing 16x16 Favicon Variant

    • Target Field: has_favicon_16x16
    • Evaluation Logic: = FALSE
    • Severity: STANDARD
    • Diagnostic Message: "No 16x16 favicon size variant was declared. Browser tabs and bookmark bars may display a scaled or low-quality icon."

  • Trigger Rule 3: 32x32 Favicon URL Not Reachable

    • Target Field: favicon_32x32_href_status
    • Evaluation Logic: NOT IN (200, 201, 204)
    • Severity: STANDARD
    • Diagnostic Message: "The 32x32 favicon URL does not return a valid HTTP response. Browsers will fall back to a lower-resolution icon or show nothing."

  • Trigger Rule 4: 16x16 Favicon URL Not Reachable

    • Target Field: favicon_16x16_href_status
    • Evaluation Logic: NOT IN (200, 201, 204)
    • Severity: STANDARD
    • Diagnostic Message: "The 16x16 favicon URL does not return a valid HTTP response. Browser tab icons may be broken or missing."

  • Trigger Rule 5: Both 32x32 and 16x16 Favicon Variants Missing

    • Target Field: has_favicon_32x32
    • Evaluation Logic: = FALSE AND has_favicon_16x16 = FALSE AND has_svg_favicon = FALSE
    • Severity: WARNING
    • Diagnostic Message: "Neither a 32x32 nor a 16x16 favicon size variant is declared, and no SVG favicon is present. Browsers have no size-aware favicon to select and will fall back to the unsized default icon or /favicon.ico."

Sources​

Long description​

Browsers use different favicon sizes depending on the display context. A 16×16 icon is used in browser tabs and bookmark bar entries, while a 32×32 icon is used by operating systems in taskbars, window managers, and high-DPI displays. Without explicit size declarations, the browser must scale a single icon — often producing blurry or pixelated results.

Correct multi-size favicon declaration:

<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="icon" type="image/x-icon" href="/favicon.ico">

Browser selection logic:

  • Browsers select the sizes value closest to the required display size.
  • If no sizes attribute is present, the browser picks any available icon or defaults to /favicon.ico.
  • High-DPI screens (Retina) prefer larger sizes and scale down.

Without size variants:

  • The 16x16 context (browser tab) shows a blurry scaled-down version of a larger icon.
  • The 32x32 context (OS taskbar) shows a scaled-up 16x16 icon that appears pixelated.
  • Windows pinned sites and macOS menu extras show the wrong size icon.

Common failure scenarios:

  • Only a single favicon without sizes declared: No sizes attribute is present on the favicon tag, causing the browser to pick arbitrarily without size-aware selection.
  • Declared size does not match actual file dimensions: The sizes attribute says 32x32 but the actual image file has different dimensions. Browsers trust the sizes attribute, so rendering may be incorrect.
  • Favicon files missing after deployment: Build tools often rename or move favicon files. The HTML declares a path that no longer exists post-deployment, resulting in a non-2xx HTTP response.
  • Only ICO format without PNG variants: .ico files can contain multiple resolutions embedded, but relying solely on .ico without explicit PNG size declarations may not satisfy all browser requirements for size-aware selection.

How to Fix​

Declare explicit size variants in the page <head>:

<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">

Ensure:

  • Each declared href returns HTTP 200.
  • The actual image dimensions match the declared sizes value.
  • PNG format is used for size-specific variants (better browser support than ICO for explicit sizes).
  • Files are regenerated after every build or deployment that changes static asset paths.