Favicon Best Practices: The Definitive Checklist (2025)

Atualizado em

A professional favicon setup is more than dropping a single favicon.ico. For brand consistency and full coverage across browsers and platforms, ship ICO + PNG + SVG and use the correct <head> snippet. This practical checklist shows exactly what to publish, the right tags, and how to validate it.

1. The Essential: favicon.ico

Despite being legacy, favicon.ico is the only file that guarantees universal compatibility — it works on legacy UAs and crawlers that don’t fully render HTML.

  • Action: Generate a <em>multi‑size</em> .ico (e.g., 16, 32, 48, 64, 128, 256). 16/32/48 cover most contexts; 64/128/256 help on larger surfaces.
  • Tip: Keep strong contrast and simplify shapes for crisp 16 px. If your mark has thin strokes, try the <em>Sharp</em> profile in IcoSmith.
  • Implementation: Publish at /favicon.ico and reference in <head>:
<link rel="icon" href="/favicon.ico" sizes="any">

2. Apple devices: apple-touch-icon.png

When a user saves your site to the Home Screen, iOS expects a dedicated Apple Touch Icon. Without it, iOS falls back to a screenshot, which looks amateurish.
  • Action: Export a 180×180 PNG (no rounded corners — iOS rounds it).
  • Best practices: Give it breathing room and strong contrast; avoid tiny text.
  • Implementation:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

3. Safari pinned tab: monochrome SVG

Safari (macOS) uses a monochrome SVG for pinned tabs and applies the color you provide.
  • Action: Prepare a black‑only SVG (no complex fills).
  • Color choice: Use a color that contrasts in dark/light themes and matches your brand.
  • Implementation:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#FFB020">
<meta name="theme-color" content="#0B0E14">

4. Android/PWA: site.webmanifest

Modern browsers and Android rely on the Web App Manifest for Home Screen install. It defines name, colors and icons.
  • Action: Reference at least 192×192 and 512×512 PNG (ideally with <em>purpose</em>: <em>any maskable</em>).
  • Tips: Set theme_color/background_color to match your theme.
  • Implementation:
<link rel="manifest" href="/site.webmanifest">

5. Test and validate

After adding the tags, confirm everything resolves (no 404) and you’re not fighting stale cache.
  • Cache: Hard‑reload (Ctrl/Cmd+Shift+R) or test in Incognito.
  • DevTools: Application → Icons/Manifest to verify detections and MIME.
  • Checklist: Run Lighthouse (PWA), validate manifest, and iOS/Android Home Screen.

6. Cache & file versioning (optional)

Browsers/CDNs cache favicons aggressively. Consider <em>versioning</em> files (e.g., /favicon-v2.ico) and purging your CDN (Pages/CDN). Update the <head> links to point to new names to force revalidation.

Ship ICO + PNG + SVG, declare the correct snippet, and validate cache/paths — that covers virtually every scenario. For the full HTML snippet, see How to add a favicon to HTML, and for format decisions, see ICO vs PNG vs SVG.

Open Converter