How to Find a Website’s Favicon in HTML
Locate a site’s favicon in its HTML head, resolve the file path, spot dark mode variants and check whether the icon is vector artwork you can actually use.
Contents
A website’s favicon is almost always declared inside the page’s head section with a link element whose rel attribute contains the word “icon”. The href attribute on that element is the location of the icon file. If a page declares no icon at all, browsers commonly fall back to requesting a file named favicon.ico from the root directory of the site, so the favicon can exist even when nothing in the HTML mentions it.
A favicon is the small brand mark shown in browser tabs, bookmarks and history lists. It may be a raster image, meaning a grid of pixels such as a PNG or ICO file, or a vector image, meaning shapes described mathematically as paths, usually in SVG format. That distinction matters later if you intend to use the icon as logo artwork.
What a favicon declaration looks like in the head
A typical head section can contain several icon-related lines, each serving a different device or context. The paths below are placeholders, not real file locations.
<head>
<link rel="icon" href="[path-to-svg-icon]" type="image/svg+xml">
<link rel="icon" href="[path-to-png-icon]" sizes="[width]x[height]" type="image/png">
<link rel="apple-touch-icon" href="[path-to-touch-icon]">
<link rel="manifest" href="[path-to-manifest-file]">
</head>| Attribute value | What it usually points to | What to note |
| rel="icon" | The standard tab and bookmark icon | May appear several times with different type, sizes or media attributes |
| rel="shortcut icon" | The same role as icon, in older markup | A legacy form still found on many sites |
| rel="apple-touch-icon" | A larger icon for home-screen shortcuts on Apple devices | Usually a raster PNG |
| rel="mask-icon" | A single-color SVG used by Safari for pinned tabs | Can be useful vector evidence, but it is a monochrome silhouette |
| rel="manifest" | A web app manifest file, not an image | Contains its own list of icons, often in several sizes |
Step-by-step: locating the favicon file
- 1. Open the page in a desktop browser, right-click an empty area and choose the option to view the page source.
- 2. Use the browser’s find command to search for “icon”. This catches icon, shortcut icon, apple-touch-icon and mask-icon declarations in one pass.
- 3. Search again for “manifest”. If a manifest link exists, open that file and read its icons list, which records each icon’s source, sizes and type.
- 4. Check whether the head contains a base element. If it does, relative paths in href attributes resolve against the base element’s location instead of the page’s own location.
- 5. Open the browser’s developer tools and inspect the head in the Elements or Inspector panel. This shows the live document, which can differ from the source view because scripts may add, remove or swap icon links after the page loads.
- 6. In the Network panel, reload the page and filter by “icon” or by image requests. This shows which icon files the browser actually requested, including a root favicon.ico fallback that never appears in the markup.
- 7. Open each candidate file directly in a browser tab to see it at full size, then save it if you have a legitimate reason to keep a copy.
The search is complete when you can account for every icon reference in the live head, every icon listed in the manifest, and every icon request shown in the Network panel. If none of these exist and the Network panel shows a failed favicon.ico request, the site simply has no favicon.
Finding dark mode favicon variants
Sites that adapt their favicon to light and dark interfaces generally use one of two techniques, and each leaves a different trace.
- A media attribute on the link element: look for two icon links where one carries a media condition such as (prefers-color-scheme: dark). Each link points to a separate file, so you need to collect both.
- A single SVG with an internal style rule: open the SVG in a text editor and look for a style block containing @media (prefers-color-scheme: dark). Here one file holds both appearances, with fills or strokes switched by the media query.
- Manifest icons: some manifests list icons with a purpose value such as monochrome or maskable. These are separate treatments of the mark rather than dark mode variants, but they are worth recording if you are cataloguing every version.
To confirm which variant appears, switch your operating system between light and dark appearance, or use the color-scheme emulation available in many browsers’ developer tools, then reload. Browsers cache favicons aggressively, so a hard reload or a fresh browser profile may be needed before a change becomes visible. Note that the media query responds to the system or browser color preference, which is not always the same as the color of the tab strip the icon sits on.
Checking whether the favicon contains vector paths
A file extension is not proof of vector content. An SVG can wrap an embedded bitmap, and an ICO file is a container of raster images, sometimes several sizes in one file. Inspecting the contents is the only reliable check.
- Open the SVG in a plain text editor. SVG is readable XML markup.
- Look for path, polygon, rect, circle or ellipse elements. These describe true vector geometry that scales without pixelation.
- Look for an image element, especially one whose href begins with embedded data. That means the SVG contains a raster picture, and the result will blur when enlarged.
- Look for text elements. These rely on a font being available when the file is rendered, so the lettering may change or fall back to a default typeface on other systems. For logo use, lettering converted to outlined paths is more dependable.
- Treat ICO, PNG and other bitmap formats as raster artwork regardless of how sharp they look at small sizes.
Why a favicon is rarely the right source for logo artwork
Favicons are usually reduced versions of a brand mark: the symbol without the wordmark, tightly cropped, sometimes with details removed or colors simplified so it reads at tiny sizes. Even a clean vector favicon may not match the proportions, colors or spacing of the full logo. Finding a favicon in public HTML also does not grant permission to reuse it; the mark remains the owner’s brand asset.
For production work, source master artwork from the brand owner: an official brand guidelines document, a press or media kit, or a direct request to the company. When you receive files, confirm that the version matches the intended use, including the full lockup versus the symbol alone, the light or dark background variant, the color mode for screen or print, and any usage terms attached to the download.
Final verification checklist
- Every icon link in the live head has been resolved to an actual file, accounting for any base element.
- Manifest icons and any root favicon.ico fallback have been checked.
- Light and dark variants have been identified, either as separate files or as media rules inside one SVG, and both appearances have been viewed.
- Each file’s contents, not just its extension, have been inspected for vector paths, embedded bitmaps and live text.
- If the artwork is needed beyond reference, an authorized source and usage terms have been confirmed.
Gaps to verify for your own setup
No browser-specific evidence was supplied for this guide. Support for SVG favicons and for the media attribute on icon links has varied between browsers and versions, as has the logic a browser uses to choose among several declared icons. Developer tool menu names and the location of color-scheme emulation also differ by browser and release. Confirm these details against the documentation for the browser version you are testing in.