Design Tools

Favicon Generator: Create the Tiny Icon That Makes Your Site Unforgettable

Everything about favicon sizes, formats, and how to make your brand icon recognizable everywhere.

What Is a Favicon?

When you open a browser tab and see a small icon next to the page title, that's a favicon. Short for "favorite icon," it's that little image that helps users identify your site among dozens of open tabs. Beyond tabs, favicons appear in bookmarks, browser address bars, and when someone adds your site to their home screen. It's one of the smallest design elements on your site — typically 16 by 16 pixels — but it has an outsized impact on how professional and trustworthy your site looks.

Think of it like a company logo on a building. You can read the company name from far away, but the logo is what makes the building recognizable at a glance. A missing or generic favicon (the browser's default globe or document icon) signals carelessness. A well-designed favicon signals identity.

The Minimum Set of Sizes You Need

Different devices and browsers use different sizes for favicons. You need to provide several versions to look sharp everywhere:

You don't need to design each size separately. You start with a high-resolution source image (preferably 512x512 or larger) and a good favicon generator creates all the necessary sizes from it automatically.

ICO vs PNG vs SVG: Which Format to Use

The ICO format is the original favicon format, developed specifically for Windows icon files. An ICO file can contain multiple sizes in a single file — that's why many sites still use a single .ico file that includes 16, 32, and 48-pixel versions. For maximum compatibility, especially with older Windows browsers, ICO is still a solid choice.

PNG is the modern alternative. It's what most favicon generators output today. PNG supports transparency, which is essential for logos and icons that need to look good on any background color. A 32x32 PNG with transparency is sharper than a 32x32 ICO on most browsers.

SVG favicons are the newest option. Since SVG is a vector format, it scales infinitely without pixelation. One SVG file handles all sizes. However, browser support has been patchy — Firefox and Safari have solid SVG favicon support, but some environments still need PNG fallbacks.

Best practice today: use a PNG-based favicon for broad compatibility, and add an SVG version for modern browsers that support it.

Why Simple Designs Work Best at Tiny Sizes

This is where many designers go wrong. A favicon at 16x16 pixels has about 256 pixels of total space. That's not much room for detail. Logos with gradients, fine text, multiple colors, or complex imagery become unreadable blobs when scaled down.

The best favicons are geometric and high-contrast. Think of the Twitter bird, the GitHub octocat, or the Apple icon. Single bold colors or a two-color combination. Simple shapes that remain recognizable even at 16 pixels. If your logo has too much detail, consider creating a simplified version specifically for the favicon — a single letter, a stylized initial, or an abstract symbol derived from your brand.

The HTML Tags You Need to Add

Creating the favicon files is only half the work. You also need to link them in your HTML. Here's what belongs in the <head> of every page:

<!-- Standard -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android -->
<link rel="manifest" href="/site.webmanifest">

The web app manifest file (manifest.json) is what Android Chrome uses to pick the right icon for your Progressive Web App home screen shortcut. Many generators create this file automatically.

Testing Your Favicon Across Browsers

Never assume your favicon looks right without testing. Open your site in Chrome, Firefox, Safari, and Edge. Check the tab, the bookmark bar, and the address bar. Try adding it to your phone's home screen. Try opening it in an Incognito/Private window to see the default bookmark favicons.

If you're seeing a cached old favicon, do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) and clear the browser cache for your domain specifically. Favicons get cached aggressively and changes can take time to show.

Free Favicon Generators Compared

Several free tools online take your source image and generate all the required sizes. RealFaviconGenerator is the most thorough — it handles not just PNG sizes but also the ICO format, Apple touch icon specifications, Windows tile icons, and the web app manifest. Favicon.io is the quickest option — paste in an image or emoji and download a ZIP with PNG sizes ready to go. Cloudflare and other CDNs also offer favicon generation as a free service.

Try a free favicon generator:

Generate your favicon from any image — all sizes, all formats, ready to download.

Browse Tools →