Image

How to Create a Favicon for Your Website

Q: What file format should a favicon be?

Modern browsers support PNG favicons natively. The traditional .ico format is only needed for legacy Internet Explorer support. Use PNG for all modern favicon sizes (16x16, 32x32, 180x180, 192x192, 512x512). SVG favicons are also supported by modern browsers and scale perfectly to any size, but you still need PNG fallbacks for Apple devices and older browsers.

Q: Do I need all favicon sizes?

At minimum, you need: favicon.ico (32x32 for legacy browsers), a 180x180 PNG for Apple touch icon, and a 192x192 PNG for Android/Chrome. For full PWA support, add a 512x512 PNG. While browsers will resize a single icon, providing dedicated sizes ensures the sharpest appearance everywhere.

Q: How do I test my favicon?

Open your site in multiple browsers and check the browser tab for the favicon. For Apple touch icon, add the page to your iPhone home screen. For Android, use Chrome's 'Add to Home Screen' feature. Use browser DevTools (Network tab) to verify the correct favicon files are being loaded. Clear your browser cache if changes don't appear immediately.

Generate all favicon sizes from a single image. Includes apple-touch-icon, PWA icons, and the HTML code to add them.

A favicon is the small icon that appears in browser tabs, bookmarks, history lists, and — increasingly — in search results. Despite its tiny size, it plays a significant role in brand recognition and professionalism. A missing or broken favicon makes a site look unfinished. A well-designed one reinforces your brand every time a user glances at their browser tabs.

What Is a Favicon and Why It Matters

The word “favicon” is short for “favorites icon” — it originated as the icon shown next to a website in Internet Explorer's favorites (bookmarks) list. Today, favicons appear in many more places:

Browser tabs: The primary location. Users with many tabs rely on favicons to identify sites at a glance.
Bookmarks bar: When a user bookmarks your site, the favicon appears next to the title.
Home screen icons: On mobile devices, when a user adds your site to their home screen, the apple-touch-icon (or PWA icon) is used as the app-like icon.
Google search results: Google displays favicons next to site URLs in search results, increasing visual brand presence.
Browser history: Favicons help users find previously visited sites in their history.

All Required Favicon Sizes Explained

Different browsers, operating systems, and devices expect different favicon sizes. Here is the complete list you need:

Browser Favicons

16 × 16 pixels: The classic favicon size used in browser tabs. This is the smallest and most commonly displayed size.
32 × 32 pixels: Used for the Windows taskbar, higher-resolution browser tabs, and shortcuts. This is the standard .ico size.
48 × 48 pixels: Used for Windows site shortcuts and some browser contexts.

Apple Touch Icon

180 × 180 pixels: The apple-touch-icon used when iOS users add your site to their home screen. Apple automatically applies rounded corners and a subtle shadow. This is the single most important non-browser favicon size.

PWA Icons (Progressive Web App)

192 × 192 pixels: Used by Android Chrome for the “Add to Home Screen” feature and in the app launcher.
512 × 512 pixels: Used in the PWA splash screen that appears while the app loads, and in the Android app switcher. This is your highest-resolution icon.

The HTML Code You Need

Add these lines to the <head> section of your HTML:

The site.webmanifest file references the 192 and 512 pixel icons for PWA support:

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

Tips for Designing a Good Favicon

Keep it simple. At 16 pixels, fine details disappear. Use bold shapes, a single letter, or a simplified version of your logo rather than the full logo.
Use high contrast. The favicon must be recognizable against both light and dark browser themes. Test against white, gray, and dark backgrounds.
Start with a square canvas. Favicons are always square. If your logo is horizontal, use just the logomark (icon) or first letter rather than trying to squeeze the full wordmark into a square.
Consider a subtle background. If your icon is very thin or light-colored, a filled background square (like a colored rounded rectangle) improves visibility at small sizes.
Test at actual size. Design at 512 × 512 for detail work, but frequently preview at 16 × 16 and 32 × 32 to ensure it reads well at those sizes. What looks great at 512px may be unrecognizable at 16px.
Match your brand colors. Use your primary brand color to create instant recognition. If you're unsure about colors, you can extract your palette from an existing brand asset.

Generate all favicon sizes from one image

Upload a single image and get every size you need: 16x16, 32x32, 180x180 apple-touch-icon, 192x192, and 512x512 PWA icons. Plus the HTML code to paste into your site.

Open Favicon Generator

Frequently Asked Questions

What file format should a favicon be?

Use PNG for all modern favicon sizes. The .ico format is only needed for Internet Explorer compatibility, which is rarely a concern today. SVG favicons are supported by modern browsers and scale perfectly, but you still need PNG fallbacks for Apple devices and PWA manifests. If you're starting from an SVG logo, convert it to PNG at high resolution first.

Do I need all favicon sizes?

At minimum, provide a 32 × 32 PNG (or .ico) for browser tabs, a 180 × 180 PNG for Apple touch icon, and a 192 × 192 PNG for Android. Add the 512 × 512 PNG if your site is a PWA. Browsers can resize icons, but dedicated sizes always look sharper.

How do I test my favicon?

Open your site in Chrome, Firefox, and Safari and check the browser tab. For Apple touch icon, add the page to your iPhone's home screen. For Android, use Chrome's “Add to Home Screen” option. Use DevTools' Network tab to confirm the correct files load. Clear your cache if changes don't appear — browsers cache favicons aggressively.

image