Favicon Generator
Create favicons from an image, text, or emoji in every required size.
What is a favicon and what sizes do you need?
A favicon (favourite icon) is the small icon that appears in browser tabs, bookmark lists, and when a user saves your site to their home screen on a mobile device. Providing the right favicon sizes ensures your brand looks sharp at every size and on every device.
The modern favicon requirements include: 16×16px — used in browser tabs and favourites lists; 32×32px — used on Windows (taskbar, shortcuts) and higher-DPI tabs; 48×48px — used on Windows desktop icons; 180×180px — the Apple Touch Icon, used when a user adds your site to their iOS home screen; 192×192px — used in Android manifest for Progressive Web Apps; 512×512px — used for higher-resolution splash screens in PWAs.
The traditional favicon.ico format can contain multiple sizes in one file. Modern browsers also accept favicon.svg, which scales perfectly to any size and supports dark mode variations using @media (prefers-color-scheme: dark) within the SVG. For new projects, an SVG favicon plus the 180×180 Apple Touch Icon covers the vast majority of use cases.
Common mistakes
- Low resolution source image — Start with a source image of at least 512×512px. Scaling down a high-resolution image produces much better results than scaling up a small one.
- Forgetting the Apple Touch Icon — If you only specify a 16×16 favicon and a user adds your site to their iOS home screen, iOS generates a blurry screenshot. Always include the 180×180 apple-touch-icon.
- Missing manifest link — For PWAs, the 192×192 and 512×512 icons must be referenced in the Web App Manifest (manifest.json), not just in HTML link tags.