Favicon HTML Link Tags: Complete Code Reference

A modern head snippet

Link an SVG icon with sizes=any, a 48×48 PNG fallback, the root ICO, the 180×180 Apple touch icon, and the web manifest. Favicon.now places this exact snippet in every download.

Connected next stepFavicon Formats Compared: SVG, PNG and ICO for the closest prerequisite or comparison.

<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">Copy

Path rules that prevent breakage

Root-relative URLs such as /favicon.svg survive nested routes. Relative paths such as favicon.svg resolve against the current document path and often break on article or product pages.

Connected next stepFavicon vs Logo, App Icon and Social Preview for the next connected implementation decision.

Cache it without trapping yourself

Icons benefit from long-lived caching, but changes need a new filename or query version. Keep Google’s favicon URL stable when possible and avoid rotating it on every deployment.

Connected next stepOpen the most relevant production tool and verify the decision with a working output.

Match declarations to the files you really ship

Treat each link element as a contract. The MIME type, sizes value, and URL must agree with the response and decoded image. A copied snippet that names absent PNGs is worse than a smaller stack whose files all exist.

Use one scalable browser candidate, one explicit square raster fallback, the root ICO, a dedicated Apple touch icon, and the manifest. Add more candidates only for a measured client requirement.

Verify markup from a nested production page

Open a route several levels below the homepage and resolve every href exactly as the browser does. This catches relative paths that accidentally point below /articles/example/ instead of the hostname root.

Then request each URL, record its final response, Content-Type, dimensions, and cache policy. Inspect the rendered head after framework, plugin, and theme processing to find duplicate candidates.