Create favicon.ico for your website from a single image

A favicon is a small icon that appears on the browser tab next to the page title. You also see it in bookmarks, browsing history, and on the phone home screen when someone adds the site as a shortcut.

This small graphic serves an important function - it helps users quickly recognize a site among many open tabs. When someone has a dozen tabs open in the browser, the favicon is often the only visible element identifying the site.

The generator creates a complete icon set: a classic favicon.ico file for browsers, PNG icons in various sizes, and an apple-touch-icon for Apple devices. It also generates 192x192 and 512x512 icons useful for web apps (PWA).

Each size has its use:

If you are not building a PWA, you only need: favicon.ico, 32×32 PNG, and 180×180 PNG. These three files cover most use cases.

Google displays favicons next to website URLs in search results. Mobile search results have shown favicons since 2019. Desktop search results followed in January 2020. This makes the favicon a visible branding element in every Google search.

Google sets specific requirements for favicon display. The icon must measure at least 48×48 pixels. It must be square. The image must remain clearly visible on a white background. Google rejects icons with inappropriate or empty content.

The Googlebot crawls and indexes favicons independently from page content. Favicon updates in search results may take several days to several weeks. The favicon file must not be blocked in robots.txt - otherwise Google cannot fetch the new version.

Bing also shows favicons in its search results. DuckDuckGo displays site icons next to every result link. A complete favicon set ensures consistent brand appearance across all major search engines. Users recognize familiar favicons faster, which contributes to higher click-through rates.

A favicon is a micro-branding element visible in multiple places simultaneously. The icon appears in browser tabs, bookmark lists, browsing history, and on the mobile home screen. When a user has twenty or more tabs open, the favicon becomes the only visible element identifying the website.

Color consistency between the favicon and the company logo strengthens brand recall. The site icon should use the same colors and shapes as the primary logo. A simplified version of the logo or its first letter typically works best at small pixel sizes.

In e-commerce, a professional favicon signals a trustworthy store. Shoppers browsing multiple product pages in different tabs rely on favicons to navigate back to specific shops. Price comparison sites display favicons alongside merchant listings, adding visual differentiation.

Brand consistency extends to social media previews and browser history. A recognizable site icon creates a unified visual identity across every digital touchpoint. Businesses without a custom favicon - or those using the default browser icon - risk appearing less established to potential customers.

Three favicon formats dominate modern web development: ICO, PNG, and SVG. Each format serves a specific purpose in the browser ecosystem.

ICO is the original favicon format introduced with Internet Explorer 5 in 1999. An ICO file can contain multiple sizes (16, 32, and 48 pixels) in a single container. Every major browser still supports ICO, making it the most compatible option.

PNG offers higher image quality than ICO at smaller file sizes. Modern browsers prefer PNG favicons declared via link tags in the HTML head. Separate PNG files per size (32×32, 192×192, 512×512) give the browser the optimal resolution for each context.

SVG favicons are the newest option. Chrome supports SVG favicons since version 80. Firefox has supported them since version 41. SVG scales to any size without quality loss. SVG favicons also support dark mode through the CSS prefers-color-scheme media query - the icon can automatically adapt its colors when the user switches to dark mode. As of early 2025, Safari does not yet support SVG favicons.

The recommended approach combines all three: favicon.ico for legacy compatibility, PNG files for modern browsers and PWA, and an optional SVG for scalability and dark mode support.

Browsers cache favicons aggressively and independently from regular page assets. A cached favicon may persist for weeks even after the source file changes on the server. This behavior protects performance but can delay favicon updates.

Effective caching strategies use Cache-Control headers. Setting max-age=604800 (one week) with the immutable directive tells browsers to reuse the cached favicon without checking for updates. When deploying a new favicon, a version parameter in the URL (/favicon.ico?v=2) forces browsers to fetch the fresh file.

File size matters for page performance. An ICO file containing three sizes typically weighs 5 to 15 kilobytes. Individual PNG favicons range from 1 to 5 kilobytes each. The total favicon payload should stay under 20 kilobytes for optimal loading speed. Avoid base64-encoding favicons inline in HTML - this blocks rendering and increases document size.

The Lighthouse audit tool in Chrome DevTools checks for a valid, accessible favicon. A missing or broken favicon triggers a warning in the PWA audit category. Fixing this issue improves the overall Lighthouse score and confirms correct favicon configuration.

Progressive Web Apps require additional icons beyond the standard favicon. The manifest.json file must include an icons array specifying image source, size, type, and purpose for each entry.

Google requires at least two icons for PWA installability: 192×192 pixels and 512×512 pixels in PNG format. Without these sizes, Chrome will not show the install prompt to users.

Maskable icons are a special icon type for Android devices. The operating system crops maskable icons into various shapes - circles, rounded squares, or teardrops depending on the device manufacturer. The safe zone covers the inner 80 percent of the image area. All essential graphic elements must fit within this zone to avoid being cropped.

Apple handles PWA icons differently. iOS reads the apple-touch-icon (180×180 pixels) from a link tag in the HTML head - not from the manifest file. This icon appears when users add the website to their home screen.

The 512×512 icon serves as the source for the PWA splash screen. Android generates the splash screen automatically from this icon combined with the application name and background color declared in manifest.json. A high-quality 512×512 image ensures a professional appearance during app startup.