Favicon Guide: Complete Setup for Every Browser & Device
Favicons are everywhere: browser tabs, bookmarks, home screen icons, social media previews, and PWA manifests. One icon isn't enough anymore. You need multiple sizes and formats for a complete setup.
Required Favicon Sizes
| Format | Size | Use Case |
|---|---|---|
| favicon.ico | 32x32 (includes 16x16) | Browser tabs, bookmarks (legacy support) |
| icon-192.png | 192x192 | Android Chrome, PWA manifest |
| icon-512.png | 512x512 | PWA manifest (maskable, splash), high-DPI screens |
| apple-touch-icon.png | 180x180 | iOS home screen |
| og:image (social preview, not a favicon) | 1200x630 | Facebook, LinkedIn, X cards |
HTML Implementation
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Pro tip: Use SVG for your source icon and generate all sizes from it. This keeps a single source of truth. Our favicon generator handles this automatically.
Related: The 28/36 mortgage rule on MortgageAfford — just as every browser needs the right icon, every budget needs the right numbers.
Bottom Line
Don't ship a website without proper favicon coverage. At minimum: favicon.ico (32x32), 192x192 PNG, 512x512 PNG, and apple-touch-icon. Use our generator to create them all from one design.