Module 14: Metadata, SEO, and Resource Loading
Favicons and Site Icons
Add a favicon and understand the common icon relationships used by browsers and devices.
A favicon helps visitors recognize a site in browser tabs, bookmarks, and history. The simplest setup can use a root favicon.ico, while a page can also link to PNG or SVG icons.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
The exact set of icons depends on the site’s needs and target devices. A small square icon should remain recognizable at small sizes. Do not use a detailed logo that becomes an indistinct blur when reduced to 16 pixels.
A web app manifest is a separate JSON file that describes information such as the application’s name, icons, and start URL for installation experiences. It is not required for every website. If the page links to /site.webmanifest, that file needs to exist at the matching public path; otherwise, the browser reports a 404.
Open the Network panel and filter for favicon, icon, or manifest. Confirm every referenced file exists and returns the intended content type. Remove references to assets you do not plan to provide.