Favicon Guide: Every Size, Format, and Platform Explained
Learn which favicon sizes you actually need, how to generate them, and how to implement them correctly.
Favicons are the small icons that appear in browser tabs, bookmarks, home screens, and app switchers. Despite their tiny size, they're one of the most important branding elements on the web. A missing or broken favicon makes any website look unprofessional.
The favicon landscape has grown complex. In 2010, you only needed a single 16x16 ICO file. Today, you need at least 6-8 different sizes to cover all browsers, devices, and platforms. Here's the complete breakdown.
16×16 is the classic browser tab favicon — the one users see most often. 32×32 is used for bookmark icons and high-DPI browser tabs. 48×48 is used by Windows for desktop shortcuts. 64×64 and 128×128 provide additional resolution for various contexts. 180×180 is the Apple Touch Icon — Apple's required size for iOS home screen bookmarks. Without this, Safari uses a screenshot of your page instead, which looks terrible. 192×192 and 512×512 are required for Progressive Web Apps (PWAs) and Android home screen icons.
The file format matters too. While ICO was the original standard, modern browsers universally support PNG favicons. PNG offers better compression and transparency support. For the web manifest (required for PWAs), only PNG is supported.
Implementation requires adding several link tags to your HTML head section. The basic favicon uses a link tag with rel="icon" and type="image/png". The Apple Touch Icon uses rel="apple-touch-icon". PWA icons are declared in your site.webmanifest file, which is referenced via a link tag with rel="manifest".
Our Favicon Generator handles all of this automatically. Upload a single image (ideally 512×512 or larger), customize the shape and background, and download a ZIP containing all 8 sizes, a site.webmanifest file, and a ready-to-paste HTML snippet. Just drop the files in your project root, paste the HTML into your head tag, and you're done.
Design tips: keep your favicon simple. It's displayed at tiny sizes, so intricate details get lost. Use bold shapes, strong contrast, and your brand's primary color. Text in favicons is almost always unreadable below 32×32 — use a letter, symbol, or abstract mark instead.