To get a favicon for your website in Chrome, you generate square PNG icons from a local image, save them on your server, and add matching rel=icon link tags in the document head — Chrome then displays the chosen icon in the tab strip, bookmarks bar, and history list. The phrase "favicon" simply means the small picture Chrome shows next to a page title, and the browser chooses it the same way on desktop, Android, and iOS. Most readers find a favicon by noticing one on a site they like and wondering how to get a similar mark onto their own pages, and the realistic path is to create one rather than copy another site's file, because copying does not transfer ownership or licensing rights. Chrome looks for the icon through ordinary HTTP requests, so any setup that produces reachable PNG files plus correct link elements will work. The Favicon Generator handles the file creation step entirely inside your browser tab, so the source image never leaves your machine, which keeps the workflow private and quick. After the icons are generated and downloaded, the remaining work is uploading the PNG files to your server and pasting the matching HTML snippet into the head of your page template.
What Chrome Looks For on Your Site
Chrome displays a favicon by reading the document head of the page you load. When a website includes link elements with explicit sizes and types, Chrome uses the closest match for the surface it is rendering — a tiny version in the tab strip, a larger one for the bookmarks bar, and the highest-quality square for pinned tabs or the new-tab page. If no link element is present, Chrome falls back to requesting /favicon.ico from the document root, which is why that single legacy file is still widespread even though modern sites usually ship a richer set.
The HTML standard defines the icon relationship through the link element. According to the MDN rel icon reference, each link tag carries four fields that matter for Chrome: rel, type, sizes, and href. The rel field names the relationship, type declares the MIME type of the file, sizes describes the rendered dimensions in width x height notation, and href points to the actual file. Chrome respects multiple icons on the same page and chooses among them based on the surface it is drawing, but it does not promise a particular choice — the final selection is browser behavior.
Because Chrome pulls these icons through normal HTTP requests, anything that interferes with serving static assets also breaks favicons: a 404 on the PNG file, a wrong directory in the href, an HTTPS mixed-content block, or an aggressive caching proxy that holds the old file. The fix is the same in each case — verify the file exists at the path the link points to and clear the local cache before reloading.
Picking an Image That Survives a 16-Pixel Crop
The smallest icon Chrome will ever request is 16 pixels square, which is roughly the size of a postage stamp inside the tab strip. At that scale the browser has only 256 pixels of room for the entire subject, so the source image needs to be high contrast, simple, and centered. Thin strokes, small letters, and subtle gradients disappear; a single bold mark or initial letter tends to read well.
The Favicon Generator uses a centered cover crop before it resizes, which means it always takes the largest square from the middle of the source. A landscape source loses equal amounts from the left and right edges; a portrait source loses equal amounts from the top and bottom; a square source is not cropped at all. This is predictable and works well for logos, monograms, and symbols whose important detail already sits near the center, but it is not an interactive crop editor. If your subject is intentionally off-center — for example, a logo with a tagline tucked into one corner — pre-crop it with an Image Cropper before you upload it to the generator. The source image is decoded and resized locally inside your Chrome tab, so the original file is never sent to a processing server.
Avoid sources smaller than 256 pixels square. A 64-pixel source upscaled to 512 pixels looks blurry because the generator only has 64 pixels of detail to work with. JPEG sources begin without transparency, so any pale edge that looked fine on a white page can look dirty on a dark browser theme; check the result against both light and dark backgrounds before publishing. Transparent PNG or WebP sources preserve their alpha channel and can sit cleanly on either theme.
Generating Square PNG Files in Chrome
This is the practical workflow for turning one local image into the set of square PNG files Chrome expects.
- Open the Favicon Generator in a Chrome tab and choose a PNG, JPEG, or WebP source image whose main subject sits near the center. The file limit is 25 MB of compressed size and 40 million pixels after the browser decodes it.
- Select the square pixel sizes you need from the available list — 16, 32, 48, 64, 128, 256, and 512 px. Tick every size you intend to host; each is rendered independently from the decoded source at its natural dimensions, so the 512 px file is not a scaled-up copy of the 32 px preview.
- Wait for the previews to render. The tool shows one thumbnail per selected size so you can confirm the center crop captured the right area before downloading.
- Download each PNG file by clicking its link. The downloaded filename follows the pattern favicon-32x32.png, and the file content is an image/png Blob at the exact dimensions named.
- Copy the matching HTML link lines printed beneath the previews. Each line is a complete link element with rel="icon", type="image/png", a sizes attribute in WxH form, and a root-relative filename.
- Upload the PNG files to the directories named in each link, or edit each href to match the real asset path on your server.
The whole sequence runs in the active Chrome tab. No file leaves your machine, and the object URLs used for previews and downloads are revoked when results are replaced or the page closes.
What the HTML Link Snippet Contains
The generator prints one link element per selected size, formatted to match the icon relationship defined in the HTML standard. A typical block for three sizes looks like this in spirit, even though the generator writes each line separately:
| Field | Example value | Purpose |
|---|---|---|
| rel | icon | Tells Chrome this link points to a favicon resource. |
| type | image/png | Declares the MIME type of the file the href points to. |
| sizes | 32x32 | Reports the natural pixel dimensions so the browser can pick the best match. |
| href | /favicon-32x32.png | The path the browser requests; must be reachable from the live site. |
You only need to keep the lines for sizes you actually publish. If you skip the 48 px file, remove its line. Multiple icon links let Chrome choose an appropriate resource for each surface — a tab strip, a bookmark entry, a pinned shortcut — but the final pick remains the browser's decision. The generator prepares the markup; it does not modify your website or confirm production cache behavior. A closer walkthrough of how the sizes and HTML lines relate lives in the guide How to Generate Favicon from PNG: Sizes and HTML Links.
Picking the Sizes That Actually Get Used
Chrome surfaces favicons in several places, and not every size is worth the extra bytes. The table below lists the common Chrome surfaces and the smallest pixel size that reads cleanly in each one.
| Chrome surface | Typical rendered size | Sensible export size |
|---|---|---|
| Tab strip | 16 x 16 | 16 px |
| Bookmarks bar | 16 x 16 | 16 px and 32 px |
| History page rows | 16 x 16 or 32 x 32 | 32 px |
| Hover preview and pinned tabs | 32 x 32 up to 64 x 64 | 64 px |
| New Tab page tile (Android) | Up to 192 x 192 | 256 px |
| Share sheet and reading list | Up to 512 x 512 | 512 px |
A pragmatic set for a desktop-first site is 16, 32, and 64 px. Add 256 px and 512 px if you want a crisp mark on high-density displays and on mobile surfaces. Files larger than 512 px are not generated because Chrome does not use them and the extra bytes are wasted.
Checking the Smallest Files at Real Size
Before you publish, open the 16 px and 32 px downloads at 100 percent zoom in any image viewer. Browsers smooth pixels during resizing, which softens thin strokes and tiny letters, so a mark that looks fine in a 256 px preview can become unreadable in the 16 px version. If the subject disappears at the smallest size, regenerate from a higher-contrast source or move the subject closer to the visual center of the original.
A reliable test is to drop both files onto a webpage mock-up next to a fake tab title and squint at them. Anything that survives the squint is good enough for Chrome's tab strip. If the 16 px version fails this test, drop it from your published set and let Chrome fall back to the 32 px icon for the tab strip — Chrome will still request a 16 px file by name in some surfaces, but a missing file simply forces the next size up rather than breaking the layout.
Also check the icons against both a white background and a dark background. Chrome's tab strip follows the system theme, so an icon that looks correct on a white surface may wash out on a dark one. Transparent PNG or WebP sources carry their alpha channel through the generator and sit cleanly on either theme; JPEG sources have no transparency and may need a manual background swap with the Add Background to PNG tool first.
If the Old Favicon Will Not Go Away
A common surprise after deploying a new favicon is that Chrome keeps showing the previous version. Three causes are responsible for almost every case.
First, the file path in the href does not match where the PNG actually lives on the server. Open the deployed page source and confirm each href resolves — Chrome's DevTools Network panel shows the request and its status code. Second, the browser is serving a cached copy of the old icon. Open chrome://settings/clearBrowserData, choose "Cached images and files," clear it for the relevant site, then reload. Third, the new files were uploaded but the page itself was not reloaded with a cache-busting query string, so the browser reused an older HTML document that still referenced the old files.
Beyond those three, the generator does not produce an ICO container, an SVG icon, an Apple touch icon, an Android adaptive icon set, a pinned-tab asset, or a web app manifest. Those formats sit outside its scope, and a request for them will return a 404 from the generator's printed markup. For Apple touch icons, generate a separate 180 px square PNG by hand or through any image resizer and reference it from your own head markup.