Skip to main content

Favicon and Apple Touch Icon Set

Issue No: 100

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

Description​

The page should declare both a standard favicon link tag and an Apple Touch Icon link tag in the <head> so that browsers and iOS/Android devices can display the correct brand icon in tabs, bookmarks, and home screen shortcuts.

How do we capture it​

Inside HTML <head>:

<!-- Standard favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
  1. Issues an HTTP GET to the target URL.
  2. Reads the raw response bytes without JavaScript execution.
  3. Scans the <head> block for all <link> tags.
  4. Searches for tags where rel is icon, shortcut icon, or apple-touch-icon.
  5. Extracts the href attribute from each matched tag.
  6. Issues secondary HTTP GET requests to each extracted href URL.
  7. Records the HTTP status code of each favicon and Apple Touch Icon URL.

The crawler validates:

  • Whether any <link rel="icon"> or <link rel="shortcut icon"> tag exists.
  • Whether any <link rel="apple-touch-icon"> tag exists.
  • Whether the href values are valid non-empty URLs.
  • Whether the fetched favicon and Apple Touch Icon URLs return HTTP 2xx.

What to store​

FieldTypeComment
has_faviconBOOLEANWhether a favicon link tag is declared in the page head
favicon_hrefTEXTThe href value of the detected favicon link tag
favicon_rel_typeTEXTThe rel attribute value used: icon or shortcut icon
favicon_href_statusINTHTTP status code returned when fetching the favicon URL
has_apple_touch_iconBOOLEANWhether an Apple Touch Icon link tag is declared in the page head
apple_touch_icon_hrefTEXTThe href value of the Apple Touch Icon link tag
apple_touch_icon_href_statusINTHTTP status code returned when fetching the Apple Touch Icon URL

Condition for trigger​

The following trigger rules evaluate favicon and Apple Touch Icon presence and reachability.

  • Trigger Rule 1: Missing Favicon

    • Target Field: has_favicon
    • Evaluation Logic: = FALSE
    • Severity: STANDARD
    • Diagnostic Message: "No favicon link tag was detected in the page head. Browsers cannot display a branded tab or bookmark icon."

  • Trigger Rule 2: Missing Apple Touch Icon

    • Target Field: has_apple_touch_icon
    • Evaluation Logic: = FALSE
    • Severity: STANDARD
    • Diagnostic Message: "No Apple Touch Icon link tag was detected. iOS and Android devices cannot display a branded home screen icon for this page."

  • Trigger Rule 3: Favicon URL Not Reachable

    • Target Field: favicon_href_status
    • Evaluation Logic: NOT IN (200, 201, 204)
    • Severity: STANDARD
    • Diagnostic Message: "The favicon URL does not return a valid HTTP response. Browsers will fall back to a default icon."

  • Trigger Rule 4: Apple Touch Icon URL Not Reachable

    • Target Field: apple_touch_icon_href_status
    • Evaluation Logic: NOT IN (200, 201, 204)
    • Severity: STANDARD
    • Diagnostic Message: "The Apple Touch Icon URL does not return a valid HTTP response. iOS and Android home screen shortcuts will show a broken or default icon."

Sources​

Long description​

Favicons are small brand icons displayed by browsers in tabs, bookmarks bars, browser history, and search results. Apple Touch Icons are the larger PNG images used when a user saves a page to their iOS or Android home screen.

Standard favicon declaration:

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

Apple Touch Icon declaration:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Without a favicon:

  • The browser tab shows a generic icon instead of your brand.
  • Bookmarks are unrecognizable in lists.
  • Google Search may not show a site icon next to search result titles.

Without an Apple Touch Icon:

  • Home screen shortcuts on iOS/Android display a generic screenshot thumbnail.
  • The app-like experience for PWA or saved pages is degraded.
  • Brand recognition on mobile devices is lost.

Common failure scenarios:

  • Favicon tag missing entirely: No <link rel="icon"> or <link rel="shortcut icon"> present in <head>. The browser requests /favicon.ico by default, but this may not exist.
  • Favicon URL returns 404: The favicon tag is present but the linked file is missing or unreachable, causing the HTTP fetch to return a non-2xx status code.
  • Apple Touch Icon not declared: Many sites forget the Apple Touch Icon entirely, affecting all iOS Safari bookmark and home screen appearances.
  • Wrong file path after deployment: A build process or CDN change moves the favicon to a different URL without updating the HTML.

How to Fix​

Add both link tags inside the page <head>:

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

Ensure:

  • Both files are accessible and return HTTP 200.
  • The favicon is in .ico, .png, or .svg format.
  • The Apple Touch Icon is at least 180×180px PNG for modern iOS devices.
  • The href uses a root-relative or absolute URL that works across all pages.