--- title: The rel="icon" Link Tag Explained description: The tag tells the browser where your favicon is. What rel, href, type and sizes each do, where the tag goes, and the modern set worth shipping. canonical: https://favicontools.com/glossary/rel-icon-link-tag --- # The rel="icon" Link Tag Explained The tag in a page's tells the browser which file to use as the favicon. href points to the image, type gives its MIME type, and sizes lists the pixel dimensions the file holds so the browser can pick the best match. You can include several icon link tags (one per size or format), and the browser chooses the most suitable. ## The four things the tag carries rel="icon" declares the relationship: this file is an icon for the document. href is the path to the image. type is the MIME type (image/x-icon, image/png, image/svg+xml), which lets a browser skip a format it can't use. sizes lists the dimensions the file contains, like "32x32", or "any" for a scalable SVG. The browser reads every icon link in the head, then picks the one that best fits the surface it's drawing: the tab, a bookmark, a larger tile. That's why a real-world head carries several of these tags rather than one, and why they all belong in the head, before the body. ## A modern icon link set ```html ``` Five tags, each aimed at a different consumer. The browser ignores the ones it doesn't understand and picks the best of the rest. ## What each attribute does | Attribute | Purpose | | --- | --- | | rel | The relationship: "icon" for a favicon, "apple-touch-icon" for iOS | | href | The path to the image file | | type | The MIME type, so a browser can skip formats it can't render | | sizes | The dimensions the file holds, e.g. "32x32", or "any" for SVG | > **sizes="any" is for scalable icons:** Give an SVG favicon sizes="any" so a browser that supports SVG prefers it over the fixed-size PNGs, and downscales it perfectly to whatever the surface needs. A raster icon should carry its real dimensions instead. ## rel="icon" FAQ ### Do I need the type attribute on an icon link? It's optional but useful. type lets the browser skip a format it can't use without downloading it first. Worth including on PNG and SVG links, and harmless everywhere else. ### Can I have more than one icon link tag? Yes, and you usually should. Declaring several sizes and formats lets each surface pick the closest match instead of downscaling one large image for the tab and upscaling it for the home screen. ### Where does the link tag go? In the document . The browser requests the favicon while parsing the head, so a tag placed in the body arrives too late to be used on first load.