Rule: favicon
A favicon is the small icon in your browser tab, bookmarks bar, and mobile home screen. Without one, browsers show a generic globe icon that signals an unfinished or low-quality site. At weight 2/100, this is a low-priority rule, but it's an easy fix with outsized impact on perceived quality.
What it checks
Indxel checks for favicon references in the HTML. It looks for: (1) <link rel="icon" href="..."> tags, (2) <link rel="shortcut icon" href="..."> tags, and (3) <link rel="apple-touch-icon" href="..."> tags. The rule passes if at least one favicon reference is found. It does not verify that the referenced file actually exists or is a valid image.
Thresholds
At least one favicon reference found (icon, shortcut icon, or apple-touch-icon)
No favicon references found in the HTML
Edge cases
Next.js App Router auto-detects favicon.ico, icon.png, and apple-icon.png placed in the app/ directory. No explicit link tag is needed — Next.js generates it.
The /favicon.ico convention: browsers automatically request /favicon.ico even without a link tag. But relying on this convention without a link tag means Indxel doesn't detect it (it only reads HTML, not makes additional requests).
Multiple favicon sizes (16x16, 32x32, 192x192) can be specified with multiple link tags. Indxel counts any one of them as passing.
SVG favicons (<link rel="icon" type="image/svg+xml">) are supported by modern browsers and detected by Indxel.
Configuration
// indxel.config.ts
import { defineSEO } from "indxel";
export default defineSEO({
rules: {
favicon: true, // enabled by default
},
});
// In Next.js, place these files in app/:
// app/favicon.ico — 32x32 ICO (auto-detected)
// app/icon.png — 192x192 PNG (optional)
// app/apple-icon.png — 180x180 PNG (optional)
// Or set explicitly in layout metadata:
export const metadata = {
icons: {
icon: "/favicon.ico",
apple: "/apple-touch-icon.png",
},
};Frequently asked questions
What's the minimum favicon I need?
A single 32x32 favicon.ico file in your app/ directory (Next.js) or referenced via <link rel="icon"> in your HTML head. For better cross-platform support, also add a 180x180 apple-touch-icon and a 192x192 icon for Android.
Does the favicon affect SEO?
Not directly in terms of rankings. But Google shows favicons in mobile search results next to your page title. A missing favicon means a blank space, which can reduce perceived credibility and click-through rates.