Favicon and ICO — Delivery workflow

Worked example

Keep the file names Chatcument gives you, put favicon.ico in the site root and link the PNGs from the page head and manifest.

A typical layout is /favicon.ico for the multi-size file, /icons/favicon-32.png for the tab, /apple-touch-icon.png for iOS, and /icons/favicon-192.png and favicon-512.png listed in the manifest. In the HTML head, a link with rel="icon" and sizes="32x32" points to the PNG, and a link with rel="apple-touch-icon" points to the 180 pixel file.

Picture an agency handing a brand refresh to a developer. Send one folder with the eight PNGs, the ICO and the source artwork, plus a short text note that says which file goes in which link tag. Add a version to the folder name, such as brand-icons-v2, so nobody mixes old and new sets.

A common mistake is publishing the files but forgetting the link tags, or leaving the old file at the same URL. Browsers and CDNs cache icons for a long time, so change the file name or add a version query when you replace an icon, and check the network panel for a 200 response.

Keep the original square source in your repository. Because the tool is deterministic for a given image, re-running it next quarter with the same file reproduces the same set, which makes handover and audits simple. Add a line to the hand-off note saying which source file produced which set.

Square mark or logo

PNG sizes + multi-size ICO

Generating files does not publish them: the icons only appear after they are uploaded and referenced from your pages.