Favicon Generator — Complete Guide to Creating Website Favicons

A favicon is the small icon displayed in browser tabs, bookmarks, and history entries next to your website's name. Despite being tiny, it is one of the most visible branding elements on the web — users see it every time they have your site open in a tab.

This guide covers everything you need to know about favicons: what sizes you need, which formats to use, how to generate them, and the HTML code to add them to your site.

What Is a Favicon?

The word "favicon" is short for "favorite icon." It was originally used for bookmarks ("favorites") in Internet Explorer, but it has evolved to appear in:

• Browser tabs
• Bookmark lists
• Browser history
• Search engine results (some search engines)
• Mobile home screen shortcuts
• Progressive Web App (PWA) icons

A missing favicon results in a generic browser icon or a blank space, which looks unprofessional and makes your site harder to identify among open tabs.

Favicon Sizes You Need

Modern browsers and devices require multiple favicon sizes. Here is the complete list:

The most critical sizes are 16x16, 32x32, and 180x180 (Apple Touch Icon). If you only generate three files, make it these three.

ICO vs PNG vs SVG

ICO (Windows Icon Format)

The traditional favicon format. An ICO file can contain multiple sizes in a single file (e.g., 16x16, 32x32, and 48x48 all in one .ico file).

Pros: Universal browser support, multi-size in one file Cons: Older format, larger file size

PNG

The modern standard for most favicon uses. Clean, small files with transparency support.

Pros: Small file size, transparency, widely supported Cons: One size per file (need multiple files)

SVG

The newest approach. A single SVG favicon scales perfectly to any size and can even include CSS for dark mode support.

Pros: Infinitely scalable, supports dark mode via CSS, single file for all sizes Cons: Not supported by all browsers yet (Safari added support only recently)

Recommendation: Use ICO (with 16x16 and 32x32 embedded) as the primary favicon, PNG for Apple Touch Icon and PWA icons, and optionally SVG for modern browsers.

How to Create a Favicon with BestPNG

BestPNG's favicon generator converts any image into a complete favicon package with all required sizes.

Step-by-step:

1. Go to bestpng.com/tools/favicon
2. Upload your logo or icon image (PNG, JPG, or SVG)
3. Preview the favicon at different sizes
4. Choose which sizes to generate (or select all)
5. Download the favicon package (ICO + PNG files)

Tips for best results:

• Start with a square image (1:1 aspect ratio)
• Use a simple, recognizable design — favicons are very small
• Ensure the icon is legible at 16x16px
• Use transparent background if your icon is not square-filling

Designing for Small Sizes

The biggest challenge with favicons is making your brand recognizable at just 16x16 pixels. Here are design principles:

Simplify

A full logo with text rarely works as a favicon. Instead, use:

• The first letter of your brand name
• A simplified version of your logo mark
• A single recognizable symbol

Use Bold Shapes

Thin lines and fine details disappear at small sizes. Use bold, solid shapes with clear silhouettes.

Test at Actual Size

Always preview your favicon at 16x16px on a real browser tab (not just zoomed in). What looks good at 512px may be an unrecognizable blob at 16px.

Consider Background Color

On most browsers, favicons appear on a light (or dark, in dark mode) tab bar. Test your favicon against both light and dark backgrounds to ensure visibility.

HTML Code for Favicons

After generating your favicon files, add these tags to the <head> section of your HTML:

<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />

<!-- PNG favicons for different sizes -->
<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 Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- SVG favicon (modern browsers) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

<!-- Web App Manifest (for PWA icons) -->
<link rel="manifest" href="/site.webmanifest" />

The site.webmanifest file for PWA support:

{
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Testing Your Favicon

After uploading your favicon files:

1. Clear browser cache — Favicons are aggressively cached. Use Ctrl+Shift+R (or Cmd+Shift+R on Mac) to hard refresh.
2. Check in multiple browsers — Test in Chrome, Firefox, Safari, and Edge.
3. Test on mobile — Add your site to the home screen on iOS and Android to verify the touch icon.
4. Check dark mode — Toggle dark mode in your browser/OS and verify the favicon is still visible.
5. Verify in bookmarks — Bookmark the page and check the icon in your bookmarks bar.

Common Favicon Mistakes

1. Using a full logo. Text is unreadable at 16px. Use a symbol or letter instead.
2. Forgetting the Apple Touch Icon. iOS will generate an ugly screenshot thumbnail instead of your icon if this is missing.
3. Only providing one size. Browsers pick the closest available size, which may look blurry if only 16x16 is provided for a 32x32 context.
4. Not clearing cache after updating. Favicons are cached for extended periods. Tell visitors to hard-refresh if you have changed your favicon.
5. Placing files in the wrong directory. Most browsers look for /favicon.ico at the root of your domain by default. Ensure your files are in the right location.

Related BestPNG Tools

• Resize — Manually resize an icon to specific pixel dimensions
• Remove Background — Create a transparent background for your favicon source image
• Crop — Crop your logo to a perfect square before generating the favicon
• Compress — Optimize the file size of PNG favicon files

Frequently Asked Questions

Can I use a photograph as a favicon? Technically yes, but photos look terrible at 16x16px. They become unrecognizable blobs of color. Favicons work best with simple icons, letters, or symbols.

How do I make a favicon with a transparent background? Start with a PNG image that has a transparent background. If your source image has a solid background, use BestPNG's background remover to make it transparent first, then generate the favicon.

Do I need both ICO and PNG favicons? For maximum compatibility, yes. ICO covers older browsers and Windows shortcuts. PNG covers modern browsers and Apple/Android devices. If you must choose only one, go with ICO containing 16x16 and 32x32 sizes.

How often should I update my favicon? Only when your brand identity changes. Favicons are heavily cached, and frequent changes can confuse users who identify your site by its tab icon.

What if my favicon does not show up? Check the file paths in your HTML, ensure files are uploaded to the correct server directory, clear your browser cache, and verify the files are accessible by navigating directly to their URL (e.g., yoursite.com/favicon.ico).

Conclusion

A well-designed favicon is a small detail with outsized impact on your site's professionalism and brand recognition. Use BestPNG's favicon generator to create a complete set of favicon files from any source image — including ICO with multiple embedded sizes, Apple Touch Icons, and PWA-ready PNGs.

Keep the design simple, test at actual size, and make sure you include all the HTML meta tags so every browser and device picks up your icon correctly.

Generate your favicon now →