Getting a favicon image for your website means producing one or more small square icon files in PNG format, placing them at known paths on your domain, and adding the matching HTML link lines into the page head so browsers, bookmark lists, and history rows have something to display. The most common usable sizes are 16x16 for browser tabs, 32x32 for high-DPI tabs and taskbars, and 48x48 or larger for bookmark managers and PWA surfaces. Each file is a real PNG image; the matching link tags tell the browser where to find each size and what dimensions to expect. Because every browser ultimately decides which file to use, the practical goal is to ship a tidy set of exact-size square PNGs with correct link markup, rather than to chase a single correct file. The work below covers producing the files locally from a picture you already have, then wiring them into your page.
What a Favicon Image Actually Is
A favicon, short for favorite icon, is the small graphic a browser shows next to a page title in the tab strip, inside bookmarks, on the home screen of saved shortcuts, and in history rows. The image itself is just a normal PNG file at one of a few common pixel sizes. The <link rel="icon" sizes="..." href="..."> tags inside your HTML <head> are how you tell the browser where each version lives and what to expect.
The file at the smallest end, 16x16, is the most important because that is what most browser tabs actually draw. A 32x32 file covers high-DPI screens and taskbars. Larger sizes like 48, 64, 128, 256, and 512 are useful for bookmarks, mobile home-screen shortcuts, operating system surfaces, and anything that needs a sharper rendering at distance.
For most small sites, shipping a 16x16, a 32x32, and a 48x48 PNG is enough to cover normal browsing. Larger sizes are a quality-of-life improvement for users on retina screens, in high-DPI bookmark managers, and on devices that show a thumbnail at a larger zoom.
Pick a Local Source Image That Reads at 16 Pixels
Before opening any tool, choose the source picture carefully. A favicon is rendered into roughly 256 tiny pixels at the smallest end, so the original composition matters far more than file size or sharpness. Composition rules worth following:
- Use a square or nearly-square source. Square files skip the center crop entirely; rectangular files lose content from the long edges.
- Keep the main subject near the center. The favicon pipeline uses a centered cover crop, so anything near the corners of a landscape or portrait source will be trimmed away.
- Prefer high contrast. A simple two-color mark on a plain background reads better at 16 pixels than a detailed gradient.
- Avoid tiny text or thin strokes. Letters thinner than roughly 8 percent of the icon width blur into noise below 32 pixels.
If your subject is intentionally off-center, crop it first with a dedicated image cropper so the center crop does not cut away the part you actually care about. PNG and WebP sources keep their transparency all the way through to the favicon files; JPEG sources have no transparent pixels to begin with, so any pale or busy background behind your subject will end up baked into the output.
Generate the Square Favicon Files With Favicon Generator
Favicon Generator handles the conversion from a local image to exact-size PNG files and writes the matching HTML link lines for you. Everything runs in the current browser tab. The source image is decoded locally, drawn to a Canvas, and exported as PNG blobs; the file itself never reaches a processing server.
- Open Favicon Generator and click the file picker. Choose a PNG, JPEG, or WebP image from your computer. The file must be a static raster; SVG and animated inputs are not supported.
- Confirm the preview shows the part of the image you want as the icon. The tool applies a centered cover crop, taking the largest possible square from the middle of the source. A landscape picture loses equal portions from its left and right edges; a portrait picture loses equal portions from the top and bottom.
- If the subject is off-center, stop here and crop the source first. Favicon Generator is not an interactive crop editor, so an off-center subject will not be recovered later.
- Select the square sizes you need. Available outputs are 16, 32, 48, 64, 128, 256, and 512 pixels. Typical small sites pick 16, 32, and 48.
- Click the generate action. Each selected size is rendered independently from the decoded source at its exact natural dimensions; the preview is only a visual check, not the download.
- Inspect the smallest results at 100 percent zoom. Open the 16 and 32 pixel files at actual size and confirm the subject is still recognizable, that thin lines have not softened away, and that no important detail was clipped.
- Download each icon. Files arrive with names such as favicon-32x32.png and are delivered as image/png blobs with the natural dimensions named by the link.
- Copy the HTML link lines shown next to each generated file. Only copy the lines for sizes you actually plan to publish.
Read the Generated HTML Link Lines
Every size you selected produces one HTML snippet using the standard rel="icon" relationship. The snippet looks roughly like:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Three parts matter. The relationship token rel="icon" tells the browser the file is an icon, the type="image/png" attribute specifies the PNG media type, and the sizes attribute names the exact square dimensions of that file. Browsers use the sizes value to pick a sensible match for the surface they are drawing on. The filename in href matches the actual download, so the markup and the asset stay aligned.
For the formal definition of the rel icon relationship, the MDN rel icon reference covers the syntax, the media type rule, and how browsers are expected to pick among multiple sizes. Paste only the lines for sizes you actually upload. Extra link tags pointing at missing files do not speed anything up; they just produce 404s in your server logs.
Place the Files and Snippets on Your Site
Drop the selected PNG files into your project. The generated snippets use root-relative paths, so the easiest layout is to put each file at the path named in its href, for example /favicon-32x32.png at the site root. If your assets live under a different directory such as /assets/icons/, edit each href to match the real location before deploying.
Paste the chosen link lines inside the <head> of every page that should display the icon, typically inside a shared layout or template. The order does not matter, but keeping them grouped at the top of the head makes them easy to find later. For a longer walkthrough of the deployment side, including CDN paths and a shared partial, the guide on getting a favicon set up on your website covers the steps in more depth.
After deployment, open the page, view source, and confirm the link lines are present. In the network panel, verify each file returns a 200 response and that the served bytes match the expected PNG. If the live page still shows the wrong icon, the next section covers the usual culprits.
Why the Old Icon Is Still Showing
Even after a clean deploy, the old icon often keeps appearing because browsers, operating systems, and intermediate CDNs all cache favicons aggressively. A short checklist covers most cases:
- Hard-reload the page using Ctrl/Cmd+Shift+R to bypass the browser's image cache.
- Clear site data for your domain in the browser's settings.
- If you sit behind a CDN or reverse proxy, purge the cached HTML and the cached icon files at the edge.
- Check that you are not serving a stale /favicon.ico from your server's defaults, which can override the new PNG set.
- Confirm the file paths in the href attributes actually match where the files live.
Note that which specific icon a browser, bookmark manager, or OS surface displays is ultimately the browser's choice. The multiple rel icon links give the browser options; they do not guarantee a particular surface will pick a particular size.
When This Approach Is Not Enough
Favicon Generator produces PNG browser favicons and matching rel icon HTML snippets. It deliberately does not cover the rest of the favicon ecosystem. If your project needs anything in the table below, treat the PNG set this tool produces as the browser-favicon baseline, then layer the platform-specific assets on top.
| Need | Covered here? | What to do instead |
|---|---|---|
| Legacy .ico container for /favicon.ico defaults | No | Convert the PNG set to a multi-size .ico with a dedicated ICO tool |
| Apple touch icon for iOS home-screen pins | No | Add a 180x180 apple-touch-icon.png with its own link tag |
| Android, PWA, or installable web app icons | No | Create a web app manifest with the sizes your target OS asks for |
| SVG icon | No | Author an SVG directly; this pipeline rejects SVG to avoid scriptable content |
| Pinned-tab asset for Safari | No | Provide a monochrome SVG suitable for the pinned-tab surface |
Source Image Limits Worth Knowing
Input is limited to PNG, JPEG, and WebP files up to 25 MB. After the browser decodes the source, images above 40 million pixels are rejected before the output canvases are allocated. SVG files and animated images are intentionally excluded, so if your source is in an unsupported format, convert it to a static raster first. Compressed file size alone does not describe decode memory, which is why the post-decode pixel cap exists alongside the file-size cap.
For a dependable publishing workflow, start with a simple high-contrast square logo, generate the sizes you need, and open the smallest files at 100 percent zoom. Confirm the subject is still recognizable, that no important detail was cut off by the center crop, and that transparent edges look right against both light and dark browser themes. Upload the chosen PNG files, paste their matching link lines into the document head, and verify the deployed page source and network paths. This generator prepares assets and markup; it does not modify your website, upload files, or confirm production cache behavior, which is why the verification checklist above matters.
If you're weighing options, Image Color Picker Alternative: Free, Private, Local covers this in detail.