Skip to Content
Link Rel TagsIssue 52

Favicon or Apple Touch Icon missing

What Is This Issue

What is this issue?

This issue checks whether a webpage declares both a standard favicon link tag and an Apple Touch Icon link tag in the HTML <head> section.

A passing implementation requires:

  • A <link rel="icon"> or <link rel="shortcut icon"> tag pointing to a valid favicon file
  • A <link rel="apple-touch-icon"> tag pointing to a valid Apple Touch Icon file
  • Both files must be accessible and return HTTP 200 status

Example: If your page has a favicon at /favicon.ico and an Apple Touch Icon at /apple-touch-icon.png, both should be declared in the head section so browsers and iOS devices can properly display them.

Why Is This Important

Why is this issue important?

Favicons and Apple Touch Icons are essential for brand recognition and user experience across different platforms and devices.

Impacts on SEO and user experience:

  • User experience: Browsers display favicons in tabs, bookmarks, history, and search results. Without them, users see generic icons that make your site less recognizable and harder to find among multiple tabs or bookmarks.

  • Mobile experience: Apple Touch Icons are used when iOS and Android users save a webpage to their home screen. Without this icon, the shortcut shows a generic screenshot instead of your branded icon, degrading the app-like experience.

  • Rankings: While not a direct ranking factor, Google Search may display a site icon next to search result titles when a valid favicon is present, potentially improving click-through rates.

  • Brand consistency: Consistent visual identity across browser tabs, bookmarks, and mobile home screens reinforces brand recognition and professionalism.

Resolving this issue improves the overall SEO health score by ensuring proper brand representation across all user touchpoints, which contributes to better user engagement signals.

How XeoPix Detects This

How XeoPix detects this

XeoPix uses a straightforward detection process to identify favicon and Apple Touch Icon 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 link tags: The crawler scans the <head> block for all <link> tags and searches for tags where the rel attribute is icon, shortcut icon, or apple-touch-icon.

  3. Extract href values: For each matched tag, XeoPix extracts the href attribute value.

  4. Validate favicon presence: The crawler checks whether any <link rel="icon"> or <link rel="shortcut icon"> tag exists and whether the href value is a valid non-empty URL.

  5. Validate Apple Touch Icon presence: The crawler checks whether any <link rel="apple-touch-icon"> tag exists and whether the href value is a valid non-empty URL.

  6. Test URL accessibility: XeoPix issues secondary HTTP GET requests to each extracted href URL and records the HTTP status code.

  7. Determine pass/fail: The issue passes if both a favicon link tag and an Apple Touch Icon link tag are present, and both URLs return HTTP 2xx status codes. The issue fails if either tag is missing or if either URL returns a non-2xx status code.

How To Fix

How to fix it

Add both link tags inside the page <head> section:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Step-by-step recommendations:

  1. Create the favicon file:

    • Use .ico, .png, or .svg format
    • Ensure it’s accessible at the path specified in the href attribute
    • Verify it returns HTTP 200 when accessed directly

  2. Create the Apple Touch Icon:

    • Use PNG format at minimum 180×180px for modern iOS devices
    • Ensure it’s accessible at the path specified in the href attribute
    • Verify it returns HTTP 200 when accessed directly

  3. Add the link tags:

    • Place both tags in the <head> section of all pages
    • Use root-relative or absolute URLs that work across all pages
    • Ensure the href values point to the correct file locations

  4. Verify implementation:

    • Check that both files are accessible via HTTP GET
    • Confirm both URLs return HTTP 200 status codes
    • Test on different browsers and devices to ensure proper display

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
faviconUrlsString[]Array of favicon URLs found on the page
appleTouchIconUrlsString[]Array of Apple touch icon URLs found on the page

Detection Dependencies

  • The following data sources are required to evaluate this issue:
  • HTML Document — The crawler extracts the <link rel="icon"> and <link rel="apple-touch-icon"> tags from the HTML head

Examples

Examples

