What Is a Favicon?
A favicon (favorite icon) is the small icon that appears in browser tabs, bookmarks, history entries, and desktop shortcuts. It is one of the first visual elements visitors notice about your website. A missing favicon signals an unprofessional or unfinished site.
Favicons have evolved from simple 16x16 pixel icons to a complex set of sizes needed for different devices and contexts. Modern websites need multiple favicon formats to cover all use cases.
The ICO Format for Favicons
ICO is the original favicon format and remains the most universally supported. A single favicon.ico file contains multiple images at different sizes (16x16, 32x32, 48x48, etc.), allowing browsers and operating systems to automatically select the most appropriate size.
When a browser requests /favicon.ico, it receives one file containing all needed sizes. No additional HTML markup is required — browsers check for favicon.ico at the root directory automatically.
Modern Favicon Requirements (2026)
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 16x16 + 32x32 | Legacy browsers, Windows shortcuts |
| apple-touch-icon.png | 180x180 | iOS home screen bookmark |
| icon-192.png | 192x192 | Android Chrome, PWA manifest |
| icon-512.png | 512x512 | PWA splash screen, install dialog |
| favicon.svg | Scalable | Modern browsers, infinite scaling, dark mode |
How to Create a Favicon from PNG
- Start with a square image — at least 512x512 pixels. Use your logo or a simplified version of it.
- Use PNG with transparency — transparent background ensures your favicon looks clean on any browser theme (light or dark).
- Upload to the PNG to ICO converter — it builds one favicon.ico with six sizes: 256, 128, 64, 48, 32 and 16 pixels.
- Test at small sizes — view your favicon at 16x16. Complex designs may need simplification for tiny display sizes.
Transparency in Favicons
PNG source = transparent favicon. If your source image has a transparent background, the ICO will preserve it. This is important for favicons that need to look good on both light and dark browser themes.
JPG source = solid background. JPG does not support transparency, so a JPG-sourced favicon will always have a solid background color. Use PNG whenever possible. If your logo only exists as a JPG, learn how to make a JPG background transparent before building the favicon.
Best Practices
- Keep it simple: Favicons display at 16x16 pixels. Complex logos become illegible. Use a simplified mark or single letter.
- Test at actual size: View your favicon in a browser tab before deploying. What looks great at 512x512 may be unrecognizable at 16x16.
- Ensure contrast: Test on both light and dark browser themes. Your favicon should be visible against any background.
- Use vector source: If you have an SVG version of your logo, it will produce sharper results at all sizes.
HTML Implementation
Add these lines to your HTML <head> for complete favicon support:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Quick start: At minimum, place a favicon.ico (with 16x16 and 32x32 sizes) in your website root directory. Browsers find it automatically without any HTML markup.
ICO vs PNG vs SVG: Which Favicon Format to Use
| Format | Works in | Use it for |
|---|---|---|
| favicon.ico | Every browser, including old ones; found at /favicon.ico without any HTML | The fallback every site should have |
| PNG | All modern browsers via <link rel="icon" type="image/png"> |
apple-touch-icon (180×180) and web app manifest icons (192 and 512) |
| SVG | Chrome, Edge and Firefox; older Safari versions ignore it | A sharp icon at any size, with dark-mode colors via CSS |
A common minimal set is favicon.ico, icon.svg, apple-touch-icon.png and the two manifest PNGs. Skip SVG when your logo has fine detail that falls apart at 16 px; draw a simplified icon instead.