Favicon Generator

Generate favicons in all sizes from any image. Create 16×16, 32×32, 180×180, 192×192, and 512×512 icons. Get HTML code snippets. Free, private — all processing in your browser.

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.