Favicon Size Guide
Favicon Size Reference Table
Below are all favicon sizes needed for various platforms and browsers. Make sure to provide at least the sizes marked as "Required".
| Size | Usage | Format | Required? |
|---|---|---|---|
| 16x16 | Browser tab icon | ICO / PNG | Required |
| 32x32 | Browser tab (high DPI) | ICO / PNG | Required |
| 48x48 | Windows taskbar | ICO | Recommended |
| 64x64 | Windows shortcut | ICO | Optional |
| 96x96 | Google TV | PNG | Optional |
| 128x128 | Chrome Web Store | PNG | Optional |
| 180x180 | Apple Touch Icon (iOS) | PNG | Required (iOS) |
| 192x192 | Android Chrome | PNG | Required (PWA) |
| 270x270 | Windows 8/10 tile | PNG | Optional |
| 512x512 | PWA splash screen | PNG | Required (PWA) |
Interactive Size Preview
The colored squares below are rendered at actual pixel sizes so you can visually compare each dimension.
* 512x512 is too large to preview inline.
HTML Code Snippets
Add the following code to your <head> to cover favicon requirements across all major platforms.
Format Comparison: ICO vs PNG vs SVG
ICO
Pros: Can embed multiple sizes (16, 32, 48) in one file; universal browser support; native Windows format.
Cons: Larger file size; limited transparency in legacy versions; hard to edit.
Support: 100% of all browsers.
PNG
Pros: Full alpha transparency; sharp rendering; smaller file size; easy to create with any image tool.
Cons: Separate file per size; IE10 and earlier do not support PNG favicons.
Support: All modern browsers.
SVG
Pros: Vector-based, scales to any size; single file for all dimensions; supports dark mode via CSS prefers-color-scheme.
Cons: Safari does not support SVG favicons; complex graphics may render inconsistently.
Support: Chrome 80+, Firefox 41+, Edge 80+. No Safari.
Favicon Best Practices
Place favicon.ico in your site root. Browsers automatically request /favicon.ico even without a <link> tag.
Favicons display at tiny sizes. Complex details get lost. Use a simple, high-contrast shape or letter mark.
Browser tab backgrounds vary. Ensure your favicon is visible on both dark and light backgrounds.
iOS uses the 180x180 apple-touch-icon when users add your site to their home screen. Without it, iOS takes a screenshot of the page.
If your site is a PWA, you must declare 192x192 and 512x512 icons in site.webmanifest for Android install prompts and splash screens.
Browsers aggressively cache favicons. After updating your icon, rename the file or add a version query parameter (e.g. ?v=2) to force a refresh.
SVG favicons support dark mode adaptation and work at any resolution from a single file. Still provide ICO/PNG as a Safari fallback.
SVG Favicon Dark Mode Example
SVG favicons can adapt to system dark/light mode using the CSS prefers-color-scheme media query:
Favicon Checklist
| Item | Details |
|---|---|
| favicon.ico in root | 16x16 + 32x32 + 48x48 embedded in a single ICO file |
| PNG 16x16 & 32x32 | Declared with <link rel="icon"> |
| Apple Touch Icon 180x180 | Declared with <link rel="apple-touch-icon"> |
| Android icon 192x192 | Listed in site.webmanifest |
| PWA splash 512x512 | Listed in site.webmanifest |
| Windows tile 270x270 | Declared with <meta name="msapplication-TileImage"> |
| theme-color set | Affects mobile browser address bar color |