logoredraws.com

How to Find the Favicon Linked in a Page's HTML

Locate the favicon declared in a page's HTML, find the actual file, and check whether it contains real vector paths before you use it as logo artwork.

Published

Contents
  1. The short answer
  2. Step by step: locating the favicon on a live page
  3. Listing every icon with the browser console
  4. Reading what you found
  5. Checking whether the favicon is real vector artwork
  6. Making sure it is the right artwork for your use
  7. Gaps and caveats

The short answer

View the page's source and look in the head section for link elements whose rel attribute contains the word icon. The href attribute of each of those elements points to a favicon file. Common variants are rel="icon", the older rel="shortcut icon", rel="apple-touch-icon" for home-screen icons on Apple devices, and rel="mask-icon" for Safari pinned tabs. A rel="manifest" link is also relevant: it points to a web app manifest, which can list more icons. If the page declares no icon at all, browsers typically request a file named favicon.ico from the root of the site.

<head>
  <link rel="icon" href="…" type="image/svg+xml">
  <link rel="icon" href="…" sizes="32x32" type="image/png">
  <link rel="apple-touch-icon" href="…">
  <link rel="manifest" href="…">
</head>

The snippet shows typical favicon declarations. The href values are placeholders. A favicon is the small icon a browser shows in tabs, bookmarks and history. Whether the file is useful as logo artwork depends on its format. Vector artwork describes shapes as paths, which are outlines defined by anchor points and curves, so it scales without losing sharpness. Raster artwork stores a fixed grid of pixels. SVG is the format that can carry vector paths. ICO and PNG are raster formats.

Step by step: locating the favicon on a live page

  • 1. Open the page in a desktop browser and choose View Page Source from the right-click menu. This shows the HTML as the server delivered it.
  • 2. Search the source for the word icon. Note every link element whose rel value contains icon, and any rel="manifest" link.
  • 3. For each match, record the href, type and sizes attributes. A relative href is resolved against the page's address, or against a base element if the page has one.
  • 4. If the source shows nothing, open developer tools and check the Elements or Inspector panel. Scripts and frameworks can add or replace favicon links after the page loads, so the live document can differ from the original source.
  • 5. Open the Network panel, reload the page, and look for image or icon requests. This shows which files the browser actually fetched, including the root favicon.ico fallback.
  • 6. Open each href in a new tab to confirm the file loads, then save it.
  • You are done when you have every declared icon file saved, you know which rel, type and sizes values each one was declared with, and each file opens.

Listing every icon with the browser console

On pages with many declarations, a one-line query in the developer tools console is faster than reading the source. The selector rel~="icon" matches rel values that contain icon as a separate word, so it catches both icon and shortcut icon. Apple touch and mask icons are added to the selector separately. The href property returns the fully resolved address, and the query reads the live document, so it includes links that scripts inserted.

Array.from(document.querySelectorAll(
  'link[rel~="icon"], link[rel="apple-touch-icon"], link[rel="mask-icon"], link[rel="manifest"]'
)).map(l => ({ rel: l.rel, type: l.type, sizes: l.sizes ? l.sizes.value : '', href: l.href }))

An href that begins with data: means the image is embedded directly in the HTML rather than stored as a separate file. Open that value in a new tab and save it, or decode it to recover the file. For a manifest, open the linked JSON file and read its icons array. Each entry gives a src, and usually sizes and type. These icons are used when the site is installed as an app and are often larger than the tab favicon.

Reading what you found

rel value | Typical role | What to expect
icon | Standard favicon for tabs and bookmarks | SVG, PNG or ICO; may appear several times with different types or sizes
shortcut icon | Older form of icon, still common on established sites | Often an ICO file
apple-touch-icon | Home-screen icon on Apple devices | Usually a PNG, so raster rather than vector
mask-icon | Legacy Safari pinned-tab icon | Single-colour SVG; a color attribute sets the tint
manifest | Points to a web app manifest, not an image | JSON file listing app icons

Checking whether the favicon is real vector artwork

  • Open the file in a text editor, not only an image viewer. An SVG is XML text containing an svg element. A type of image/svg+xml or an .svg extension suggests SVG, but neither proves the file contains vector geometry.
  • Look for shape elements such as path, circle, rect, ellipse, polygon and line. These are true vector geometry.
  • An image element inside the SVG, especially one with an embedded data: source, means a bitmap is wrapped in an SVG container. It will pixelate when enlarged.
  • Text elements depend on the fonts installed on the viewer's device and can render in a fallback typeface. For dependable logo use, lettering should be converted to outlines, meaning paths.
  • A style block with a prefers-color-scheme media query means the icon changes for dark mode. Check how it looks under both system settings so you know which version you have.
  • The viewBox attribute defines the drawing's coordinate space and proportions. Favicons are normally square, so a full horizontal logo will rarely appear as-is.
  • ICO files are containers for one or more bitmaps, stored as BMP or PNG images. They hold no vector paths. Converting an ICO or PNG to SVG does not create vector geometry; the shapes would have to be traced or redrawn.
  • As a quick visual test, open the SVG in a browser tab and zoom in a long way. Vector edges stay crisp, while embedded bitmaps turn soft or blocky.

Making sure it is the right artwork for your use

A favicon is usually a reduced version of a brand's identity, such as a symbol or monogram, simplified to read at very small sizes. It often drops the wordmark, merges fine details and adjusts stroke weights. Even a clean SVG favicon is therefore not a substitute for the master logo when you need artwork for print, signage or large displays. Being able to download a file from a website also does not grant permission to reuse it. For an authorized vector logo, look for official brand or press resources published by the owner, or request the files from the owner directly. Then compare shapes, proportions and colours against that source. Choose the favicon file if your goal is reproducing the tab icon, and the official master artwork for anything else.

Gaps and caveats

The supplied material contains no browser- or version-specific evidence. Menu names, keyboard shortcuts and the rules browsers use to choose between several declared icons differ by browser and version, so check your browser's own documentation when exact behaviour matters. Browsers also cache favicons aggressively, so the icon in a tab can be an older copy. The Network panel or the console query shows which file the page currently declares and serves.