Favicon Checker

Why Favicons Matter for Brand Recognition

A favicon is the small icon that appears in browser tabs, bookmark lists, browser history, reading lists, and in some search engine results. When a user has 20+ tabs open, your favicon is the only visual identifier for your product's tab. A distinct, well-designed favicon lets users find you instantly. A missing or generic favicon — the default browser icon or a pixelated logo — signals an unfinished product.

For indie makers, a memorable favicon is a low-effort, high-impact branding detail. It appears every time a user bookmarks your site, looks at their browser history, or visits from a bookmark. This repeated, passive exposure reinforces brand recognition in a way that costs nothing to maintain after the initial implementation.

Where Your Favicon Appears

How to Add a Favicon in Next.js App Router

Place favicon files directly in the app/ directory with reserved filenames and Next.js serves them automatically at the correct routes:

app/
  favicon.ico          → served at /favicon.ico (legacy browsers)
  icon.svg             → served at /icon.svg (modern SVG favicon)
  icon.png             → served at /icon.png (PNG fallback)
  apple-icon.png       → served at /apple-icon.png (iOS home screen)

// Or generate dynamically with icon.tsx:
// app/icon.tsx
import { ImageResponse } from 'next/og'
export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    <div style={{ background: '#000', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 22, fontWeight: 700 }}>
      B
    </div>
  )
}

Favicon Design Principles for Small Sizes

• Use a square canvasNon-square favicons get cropped unpredictably. Always design for a square grid.
• Single symbol or initial, not a full logoYour full wordmark becomes unreadable at 16px. Use just the icon mark or a single bold letter.
• No textText at 16px is illegible regardless of font quality. Reserve text for larger icon contexts.
• High contrast fillsThin strokes and gradients disappear at small sizes. Use solid fills with high contrast.
• Test on both light and dark browser chromeMany browsers now have dark UI. Your icon needs sufficient contrast on both light grey and dark backgrounds.

Frequently Asked Questions