Favicon is present and properly configured

The favicon appears in browser tabs, bookmark bars, history menus, the Android home screen when a user adds the site, iOS home screen when the user adds to home screen, and — increasingly — in Google search results next to the domain name. A missing favicon displays a generic globe icon or a blank square, which signals "unfinished" to every visitor and reduces the likelihood that a user recognizes your tab among ten others. It is a five-minute fix that contributes to every single session's brand recall.

In Next.js App Router, drop named files directly into the app/ directory — the framework auto-generates the correct <link> tags. For broader device coverage, supply multiple sizes including an Apple touch icon.

app/
  favicon.ico          (32x32, for legacy browsers)
  icon.png             (32x32 PNG, modern browsers)
  apple-icon.png       (180x180, iOS home screen)

For other frameworks, place the files in public/ and add <link rel="icon" href="/favicon.ico"> plus <link rel="apple-touch-icon" href="/apple-touch-icon.png"> to your root template.

• ID: favicon-present

• Severity: low

• What to look for: Check for favicon files in the public/ directory or app/ directory (Next.js App Router supports favicon.ico in app/). Look for <link rel="icon"> tags in the document head. Check for multiple icon sizes (icon.png, apple-touch-icon.png).

• Pass criteria: Count all favicon/icon files and <link rel="icon"> declarations. At minimum 1 favicon file (favicon.ico, icon.png, icon.svg, or apple-touch-icon.png) must exist in a served location, or at least 1 <link rel="icon"> tag must be present in the document head. Enumerate all icon files found.

• Fail criteria: No favicon file found (0 icon files in public/ or app/) and no <link rel="icon"> tag in the head (0 icon link tags).

• Skip (N/A) when: Never — every web project should have a favicon.

• Detail on fail: "No favicon.ico found in public/ or app/ directory, and no <link rel='icon'> tag in document head"

• Remediation: The favicon appears in browser tabs, bookmarks, and search results. Place a favicon.ico file in your public/ directory (or app/ for Next.js App Router). For better device support, also add:

  public/
    favicon.ico          (32x32)
    icon.png             (32x32 PNG)
    apple-touch-icon.png (180x180 for iOS)
  

  Next.js App Router automatically serves files named favicon.ico, icon.png, or apple-icon.png from the app/ directory.