Guide · 2026-10-16

Favicon not showing? How to add one that works everywhere

A blank tab icon makes a site look unfinished. Here's a setup that covers modern browsers and phones.

Files

• favicon.ico (32×32) in your site root, for older browsers and some tools
• icon.svg, which stays sharp at any size
• apple-touch-icon.png (180×180), for iPhone home screens

Tags in <head>

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Still not showing?

• Browsers cache favicons hard. Try a private window.
• Make sure the files are in your build output (in Vite, put them in public/).
• Next.js App Router: put icon.png or favicon.ico in the app/ folder and it's wired up automatically.