To put a favicon in HTML, save one or more small PNG icons to your site and reference each one inside the head with a link tag that uses rel='icon', type='image/png', sizes='WxH', and href pointing at the file. The browser reads those link elements, downloads the matching files, and displays the one that best fits the current surface such as a tab strip, a bookmark, or a saved shortcut. Modern browsers accept multiple link rel='icon' entries in the same head, so you can supply several pixel sizes from the same source image and let the client pick the one that fits. The link tag itself is the only HTML you need; the file has to exist at the href you point to, and the path has to be reachable from your public site. A favicon is purely a visual identifier rather than an interactive element, so it never appears inside the page body and it carries no text. Everything else is a question of which file you choose to link, where you upload it, and which surfaces you want to cover. The HTML part is short, often only three or four link lines, but the file choices and the upload paths matter just as much as the markup.
The HTML favicon link tag explained
Each favicon in HTML is declared with one link element placed inside the document head. Four attributes carry the meaning: rel tells the browser this is an icon link, type declares the MIME type of the file, sizes gives the exact pixel dimensions in the WxH format, and href points to the public location of the file. A complete line for a 32 pixel icon typically looks like link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'.
The rel='icon' value is part of the WHATWG HTML Standard, and the MDN reference on the rel attribute documents the icon keyword along with the standard href, type, sizes, and media properties that icon links support. You can include more than one icon link in the same page and you can mix PNG and SVG sources by giving each format its own link element. When two link tags describe the same pixel size, the browser keeps the last one it parses and ignores the earlier match.
The link element is purely declarative. Browsers only fetch the file once they decide an icon is actually needed, so a missing or slow icon will not block the rest of the page from rendering. That separation is also why a typo in href or a 404 on the file is invisible until you look at the tab strip. The page itself will still load normally even if every favicon link points at nothing.
Generate and add the favicon in HTML
Use the Favicon Generator to produce the icon files and the matching link tags in one pass. The full sequence for getting a favicon into HTML looks like this:
- Open the Favicon Generator in your browser tab. Nothing is installed, and no signup is needed.
- Choose a PNG, JPEG, or WebP source image whose main subject sits near the center of the frame.
- Tick the square pixel sizes you want to publish. The tool supports 16, 32, 48, 64, 128, 256, and 512 pixel outputs.
- Click to generate, then inspect the on-page preview at actual size before downloading any file.
- Download each PNG you want to publish. Filenames follow the pattern favicon-WxH.png so they line up with the markup the tool produces.
- Upload the PNG files to your site at the paths you intend to reference from the HTML.
- Copy the matching HTML link lines from the tool and paste them inside your document head, above any stylesheet links.
- Reload the deployed page and confirm in the network panel that each href resolves to a real file with a 200 OK status.
The generator renders each requested size independently from the original decoded source, so a download labeled favicon-32x32.png contains exactly 32 by 32 pixels rather than a thumbnail scaled up from the on-page preview. Every snippet it produces uses the standard rel='icon' relationship, an image/png MIME type, the matching square sizes token, and a root-relative href, which keeps the files and the markup aligned without manual edits.
Pick a source image that survives shrinking
A 16 pixel square has very little room for detail, so the source image matters more than the markup. High-contrast shapes, single-letter marks, and simple symbols read clearly at small sizes, while thin strokes, fine gradients, and full wordmarks usually dissolve into mush. Square logos, monograms, and centered illustrations are the easiest inputs because nothing important sits near the edges.
The Favicon Generator uses a centered cover crop. It takes the largest possible square from the middle of the source image and resizes that square to the requested size. A landscape source loses equal portions from its left and right edges, a portrait source loses equal portions from the top and bottom, and a square source is not cropped at all. That predictable rule is what makes centered subjects the safest choice.
If the most important part of your image sits off-center, crop it first with the Image Cropper so the subject lands in the middle, then feed the cropped square into the favicon tool. The generator is not an interactive crop editor, so doing the cropping step beforehand is the difference between an icon that survives shrinking and one that loses its main subject to the edge.
A square source above 256 by 256 pixels is a good starting point. It is large enough that each downscaled size keeps clean edges, and small enough that the decode step stays well under the tool's 40 million pixel safety ceiling. Inputs are limited to PNG, JPEG, and WebP up to 25 MB, and SVG or animated formats are deliberately excluded.
Read the generated HTML link lines
Each PNG the Favicon Generator produces comes with a matching link line you can paste into the page head. The lines follow a single shape: rel='icon', type='image/png', sizes='WxH', href='/favicon-WxH.png'. They are easy to scan and edit, and the filenames already match the markup so you do not have to keep the two in sync by hand. Only copy the lines for files you actually plan to publish; leftover snippets pointing at files you never uploaded will simply 404 in the network panel.
The table below summarizes what each generated size is most often used for. Browsers decide which file to actually display, so treat these as practical roles rather than hard guarantees.
| Pixel size | Typical surface |
|---|---|
| 16x16 | Smallest tab strip fallback on standard displays |
| 32x32 | Standard browser tab and bookmark icon |
| 48x48 | Desktop shortcut icon on some operating systems |
| 64x64 | High-DPI tab and pinned surface |
| 128x128 | Larger bookmark icon and link preview |
| 256x256 | High-resolution launcher and social share card |
| 512x512 | Reference source resolution for further downscaling |
For most websites, publishing the 16, 32, and 48 pixel files covers the common tab, bookmark, and shortcut surfaces. Larger sizes are useful when you also share the page on platforms that fetch an icon at higher resolution for their own previews, and the 512 pixel file doubles as a clean source for any tool that wants to downscale further.
Where to put the icon files on your site
The href in each link tag has to match the real public URL of the file. The Favicon Generator writes root-relative paths such as /favicon-32x32.png by default, which means the icon files should sit at the root of your site, for example at https://example.com/favicon-32x32.png. That placement matches the convention that browsers check /favicon.ico when no link tag is present, so an icon at the root is the safest default for the fallback path.
If your files live in a subdirectory, edit each href before pasting. A line that points to /assets/favicon-32x32.png has to match an actual file at exactly that path, and a single broken href will silently fail to render without any error in the page. Some teams keep every static asset under /public, /static, or /assets; whatever you choose, the path in the link tag and the path on the server have to agree, including the case, because case-sensitive servers will treat favicon-32x32.png and Favicon-32x32.png as two different files.
A small set of PNG icons weighs very little compared with most page assets, so it is fine to host them next to your CSS and JavaScript. Just confirm the hosting layer is not stripping or renaming files on upload, and that no redirect sits between the link href and the actual bytes the browser receives.
Verify the favicon after deployment
After pasting the link tags, view the page source and confirm the icon lines are actually inside the head with the correct href values. Open the browser's network panel and reload the page; each favicon URL should return a 200 OK status and an image/png MIME type, not a redirect to a login page or a 404. The link element is declarative, so the browser fetches the file lazily, which means the requests may not appear until the tab is actually shown to the user.
If an old icon keeps showing after the HTML and files have both been updated, the cause is almost always cached data. Browsers cache favicons aggressively and across sessions, and they may also pin them from the history view. Hard reload the page, clear site data for the domain, and close any tab that has been open since before the change. On shared machines, also clear the browser's favicon cache by restarting the browser after deleting the cached entries in the profile directory.
A quick way to confirm the new files are being served is to open one of the icon URLs directly in a new tab. The image should render at its declared size, and saving it should give back a PNG with the matching pixel dimensions. If the rendered file is the wrong size or format, the link line you pasted does not match what the generator produced and the href needs a correction.
Favicon HTML problems and quick fixes
A few recurring issues show up when an icon does not look right after the link tags are in place.
If the icon looks blurry at the smallest sizes, the cause is usually the source image rather than the HTML. Thin lines and small text smooth out when the browser resizes them down to 16 pixels, so start with a bolder source and inspect the 16 and 32 pixel downloads at actual size before publishing. The generator renders each size independently from the decoded source, so the blur comes from the composition, not from the tool reusing a small preview.
If the subject appears cut off in the icon, the source was not centered. The Favicon Generator always crops to a centered square, so an off-center subject has to be re-cropped in a dedicated cropper first, then fed back into the generator. A landscape picture loses equal amounts from the left and right edges, and a portrait picture loses equal amounts from the top and bottom, so plan the source composition around that rule.
If the browser ignores the PNG link lines and shows nothing, an old /favicon.ico at the site root may still be picked up. The HTML link tags take precedence over the legacy fallback when both are present, but a stale cache or a server redirect can still serve the older file. Replace the root favicon.ico or rename it so the new PNGs win, and clear the favicon cache so the change is visible immediately.
If the icon shows a pale box around the subject, the source PNG had transparency and the tab strip color is showing through. Inspect the icon on both light and dark tab backgrounds, and if the edges look weak on dark mode, add a subtle outline or a colored background plate in your image editor before regenerating. PNG sources keep transparency that already exists, while JPEG sources start with no transparent pixels, so the source format also affects how the icon sits on different tab colors.
If you're weighing options, Favicon Too Big? Make Square PNG Sizes That Fit covers this in detail.
If you're weighing options, Icon Too Large? Resize It to Exact Favicon Sizes covers this in detail.