What Is a Favicon?
A favicon (favorite icon) is the small square symbol that represents a website in the browser tab, in bookmarks, in the history list and on the mobile home screen. It is the smallest but most frequently seen part of a site's brand identity; a user navigating between dozens of tabs spots the right favicon far faster than the title text.
A single favicon file is no longer enough. Different platforms and screen densities expect different sizes; a size you leave out shows up on that platform as a blurry icon, or as a generic letter icon the browser generates on its own.
Why Does the Favicon Matter?
A user may keep dozens of tabs open at once; in that situation the tab titles are usually shortened until they are invisible, and the only distinguishing mark left is the favicon. The same is true in the bookmarks list: in a long list of favourites, hunting for a familiar symbol is much faster than reading site names. Search engines care about the favicon too; Google displays it next to the site name in mobile search results, so a missing or broken favicon also means an entry that fails to stand out on the results page.
Favicon Sizes and Where They Are Used
| Size | File name | Where it is used |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab and bookmarks — the modern PNG size that replaces the classic favicon.ico. |
| 32×32 | favicon-32x32.png | Browser tab and bookmarks on high-resolution displays. |
| 48×48 | favicon-48x48.png | Windows shortcuts and some desktop browser components. |
| 180×180 | apple-touch-icon.png | Apple's <code>apple-touch-icon</code> standard — the "Add to Home Screen" icon on iOS. |
| 192×192 | android-chrome-192x192.png | PWA <code>manifest.json</code> — the Android home screen icon. |
| 512×512 | android-chrome-512x512.png | PWA <code>manifest.json</code> — Android splash screen and large icon displays. |
Generating all six of these sizes from a single high-resolution square image guarantees that the site looks sharp on every platform. A source image of at least 512×512 is recommended; enlarging a small image costs quality. The PNG format's transparency support helps here too: keeping the background of the source image transparent lets the favicon sit more comfortably against the browser's light or dark theme. For logos designed on a white background in particular, this is what gets you a clean symbol in dark-themed browsers rather than a white square.
The PWA and manifest.json Connection
The 192×192 and 512×512 sizes are used not only for the browser tab but also in the Progressive Web App (PWA) manifest.json file. When a user adds the site to the home screen on Android, the 192×192 icon is used; the 512×512 size comes into play for the splash screen shown while the app is loading. If these two sizes are missing, a site added as a PWA appears with a blurry or default icon.
These two sizes are declared in the icons array of the manifest.json file like this:
The manifest file itself is linked from the page's <head> section with the line <link rel="manifest" href="/manifest.json">; without that line the browser never learns that the manifest file exists.
Non-Square Images and Common Mistakes
If your source image is not square, it gets stretched to fit a square during conversion, which distorts the proportions of the logo. For the best result, crop the original image to a square ratio beforehand. Browsers also look automatically for a /favicon.ico file in the root directory of the site if no <link rel="icon"> is declared on the page; this legacy behaviour still works as a fallback, but it is no substitute for the modern PNG sizes.
- Uploading only a single 16×16
favicon.ico— this leads to a missing or blurry appearance on high-resolution displays and on the iOS/Android home screen. - Forgetting to add an
apple-touch-icon— a page added to the home screen on iOS then uses an icon generated automatically from a screenshot of the page instead of the favicon. - Using a rectangular image, or one with no margin around the edges, directly as the source — cropping and stretching become far more obvious at small sizes.
- Not declaring the 192×192 and 512×512 icons in
manifest.json— the home screen icon looks broken when the site is installed as a PWA.
PNG or ICO?
The classic favicon.ico format is an old Windows icon format that can hold several sizes in a single file, and browsers still scan for it as a fallback. Every modern browser, however, supports PNG files declared at individual sizes directly; that keeps file sizes down and lets the most appropriate size be chosen explicitly for each platform. Today, therefore, sites are advised to use separate PNG files named by size, together with the <link> tags that point at them, rather than an .ico.
How to Test Your Favicon
After uploading the favicon files you may not see the change immediately, because the browser has cached the old icon; closing and reopening the tab is often enough, but some browsers keep a favicon in cache for days. The most reliable way to check is to open the site again in a private/InPrivate window, or to clear the browser cache completely. To confirm that the file really was uploaded to the right location, you can open a path such as /favicon-32x32.png directly in the browser; if you get a 404, the file is not where it is expected to be and the href path in the <head> tag needs updating.
Create Your Favicon Set
Instead of cropping and exporting every size by hand, you can upload a single square image to the tool below and get all six sizes plus the required <head> tags in a few seconds. Your image is processed entirely in your browser and is never uploaded anywhere.