Skip to main content

Favicon is present

ab-002181 · pre-launch.user-facing.favicon
Severity: mediumactive

Why it matters

A missing favicon shows the browser's default blank-page icon in tabs, bookmarks, browser history, and pinned tabs — the site reads as unfinished next to every other tab the user has open. Chrome and Safari also render the blank icon in mobile tab switchers and Add-to-Home-Screen prompts. On shared devices and in screenshots, the missing brand mark makes your site indistinguishable from a localhost dev server.

Severity rationale

Medium because the polish gap is universally visible to every visitor and undermines brand recall on every tab.

Remediation

In Next.js App Router, drop favicon.ico directly into app/ — it is picked up automatically with no <link> tag required. For additional sizes, add icon.png at 32x32 alongside it. For the Pages Router, place favicon.ico in public/ and wire it through <Head>. Generate a complete set of sizes via realfavicongenerator.net or favicon.io.

// app/layout.tsx
export const metadata = { icons: { icon: [{ url: '/favicon.ico' }, { url: '/icon.png', type: 'image/png', sizes: '32x32' }] } }

Detection

  • ID: pre-launch.user-facing.favicon

  • Severity: medium

  • What to look for: Count all favicon files and references. Enumerate which formats are present (ICO, PNG, SVG) and which sizes. Check public/ directory for favicon.ico, favicon.png, or favicon.svg. Check app/ directory for Next.js App Router favicon convention (favicon.ico at app/favicon.ico). Check <link rel="icon"> tags in the HTML document <head> or layout components. Check <link> tags in layout.tsx or _document.tsx.

  • Pass criteria: A favicon file exists in an expected location, or a <link rel="icon"> tag references a valid icon file. At least 1 favicon file must exist in public/ or app/ with at least 2 sizes (16x16 and 32x32).

  • Fail criteria: No favicon found — the site will show a browser default blank icon in tabs and bookmarks.

  • Skip (N/A) when: Never — even minimal web projects benefit from a favicon.

  • Cross-reference: For apple touch icon, see apple-touch-icon. For social sharing images, see social-sharing.

  • Detail on fail: "No favicon.ico, favicon.png, or <link rel='icon'> found — site will display a blank browser tab icon"

  • Remediation: A missing favicon makes your site look unfinished. The tab icon also appears in bookmarks, browser history, and mobile home screen shortcuts:

    // app/layout.tsx — favicon metadata
export const metadata = { icons: { icon: [{ url: '/favicon.ico' }, { url: '/icon.png', type: 'image/png', sizes: '32x32' }] } }
    1. Create a 32x32 (minimum) icon as favicon.ico or favicon.png.
    2. In Next.js App Router, place favicon.ico directly in the app/ directory — it's picked up automatically.
    3. For pages/ router, add to public/favicon.ico and ensure the HTML <head> includes <link rel="icon" href="/favicon.ico">.
    4. For multi-size support, use a favicon generator (favicon.io or realfavicongenerator.net) to generate all required sizes.

Taxons

user-experience

History