How to Find a Page's Favicon Address in HTML
Find a favicon's address in a page's HTML: which link tags to check, how to resolve the path, and how to tell whether the icon is true vector artwork.
Contents
A page's favicon address is usually declared in the head section of its HTML, in a link element whose rel attribute contains the word icon. The value of that element's href attribute is the favicon's address. If the page declares no icon, browsers commonly fall back to requesting a file named favicon.ico from the root directory of the site. This guide shows where to look, how to turn the href value into a usable file location, and how to judge whether the file you find is suitable vector logo artwork.
The Short Answer: Look in the Head for Icon Link Elements
Open the page source and search for link elements inside the head. The ones that point to icon files carry one of a small set of rel values. Each may reference a different file, so a single page can have several favicon addresses.
| rel value | What it usually points to |
| icon | The standard favicon. May be ICO, PNG or SVG, often with a type and sizes attribute. |
| shortcut icon | A legacy form of icon, still found on older sites. Treated like icon by browsers. |
| apple-touch-icon | A larger raster image used when a page is saved to an Apple device home screen. |
| mask-icon | A single-color SVG used by Safari for pinned tabs, paired with a color attribute. |
| manifest | Not an icon itself, but a web app manifest file (JSON) whose icons list can name further icon files. |
A typical declaration looks like the snippet below. The placeholder values stand in for whatever path the site actually uses.
<head>
<link rel="icon" href="ICON-PATH.svg" type="image/svg+xml">
<link rel="icon" href="ICON-PATH.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="TOUCH-ICON-PATH.png">
<link rel="manifest" href="MANIFEST-PATH.webmanifest">
</head>Two terms matter for what follows. Vector artwork describes shapes mathematically, as paths: sequences of points, lines and curves that can be scaled to any size without losing sharpness. Raster artwork, such as PNG or most ICO content, is a fixed grid of pixels that blurs or turns blocky when enlarged. Only an SVG favicon can contain vector paths, and even then it is not guaranteed to.
Step by Step: Locating the Favicon Address
- 1. Open the page in a desktop browser and view its source. In most browsers this is available from the right-click menu as View Page Source, or with Ctrl+U on Windows and Linux.
- 2. Use the find function to search for the word icon. This catches icon, shortcut icon, apple-touch-icon and mask-icon in one pass.
- 3. Note every matching link element and copy its href value, along with any type, sizes, media or color attributes.
- 4. Also search for manifest. If present, open the manifest file it references and read its icons list, which gives additional file paths and declared sizes.
- 5. If nothing matches, the site may rely on a favicon.ico file in its root directory, or the icon may be added later by JavaScript (see the next step).
- 6. Open the browser's developer tools and inspect the live head in the Elements panel. This shows the document after scripts have run, which can differ from the raw source.
- 7. As a final check, reload the page with the Network panel open and filter for image requests or for the text icon. The request the browser actually made confirms which file it loaded.
Turning the href Value into a Full File Location
The href value is often relative rather than complete. A value beginning with a single slash is resolved from the root of the site's domain. A value with no leading slash is resolved relative to the folder of the current page. A value beginning with two slashes, or with a protocol, is already absolute and may point to a different host, such as a content delivery network. Check whether the head contains a base element, because its href changes the starting point for every relative path on the page.
The simplest way to avoid resolving paths by hand is to hover over or click the href value in the developer tools Elements panel, which typically opens the resolved file, or to copy the full request location from the Network panel.
Recognizing Whether the Favicon Is Usable Vector Artwork
Once you have the file, confirm what it actually contains before treating it as logo artwork. A file extension or a type attribute of image/svg+xml tells you the format label, not the content. An SVG can be pure vector paths, or it can be a thin wrapper around an embedded bitmap.
- Open the SVG in a text editor and look for path, circle, rect, polygon or similar shape elements. These indicate genuine vector geometry.
- Search for an image element, especially one whose href begins with data:image/png or data:image/jpeg. That means a raster picture is embedded inside the SVG and will not scale cleanly.
- Check for text elements. Live text depends on fonts that may not be installed elsewhere; logo artwork intended for delivery usually has lettering converted to outlines (paths).
- Zoom far in within a browser or vector editor. True vector edges stay crisp; embedded raster content shows pixels.
- Note any media attribute such as prefers-color-scheme on the link element, or style rules inside the SVG. These signal light and dark variants, so you may need more than one file.
- For ICO and PNG files, read the declared or actual pixel dimensions. These are raster files and cannot be converted into faithful vector artwork without redrawing or tracing.
Confirming the Version Fits Your Intended Use
A favicon is a simplified, small-scale rendering of a brand mark. It is frequently cropped to a symbol, given heavier strokes, or stripped of the wordmark so it reads at tiny sizes. That makes it a poor substitute for a full logo in print or large-format work, even when it is a clean SVG.
Finding a file in a page's HTML also does not grant permission to reuse it. If you need a logo for publication, partnership material or print, obtain it from the brand's official source, such as its press, media or brand guidelines page, or request it directly from the owner. Those sources typically state which versions exist, which color and clear-space rules apply, and what uses are allowed. Compare the favicon you located against that official version to confirm it is current and matches the intended context.
Gaps and Limits of This Guide
No subject-specific evidence was supplied for this article, so it does not name particular sites, brands or download locations, and it does not state exact browser rules for choosing between multiple declared icons. Browsers differ in how they prioritize formats and sizes, and that behavior changes over time; consult current browser documentation if the choice between several icon declarations matters for your project.