To get a favicon working on a website, generate exact square PNG files from a local image and add matching HTML link elements inside the document head — the standard 16, 32, and 48 pixel sizes cover the most common browser tab and bookmark surfaces, and each link uses the rel icon relationship with an image/png type and a sizes token that matches its filename. A favicon is the small icon that appears next to the page title in a browser tab, beside bookmarks, and on some desktop or mobile shortcut surfaces. Three things must align before that icon actually renders on your site: the image files in the right pixel sizes, the HTML link elements inside the page head pointing to those files, and the files themselves reachable from the same origin or via a path the browser can resolve. A common stumbling block is having only a high-resolution logo and assuming the browser will handle the rest — most browsers request specific pixel sizes and ignore anything that does not match. This article walks through the practical workflow for producing those PNG files, writing the matching markup, and deploying the result so the icon you intended actually appears.
What Getting a Favicon Onto a Website Actually Involves
A favicon is the small icon that appears in a browser tab, beside bookmarks, and in some taskbar or homescreen shortcuts. To get one onto your website, three things must line up: you need the icon image files in the right pixel sizes, you need the HTML link elements inside the page head that tell the browser where those files live, and those link elements must be served from the same origin or from a path the browser can resolve. A common stumbling block is having only a high-resolution logo and assuming the browser will handle the rest — most browsers request specific sizes and ignore anything that does not match. The Favicon Generator produces both halves of that pair in one place: the exact-size PNG files and the corresponding rel icon link snippets, so the filenames, sizes tokens, and media types stay aligned.
Why a Local Image Is the Most Reliable Source
A favicon set starts with one source image. Pulling the icon from a live remote site — scraping another domain's favicon — is fragile: the remote file can change, be served with restrictive CORS headers, or be an ICO container the browser cannot reuse. Working from a file you already own, such as a logo, a wordmark, or a monogram, gives you a stable, reproducible starting point and lets you control the composition before anything is rasterized. The Favicon Generator accepts PNG, JPEG, and WebP files up to 25 MB and rejects inputs above 40 million pixels after the browser decodes them. SVG and animated inputs are excluded by design to avoid scriptable vector content and ambiguous frame selection. If your source is rejected, convert it to a supported static raster format first — for example, rasterizing an SVG vector through the SVG to PNG Converter, or exporting a single still frame from an animated asset before generating icons. For a dependable publishing workflow, start with a simple high-contrast square logo. Anything more elaborate will lose detail at 16 and 32 pixels — the two sizes browsers request most often — and the center crop will cut off anything sitting near the edges.
Generate Favicon Files and HTML Links for Your Site
Follow these steps to produce a working favicon set and the matching HTML markup for your site.
- Pick a PNG, JPEG, or WebP file whose main subject sits near the center of the frame.
- Open the Favicon Generator and select that file from your computer — nothing is uploaded; the file is decoded locally inside your browser tab.
- Choose the square PNG sizes you actually need. The tool offers 16, 32, 48, 64, 128, 256, and 512 pixel outputs.
- Generate the icons. Each selected size is rendered independently from the decoded source at its requested natural dimensions, so a 16 pixel download is not a shrunken preview of the 128 pixel result.
- Inspect every result, especially the 16 and 32 pixel files, at 100 percent zoom. Browsers smooth pixels during resizing, so very small icons may soften thin lines or tiny lettering.
- Download each icon individually. Every result is an image/png Blob with a filename such as favicon-32x32.png, and downloading a link gives the exact dimensions named by that link.
- Copy the matching HTML link snippets the tool produces. Each line uses the standard rel icon relationship, an image/png type, a square sizes token, and a root-relative filename. Copy only the lines for files you will actually place on the site.
- Upload the chosen PNG files to the matching root paths on your server, or edit each href to match your real asset directory.
- Paste the link elements inside the document head of every page that should display the icon.
- Hard-refresh the page. If an old icon is still visible, clear site data or browser caches to force a redraw.
That is the full path from a local image to a working favicon on a live site: generate the files, copy the matching markup, upload the assets, and verify the deployed page source and network paths.
How the Center-Crop Rule Affects Your Source
A favicon has very little room for detail, so the source composition matters more than the raw resolution. The Favicon Generator uses a centered cover crop: it takes the largest possible square from the middle of the image, then resizes that square to each requested pixel size. A landscape picture loses equal portions from its left and right edges; a portrait picture loses equal portions from its top and bottom; a square source is not cropped at all. For example, an 800 by 500 landscape source becomes a 500 by 500 square starting 150 pixels from the left edge — losing 150 pixels from the left side and 150 pixels from the right side, because 800 minus 500 equals 300, divided by 2 equals 150 on each side. A 600 by 900 portrait source becomes a 600 by 600 square starting 150 pixels from the top, losing 150 pixels from the top and 150 pixels from the bottom, because 900 minus 600 equals 300, divided by 2 equals 150 on each side. This predictable rule is useful for logos, symbols, initials, and illustrations whose important subject is already near the center. It is not an interactive crop editor, so when the subject is intentionally off-center — for instance, a logo with a wide wordmark that needs to keep its left edge — reframe the subject with an image cropper first and then generate the icons from the reframed source.
Which Pixel Sizes You Actually Need
The generator offers seven selectable pixel sizes. Most sites only need a handful of them, and the sizes you skip should match the link lines you remove from the HTML so every href points to a file you actually upload.
| Pixel size | Commonly requested for |
|---|---|
| 16 x 16 | Classic browser tab icon, address-bar surfaces |
| 32 x 32 | High-DPI browser tab, bookmark bar, small taskbar icon |
| 48 x 48 | Windows taskbar shortcut, medium-density surfaces |
| 64 x 64 | Larger bookmark and sidebar surfaces |
| 128 x 128 | Desktop surfaces and larger preview tiles |
| 256 x 256 | High-DPI desktop, larger preview uses |
| 512 x 512 | Largest preview or asset uses |
Multiple icon links let a browser choose an appropriate resource, but the final selection remains browser behavior — the tool does not promise which size a particular browser, bookmark surface, or operating system will display. For most sites, generating 16, 32, and 48 covers the highest-value surfaces. Add 64 or 128 if you also target desktops where larger icons render. Skip sizes you will not place on the site: copying every link line without uploading the matching file produces a broken href that browsers will silently ignore.
Inspect, Deploy, and Clear Old Caches
Two checks protect you from deploying a broken set. First, inspect the smallest files at actual size before publishing. Open the 16 and 32 pixel downloads at 100 percent zoom and confirm the subject is recognizable and that no important detail was cut off by the center crop. Second, after deployment, verify the deployed page source and the network paths the browser actually requests — a typo in href or a missing file is the usual cause of a blank tab icon. If an old icon remains visible after you have deployed new files, clear site data or browser caches. Browsers cache favicons aggressively, and a hard refresh, or waiting for the cache to expire, is often the only way to force a redraw. A few composition points are worth noting before you publish: PNG and WebP sources can preserve transparency that already exists in the file, while JPEG sources begin with no transparent pixels. If your logo has transparent or pale edges, review the result against both light and dark backgrounds. The tool does not add transparency to an opaque source or remove a background automatically, so plan your source file accordingly.
What This Generator Does and Does Not Produce
This scope is deliberately narrow. The Favicon Generator creates PNG browser favicons and matching HTML snippets and nothing else. It does not create an ICO container, an SVG icon, an Apple touch icon, an Android icon set, a pinned-tab asset, a web app manifest, or a platform-specific package. If you need any of those, generate the PNG set first, then convert or wrap as required by a separate workflow. Everything runs in the current browser tab. The source image is decoded locally, drawn with Canvas, and never sent to a processing server. Object URLs used for previews and downloads are revoked when results are replaced or the page closes, and stale asynchronous render jobs cannot replace a newer selection. The tool prepares assets and markup; it does not modify your website, upload files, or confirm production cache behavior. The HTML snippets use the standard rel icon relationship, an image/png type, a square sizes token, and a root-relative filename — matching the format described in the MDN rel icon reference. If your site already declares an icon through a CMS or theme, the new link elements coexist with that declaration as long as the filenames do not collide.