Drag & drop an image here, or click to browse
PNG, JPG, WebP, GIF
What Are Favicons and Why They Matter
A favicon is the small icon that appears in browser tabs, bookmarks, and mobile home screens. It helps users identify your site quickly and adds a professional touch. A good favicon is simple, recognizable at small sizes, and consistent with your brand. Most sites use a simplified logo or brand mark.
Favicons improve user experience by making tabs easier to distinguish and helping users find your site in their bookmarks. They're also required for Progressive Web Apps (PWAs) and improve how your site appears when shared or saved to a home screen.
Favicon Sizes You Need for Modern Web
Different contexts require different favicon sizes. Browsers typically use 16×16 or 32×32 in tabs. Apple devices use 180×180 for home screen icons. Android and PWA manifests often need 192×192 and 512×512. Some browsers and bookmark managers use 48×48 or 64×64.
Providing multiple sizes ensures your favicon looks sharp on all devices. Use the sizes attribute in your link tags so browsers can pick the appropriate resolution. This tool generates all common sizes so you're covered for every use case.
ICO vs PNG: Choosing the Right Favicon Format
Historically, favicons were ICO files — a format that can contain multiple sizes in one file. Today, PNG is the preferred format. PNG favicons support transparency, are widely supported, and allow you to serve optimized sizes via the sizes attribute. Browsers will request the size they need.
ICO is mainly useful for legacy browser support (e.g., IE11). For modern sites, use PNG. This generator outputs PNG files, which work in all current browsers. If you need ICO, use a dedicated converter after generating the PNGs.
Best Practices for Favicon Implementation
Place your favicon in the site root or a predictable path. Use multiple link tags with the sizes attribute so browsers can choose the right resolution. Include both standard favicon and apple-touch-icon links. For PWAs, add 192×192 and 512×512 to your web app manifest.
Keep your favicon design simple — complex details get lost at 16×16. Use a square or near-square design. Test your favicons in different browsers and on mobile devices. The HTML snippet this tool generates follows these best practices.
Frequently Asked Questions
Related Tools
Explore More Tools
Find this tool useful? Buy us a coffee to keep DuskTools free and ad-light.