# Favicon is present and properly configured

- **Pattern:** `ab-002522` (`seo-fundamentals.social-sharing.favicon-present`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002522
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002522)

## Why it matters

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.

## Severity rationale

Low because the site still functions without a favicon — only brand recognition and tab/bookmark UX are degraded.

## Remediation

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.

## Detection

- **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.

---

Taxons: findability

HTML version: https://auditbuffet.com/patterns/ab-002522