HTML Favicon
html favicon favicon markup brands tabs, serps, and home screens with small head declarations favicon markup in <head> declares tab
Introduction
Favicon markup in <head> declares tab icons, home-screen tiles, and PWA manifest icons. Browsers request /favicon.ico by convention even without markup — staff engineers declare explicit icons to avoid 404 storms and wrong aspect ratios. Google Search shows favicons in results; Stripe and Shopify ship multiple sizes and SVG where supported.
Business problem
Missing or wrong favicons erode brand trust in tabs and SERPs, cause redundant 404 requests on every page load, and break "Add to Home Screen" on iOS when apple-touch-icon is absent.
- Brand: Generic globe icon in 40 browser tabs — users can't find merchant dashboard.
- Ops: CDN logs millions of /favicon.ico 404s — noise masks real incidents.
- PWA: Manifest icon without 192/512 — Lighthouse PWA audit fails.
Why this feature exists
Bookmarks and tabs needed visual site identity before tabbed browsing was universal. link rel=icon standardized multiple formats; apple-touch-icon and manifest icons extended for mobile home screens and install prompts.
- History: favicon.ico root convention from IE; HTML link allowed per-page icons.
- SVG favicons: Chrome/Firefox support — single scalable asset with theme media queries.
- mask-icon: Safari pinned tab — monochrome SVG.
Browser internals
Favicon loader runs parallel to main document parse — requests declared icons and may probe /favicon.ico. rel=icon type=image/svg+xml preferred when supported; sizes attribute helps picker for multiple PNGs. Manifest icons loaded when install prompt or PWA criteria evaluated.
- Cache: Favicons aggressively cached — cache-bust on rebrand with filename version.
- Dark mode: SVG favicon prefers-color-scheme media in file — single link tag.
- CORS: Cross-origin favicon allowed — no credentialed fetch.
<link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">Fallback probe: GET /favicon.ico if no match
Rendering workflow
Favicons don't affect page layout or LCP — separate low-priority fetches. However 404 retry loops on misconfigured servers add connection contention on HTTP/1.1. Large unoptimized 512px PNG as only icon wastes bytes on every first visit.
- Priority: Below document images — don't preload favicon over LCP.
- CLS: No impact on content — SERP favicon cached separately by Google.
- TTFB: Icon on same CDN as HTML — HTTP/2 multiplex minimizes cost.
Feature deep dive
Declare in head: SVG or PNG 32/16, apple-touch-icon 180x180, manifest link for PWA. Place favicon.ico at root for legacy probes. Use theme-color meta complementary to brand chrome.
- sizes: Honest dimensions — "any" for SVG.
- type: Correct MIME — image/png, image/svg+xml.
- shortcut icon: Legacy rel value — still recognized, prefer icon.
<head><link rel="icon" href="/icons/favicon.svg" type="image/svg+xml"><link rel="icon" href="/icons/favicon-32x32.png" sizes="32x32" type="image/png"><link rel="apple-touch-icon" href="/icons/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><meta name="theme-color" content="#635bff"></head>
Accessibility analysis
Favicons are decorative for in-page content — no alt text on link rel=icon. Pinned tab mask needs sufficient contrast in Safari UI — design monochrome silhouette. Screen readers ignore favicon links in normal browsing.
- High contrast UI: favicon must read at 16px — fine detail lost.
- Motion: Animated favicon rare — can distract ADHD users in pinned tabs.
- Manifest name: short_name readable — used under icon on home screen.
SEO impact
Google Search displays favicon in results — guidelines require square, stable URL, not blocked by robots. Misleading favicon mimicking checkmark "verified" risks manual spam action.
- crawl: Googlebot fetches favicon — must return 200, reasonable size.
- robots.txt: Don't block /favicon.ico if SERP branding matters.
- Consistency: Same icon domain-wide — subdomain mismatch confuses users.
Security considerations
Favicon URLs must not be user-controlled — path traversal to malicious icon silly but cache poisoning concerns exist. Manifest JSON must be static trusted — injected icons could phish install prompts on compromised CDN.
- MIME sniff: Serve correct Content-Type — avoid polyglot files.
- Integrity: SRI uncommon on icons — host on trusted origin.
- SVG: Sanitize SVG favicon — script in SVG removed.
Performance impact
One SVG favicon replaces many PNG requests on modern browsers. Shopify serves icon set via theme assets pipeline — hashed filenames long cache. Eliminate 404 /favicon.ico — serve minimal ico or redirect 301 to PNG.
- HTTP/2: Multiplex icon fetches with CSS — low impact if cached.
- CDN: immutable cache on versioned /icons/favicon.v2.png.
- Logs: Monitor 404 favicon rate post-deploy.
Real production example
Stripe.com head includes SVG + PNG fallbacks, apple-touch-icon, webmanifest with maskable icons for Android adaptive icons. theme-color matches primary brand for mobile browser chrome.
- Rebrand: Version query or filename bump — purge CDN.
- Lighthouse: PWA icon sizes 192 and 512 in manifest.
- Staging: Different favicon color dot — prevents ops mistakes.
{"icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }]}
Enterprise usage
Enterprise SaaS white-label tenants get per-tenant favicon link injected server-side in HTML layout — cache keyed by tenant id. Google Workspace addons ship icons via manifest for catalog display.
- CMS: Upload triggers auto-resize to required sizes — HTML snippet generated.
- Compliance: Trademark review on customer-uploaded favicons.
- Monitoring: Synthetic check favicon 200 weekly per region.
Common production failures
Ecommerce rebrand updated CSS but not favicon — old icon in Google SERPs for 3 weeks post-launch, brand research showed recognition drop. App manifest pointed to HTTP icon on HTTPS site — mixed content blocked install.
- 404 storm: SPA without root ico — 40k 404/min in logs.
- Wrong aspect: Rectangular logo squashed — illegible tab icon.
- Cache: Users saw old favicon months — aggressive CDN TTL without versioning.
Architecture review questions
- Are favicon and touch icons declared with correct rel, type, and sizes?
- Does /favicon.ico exist or redirect to avoid 404 probes?
- Do manifest icons include 192 and 512 maskable entries for PWA?
- Is favicon URL stable and crawlable for Google SERP display?
- Are SVG favicons sanitized and tested in dark/light browser chrome?
- Is theme-color aligned with brand and accessible contrast in UI chrome?
Hands-on project
Generate a complete icon set (SVG, PNG 32/180, manifest 192/512) and wire HTML head links; verify zero favicon 404s in local server logs and Google favicon guidelines checklist.
- Deliverable: site.webmanifest + head snippet in layout template.
- Verify: Real device Add to Home Screen shows correct tile.
- Stretch: SVG with prefers-color-scheme alternate colors.
Interview questions
Why do browsers still request /favicon.ico without link tags?(Advanced)
Legacy convention hardcoded in browsers for quick tab icon before HTML head fully parsed. If absent, 404 per navigation adds noise. Serve minimal ico at root or link early in head. Explicit declaration controls branding and caching.
Follow-up: Per-route favicons possible?
SVG vs PNG for favicons in production?(Advanced)
SVG scales cleanly, supports dark mode via CSS inside file, one file maintenance. PNG fallback for older contexts and apple-touch-icon. Provide both with type and sizes. Validate SVG has no script/foreignObject.
Follow-up: Google SERP favicon format?
How does favicon relate to PWA installability?(Advanced)
Web app manifest icons 192 and 512 required for install prompts and Lighthouse PWA category. maskable purpose for Android safe zone. HTML link rel=manifest connects document to manifest; icons in manifest not favicon link alone.
Follow-up: theme-color vs manifest theme_color?
Try it yourself
Edit the HTML, CSS, or JS panels — the preview updates as you type.
Try it yourself
Summary
Favicon markup brands tabs, SERPs, and home screens with small head declarations and big trust impact. Production sites like Stripe ship SVG/PNG sets, manifest icons, and root ico fallback to eliminate 404 noise and satisfy Google favicon display rules.