The Complete Favicon Guide for Web Developers (2026)
A favicon is one of those small details that separates a professional website from an amateur one. It's the tiny icon in browser tabs, bookmarks and mobile home screens — and getting it right matters more than most developers think.
What Sizes Do You Actually Need?
Modern browsers and devices expect multiple favicon sizes. Here's the complete list:
- 16×16 — Browser tab (classic favicon)
- 32×32 — Windows taskbar, newer browser tabs
- 48×48 — Windows desktop shortcut
- 64×64 — Windows site icons
- 96×96 — Google TV, ChromeOS
- 128×128 — Chrome web store
- 180×180 — Apple Touch icon (iOS home screen)
- 192×192 — Android Chrome (PWA icon)
- 256×256 — Windows 10 start tiles
- 512×512 — PWA splash screen, Google requirements
ICO vs PNG — Which Format?
ICO is the traditional format — it can contain multiple sizes in one file (16, 32, 48). Every browser supports it. Use it for maximum compatibility.
PNG is modern and cleaner. Use individual PNG files for specific sizes alongside an ICO fallback.
SVG is the newest approach — a single SVG file that scales to any size. Supported in modern browsers but not universally.
The HTML Code You Need
<!-- Classic favicon -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<!-- Modern PNG favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android / PWA -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">How to Generate All Sizes Instantly
- Go to the Favicon Generator
- Upload your logo image or create a text-based favicon with custom colors
- Preview all 10 sizes instantly
- Download individual PNGs or a combined ICO file
- Copy the HTML code and paste it into your <head>
SEO Impact of Favicons
Google shows favicons in mobile search results next to your URL. A missing or broken favicon makes your site look unprofessional and can reduce click-through rates. Having a proper favicon is a small but real ranking signal.
⚡ Generate Your Favicon in 10 Seconds
From image or text — get ICO, all PNG sizes, and ready-to-paste HTML code. Free, no login.
Create Favicon Free →