Skip to Content
Link Rel TagsIssue 55

Favicon missing the 16x16 and 32x32 sizes

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 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 XeoPix Detects This

How XeoPix detects this

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

  1. Fetch the page: XeoPix 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, XeoPix 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: XeoPix 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: XeoPix 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.

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

What We Store

What We Store

Storage Level

Page Level — This issue is evaluated for each individual URL.

Database Table / Prisma Model

PageLinkRelTag

Stored Fields

FieldTypeDescription
favicon16String?URL of 16x16 favicon
favicon32String?URL of 32x32 favicon

Detection Dependencies

  • The following data sources are required to evaluate this issue:
  • HTML Document — The crawler extracts the <link rel="icon" sizes="32x32"> and <link rel="icon" sizes="16x16"> tags from the HTML head

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>

Unit Test

Test File

xeopix-crawling-v2/__tests__/seo-audit-checks/linkRelTags/issue-133-link-rel-icon.test.js

Purpose

This unit test validates that the SEO audit correctly detects when a favicon is present but lacks the proper sizes attribute values (16x16 and 32x32).

Tested Function

runLinkRelTags() from toggleGroups/linkRelTags

Issue Information

  • Issue Number: #133
  • Issue Code: LINK_REL_ICON
  • Toggle Group: linkRelTags

Test Scenarios

Positive Test Cases

  • Should not detect issue when favicon has both 16x16 and 32x32 sizes specified
  • Should not detect issue when no favicon is present at all (covered by issue #100)
  • Should not detect issue when a single <link rel="icon"> has a combined sizes="16x16 32x32" attribute
  • Should not detect issue when sizes values are case-insensitive (16X16, 32X32)

Negative Test Cases

  • Should detect issue when favicon is present but without any sizes attribute — message: “Favicon with proper sizes (16x16, 32x32) is missing”
  • Should detect issue when only 16x16 favicon is present (missing 32x32)
  • Should detect issue when only 32x32 favicon is present (missing 16x16)

Boundary Cases

None.

Edge Cases

  • Combined sizes attribute: A single <link> with sizes="16x16 32x32" should satisfy both size requirements
  • Case insensitive sizes: Size values like 16X16 and 32X32 should be recognised
  • Empty head: Should not detect issue when <head></head> is empty (no favicon at all)

Expected Outcome

Pass

The issue should be reported (i.e., added to ctx.issues) when a favicon <link rel="icon"> exists but neither 16x16 nor 32x32 (or both) are present in the sizes attributes.

Fail

The issue should not be reported when:

  • Both 16x16 and 32x32 favicon sizes are present (either as separate tags or combined)
  • No favicon exists at all (this is handled by issue #100)

Validation

  • Correct issue detection when proper size attributes are missing
  • No false positives when both 16x16 and 32x32 sizes are present
  • Handles combined sizes attribute ("16x16 32x32") in a single <link> tag
  • Case-insensitive matching of size values
  • Does not report when no favicon exists (avoids overlap with issue #100)
  • Payload validation: extracts favicon16 and favicon32 URLs correctly
  • xeopix-crawling-v2/toggleGroups/linkRelTags.js
  • xeopix-crawling-v2/issueCodes.js

Coverage Summary

  • Validates positive (both sizes present, combined sizes, case-insensitive), negative (missing sizes, partial sizes), and edge cases (empty head, combined attribute)
  • Correctly avoids overlap with issue #100 when no favicon exists at all
  • Validates payload structure with correct URL resolution for both size variants

References

Last updated on
Issue 54Issue 56