What Is a Favicon and How Do You Create One?
Last updated 2026-09-12
A favicon is the small icon shown in a browser tab, bookmark list, and (on mobile) home screen shortcut for a website.
Start with a square, simple image
Favicons are shown very small, so simple logos or initials work better than detailed images — fine details disappear at 16-32 pixels.
Generate the standard sizes
At minimum, 16×16 and 32×32 for browser tabs; 180×180 for Apple touch icons; larger sizes (192×192, 512×512) for Android home screens and PWA manifests.
Add it to your site
Upload the files and reference them with <link rel="icon"> tags (and an apple-touch-icon link for iOS) in your page's <head>.
Important Considerations
- Browsers cache favicons aggressively — you may need to hard-refresh or clear cache to see an updated one.
- A transparent background usually looks better than a colored square background, since it adapts to both light and dark browser themes.
- The classic .ico format can hold multiple sizes in one file, but modern browsers work fine with plain PNG files referenced individually.
Frequently Asked Questions
- Do I really need multiple sizes?
- For a polished result, yes — a single small icon gets blurry when scaled up for an Apple touch icon or Android home screen shortcut.
- Can I use a photo as a favicon?
- Technically yes, but at 16-32 pixels most photos become an unrecognizable blur — simple logos, icons, or bold initials work far better.