Favicon Generator

What is a Favicon? History and Modern Role

The term "favicon" was coined by Bharat Shyam at Microsoft in 1999 when Internet Explorer 5 introduced the ability to display a small icon next to bookmarks. The original format was a 16×16 pixel BMP file named favicon.ico placed at the root of a web server.

Over two decades, favicons evolved dramatically. The mobile web required 57×57 and 72×72 Apple Touch Icons for iOS home screens. Android's Progressive Web App ecosystem added 192×192 and 512×512 icons. Windows 8 introduced large 310×310 tiles. Google began displaying favicons in mobile search results in 2019, making them a visible brand element in organic search.

Today, a "favicon" isn't a single file — it's a package of 15–22 files covering every context where your brand identity appears: browser tabs at multiple pixel densities, phone home screens, PWA splash screens, start menus, search results, and bookmarks. Brands that skip non-standard sizes end up with blurry, stretched, or missing icons in one or more contexts.

SEO note: Google explicitly states that your favicon must be at least 48×48 pixels (or a multiple thereof) and accessible via a public URL. If your favicon returns a 404 or is below the minimum size, it won't appear next to your site in Google Search, reducing click-through rates.

Favicon Sizes: Complete Reference for 2026

Different platforms and contexts require different favicon dimensions. Here's why each size matters:

**Browser tab icons (16×16, 32×32):** These are the classic favicon sizes — 16×16 for standard displays and 32×32 for HiDPI/Retina displays. Chrome, Firefox, and Safari all read these sizes from your HTML <link> tags. Browsers fall back to favicon.ico if no PNG is specified.

**Desktop shortcuts (48×48, 96×96):** When users bookmark your site or pin it to their taskbar (Windows), these larger sizes are used. The 96×96 is also used by Chrome and Firefox for desktop shortcut icons on Windows and Linux.

**Apple Touch Icon (120×120, 152×152, 180×180):** When iPhone and iPad users tap "Add to Home Screen," iOS reads the apple-touch-icon. The 180×180 is the current standard for all modern iPhones. Older iPhone/iPad sizes (120×120, 152×152) are included for backwards compatibility. Note: iOS automatically applies rounded corners and a gloss effect — you don't need to do this yourself.

**Android / Chrome PWA (192×192, 512×512):** Chrome on Android uses these for the home screen icon and PWA splash screen respectively. The 512×512 is also used for the PWA install prompt icon.

**Maskable icons (192×192, 512×512 maskable):** Android Oreo+ applies "adaptive icon" shapes — your icon might be displayed as a circle, squircle, teardrop, or other shape depending on the launcher. Maskable icons contain your design within an 80% "safe zone" in the center, with background fill extending to the edges to prevent cropping. Always include maskable variants for Android PWAs.

**Microsoft Tiles (70×70, 150×150, 310×150, 310×310):** Windows 8/10/11 Start Menu can display your site as a live tile. These sizes cover small, medium, wide, and large tile formats. The browserconfig.xml file tells Windows which tile images to use.

PNG to Favicon: Best Practices

PNG is the most common starting point for favicon generation because it supports transparency, handles flat design well, and is universally supported. Here's how to get the best results when converting PNG to favicon:

**Source image requirements:** Start with a PNG that is at least 512×512 pixels, square (1:1 aspect ratio), and ideally has a transparent background if your icon has irregular edges. Low-resolution source images (below 256×256) will look blurry at 512×512 output — the generator scales up but cannot add detail that isn't there.

**Transparent backgrounds:** If your source has a white background you want to remove, use a background removal tool first, then upload the transparent PNG. Our generator preserves transparency through the resize pipeline — your PNG output files will have transparent backgrounds unless you explicitly set a background fill color.

**High-contrast design principle:** A favicon must be recognizable at 16×16 pixels. Detailed illustrations, thin lines, and multi-word text all become illegible at small sizes. The best favicons use a single bold shape (letter, icon, or geometric form) with high contrast between the icon and its background.

**Common mistakes to avoid:** Using a white icon on a white background (invisible in browser tabs), having fine details that disappear at 16px, using a rectangular logo without cropping (will be letterboxed), and forgetting the transparent background (becomes a white box when displayed on colored surfaces).

PNG to ICO: How the .ico Format Works

The .ico format was designed specifically for Windows icons and has been used for favicons since IE5. Despite being old, it remains essential in 2026 because some contexts — legacy browsers, Windows shortcuts, certain CDNs, and enterprise intranets — only look for favicon.ico at the server root.

An .ico file is a container format, not a single image. It stores multiple image sizes as separate entries within one file, and applications choose the most appropriate size based on context. A proper favicon.ico includes at least three sizes: 16×16 (browser tab on standard displays), 32×32 (browser tab on HiDPI/Retina), and 48×48 (Windows taskbar and desktop shortcuts).

Modern ICO files embed PNG data directly rather than the older BMP format — this is supported by Windows Vista+, macOS, and all modern browsers, and results in much smaller file sizes. Our generator builds the ICO binary by taking the PNG ArrayBuffer for each size and wrapping them in the ICONDIR/ICONDIRENTRY structure, all in the browser using the DataView API.

One important note: browsers read favicon.ico from the site root (https://yourdomain.com/favicon.ico) even without a <link> tag. This fallback behavior is why you always need this file in your root, even if you have explicit <link rel="icon"> tags for PNG and SVG versions.

How to Add a Favicon to Your Website

Installing a favicon correctly requires uploading the files and adding the right HTML tags. Here's the complete process:

**Step 1: Upload files to your root directory.** Copy all files from the ZIP to the root of your website — the same directory as your index.html file. This is typically the public/ or www/ folder. All favicons should be accessible at URLs like https://yourdomain.com/favicon.ico and https://yourdomain.com/apple-touch-icon.png.

**Step 2: Add HTML tags in your <head>.** The included HTML snippet contains all necessary <link> and <meta> tags. The most important are: <link rel="icon"> pointing to your favicon.ico and PNG sizes, <link rel="apple-touch-icon"> for iOS, and <link rel="manifest"> pointing to your site.webmanifest.

**Step 3: Verify installation.** Open your site in a browser and check the tab. Test on iOS by using "Add to Home Screen." Use Chrome DevTools (Application → Manifest) to verify your Web App Manifest is loading correctly.

**Platform notes:** WordPress users can set the favicon via Appearance → Customize → Site Identity → Site Icon. Shopify has a favicon field in Online Store → Themes → Customize. Next.js 13+ App Router automatically serves a favicon.ico placed in the /app directory as a special file. Astro and Vite projects should place favicon.ico in the public/ folder.