Skip to content
Browse all guides

Issue #100 · standard

Issue 100

What is this issue?

sidebar_label: "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 does it matter?

sidebar_label: "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 to fix it

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

Examples

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

How PixyScan detects this

sidebar_label: "How PixyScan detects this"

How PixyScan detects this

PixyScan uses a straightforward detection process to identify favicon and Apple Touch Icon 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 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, PixyScan 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: PixyScan 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.

References