How to Add a PNG Favicon in HTML
Add a PNG favicon to your site with one link element in the HTML head, then refine your logo artwork on the pixel grid so it stays legible at tiny sizes.
Contents
The short answer
To use a PNG as your favicon, export your logo mark as a small square PNG, upload it to your site, and reference it with a link element inside the head section of your HTML page. The link element needs rel set to icon, type set to image/png, and href pointing to the file's location on your server.
<head>
<link rel="icon" type="image/png" href="/favicon.png">
</head>A favicon is the small icon a browser shows in tabs, bookmarks and history lists to identify a site. The PNG is a raster file: it stores a fixed grid of pixels rather than the mathematical paths of your vector logo. Your vector artwork is the source, and the PNG is a rendered output made from it for one specific display size.
Key terms
- Vector artwork: a logo built from paths, meaning points and curves defined mathematically, so it can be scaled without losing sharpness.
- Raster export: converting vector paths into a fixed grid of pixels, such as a PNG.
- Pixel grid: the grid of whole pixels the final image is made of. At favicon sizes, each pixel is visible and matters.
- Pixel grid refinement (pixel fitting or hinting): adjusting shapes so edges, strokes and gaps land on whole pixels instead of falling between them, which reduces blur from anti-aliasing.
- Anti-aliasing: the semi-transparent edge pixels a renderer adds when a shape edge does not align with the pixel grid. Acceptable at large sizes, it often looks fuzzy at favicon scale.
Step by step
1. Choose the right part of the logo
A full logo with a wordmark rarely survives at favicon size. Use the symbol, monogram or a single distinctive letter instead. This is a design recommendation rather than a technical requirement: the browser will display whatever square image you give it, but fine type and thin details usually become unreadable.
2. Set up a square artboard sized to the output
In your vector editor, create a square artboard whose dimensions match the pixel size you plan to export, and turn on pixel preview or snap to pixel grid if your software offers it. Working at the target size lets you see exactly how the paths will rasterize, rather than discovering problems after export.
3. Refine the paths on the pixel grid
- Align straight horizontal and vertical edges to whole-pixel boundaries so they render as crisp lines.
- Make strokes and gaps whole-pixel widths; a width that falls between pixels tends to render as a grey, blurry band.
- Simplify or remove details that cannot be represented by at least one full pixel.
- Check counters, the enclosed spaces inside letters such as o or a, so they do not fill in.
- Keep enough contrast against both light and dark browser tab backgrounds; a transparent background is supported by PNG, but test how the mark reads on each.
Refinement is size-specific. A mark fitted for one pixel size may need separate adjustments for another, which is why designers often keep a dedicated small-size version of the icon instead of simply scaling the master logo down.
4. Export the PNG
Export at exactly the artboard size, at 1x, with transparency if you want it. Keep the file square. Name it clearly, for example favicon.png, and if you export several sizes, include the size in each filename so they are easy to tell apart.
5. Upload the file and add the link element
Place the PNG on your server and add the link element to the head of every page, or to the shared template or layout file that generates the head. The href can be a path relative to the site root, as in the example above, or relative to the page.
If you exported more than one size, add one link element per file and describe each with the sizes attribute, written as width x height in pixels. The browser can then pick the most suitable file.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">The sizes values shown are illustrative; the attribute should state the actual pixel dimensions of each file you export. The supplied brief contained no confirmed list of required sizes per browser or platform, so check current browser and platform documentation before settling on a final set.
Verify the result
- Open the PNG's address directly in the browser to confirm the file loads and the path is correct.
- Reload the page and check the tab icon. Browsers cache favicons aggressively, so try a hard refresh, a private window or a different browser if the old icon persists.
- In the browser's developer tools, check the Network panel for a failed request to the icon file and inspect the head to confirm the link element is present on the rendered page.
- View the tab in both light and dark browser themes to confirm the mark stays legible.
- Compare the live icon at actual size with your pixel preview; if edges look soft, return to the refinement step.
Caveats on the source artwork
A file extension does not prove what a file contains. An SVG or AI file may embed raster images rather than clean paths, and a PNG labelled as a logo may be a low-resolution capture. Inspect the artwork itself before using it as a source. An extension also says nothing about permission: confirm you have the right to use and adapt the logo before publishing it as a favicon.
Gaps in this guide
No specific evidence was supplied about browser support details, required sizes for particular platforms, file-size limits or how individual browsers choose among multiple icons. The markup and steps above reflect general HTML practice; confirm platform-specific requirements, such as icons for mobile home screens, against current official documentation.