Creating the image is the first step. Your website must also serve it at a reachable URL and tell browsers where to find it. You can install the generated pack on a static site or adapt the same paths in your application framework.
1. Put the files where your website can serve them
Extract your favicon pack and place its image files and site.webmanifest in your public web directory. For a conventional static site this is often the same directory as index.html. Frameworks commonly provide a public directory, although their file conventions differ.
2. Add these tags inside the head element
These root-relative paths assume the files are at the domain root. If your site lives in a subdirectory, adjust the tags and the paths inside the manifest to match. Do not paste the complete example document from install.html inside an existing document; copy only its link tags.
3. Customize the web manifest
Open site.webmanifest and replace the placeholder name and short_name with your project’s name. Review start_url, scope, and theme colors. A manifest describes an app; it does not by itself add offline functionality or make every site installable.
4. Verify the actual URLs
Open each image URL directly. It should return an image, not your home page or a login screen. Run the favicon checker to review the server-delivered declarations. Its results do not test every browser or prove that a search crawler can access your site.
5. Allow for caches
Browsers can hold onto old favicons. Try a private window, clear the relevant site cache, and confirm your CDN serves the new file. Keep the final icon URL stable. Search results can update later than your browser, and a favicon is never guaranteed to appear.
References: MDN link element and Google favicon guidance.