Example 1: Correct favicon and Apple Touch Icon implementation

Scenario: A website properly declares both favicon and Apple Touch Icon.

Passes because:

  • Both <link rel="icon"> and <link rel="apple-touch-icon"> tags are present
  • Both files are accessible and return HTTP 200 status
  • Tags are properly placed in the HTML head section
<head>
  <title>My Website</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

Example 2: Missing both icons

Scenario: A website has no favicon or Apple Touch Icon declared.

Fails because:

  • No favicon link tag is present
  • No Apple Touch Icon link tag is present
  • iOS devices cannot display home screen icons
  • Browsers cannot display favicon in tabs
<head>
  <title>My Website</title>
</head>

Corrected version:

<head>
  <title>My Website</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

Example 3: Only favicon present

Scenario: A website has a favicon but missing Apple Touch Icon.

Fails because:

  • <link rel="icon"> tag is present
  • <link rel="apple-touch-icon"> tag is missing
  • iOS devices cannot display home screen icons
<head>
  <title>My Website</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>

Corrected version:

<head>
  <title>My Website</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

Unit Test

Test File

xeopix-crawling-v2/__tests__/seo-audit-checks/linkRelTags/issue-100-favicon-apple-touch.test.js

Purpose

This unit test validates that the SEO audit correctly detects when a page is missing a favicon and/or an Apple Touch Icon in the <head> section.

Tested Function

runLinkRelTags() from toggleGroups/linkRelTags

Issue Information

  • Issue Number: #100
  • Issue Code: FAVICON_APPLE_TOUCH
  • Toggle Group: linkRelTags

Test Scenarios

Positive Test Cases

  • Should not detect issue when both <link rel="icon"> and <link rel="apple-touch-icon"> are present
  • Should not detect issue when a <link rel="shortcut icon"> is used instead of rel="icon"
  • Should not detect issue when a <link rel="apple-touch-icon-precomposed"> is used instead of rel="apple-touch-icon"
  • Should not detect issue when multiple favicon links are present (e.g. different sizes)

Negative Test Cases

  • Should detect issue when both favicon and Apple Touch Icon are missing — message: “Favicon and Apple Touch Icon are missing”
  • Should detect issue when only favicon is missing — message: “Favicon is missing”
  • Should detect issue when only Apple Touch Icon is missing — message: “Apple Touch Icon is missing”

Boundary Cases

None.

Edge Cases

  • Empty head tag: Should detect the issue when <head></head> is empty
  • Missing head tag: Should handle gracefully without throwing — detects the issue
  • Multiple favicon links: Should not detect issue when multiple favicon links with different sizes exist alongside an Apple Touch Icon
  • Cache validation: Should return cached payload on subsequent calls, preventing duplicate issue entries

Expected Outcome

Pass

The issue should be reported (i.e., added to ctx.issues) when either the favicon or the Apple Touch Icon (or both) is missing from the <head> section.

Fail

The issue should not be reported when both a favicon (rel="icon" or rel="shortcut icon") and an Apple Touch Icon (rel="apple-touch-icon" or rel="apple-touch-icon-precomposed") are present.

Validation

  • Correct issue detection when favicon, Apple Touch Icon, or both are missing
  • No false positives when both icons are present
  • Recognises rel="shortcut icon" as a valid favicon
  • Recognises rel="apple-touch-icon-precomposed" as a valid Apple Touch Icon
  • Correct error message for each missing scenario
  • Graceful handling of missing <head> tag
  • Cache behaviour: returns cached payload on repeat calls, avoids duplicate issues
  • xeopix-crawling-v2/toggleGroups/linkRelTags.js
  • xeopix-crawling-v2/issueCodes.js

Coverage Summary

  • Validates positive (both present), negative (one or both missing), and edge cases (empty head, missing head, multiple links, alternative rel values)
  • Includes cache validation to ensure idempotent behaviour
  • Covers all meaningful combinations of favicon and Apple Touch Icon presence

References

Last updated on
Issue 51Issue 53