Creating an icon file is only half the job. Your site must serve the file and point the page to it. This guide uses a PolishTools package deployed at the site root.
Identify the files in the ZIP
favicon.ico contains several small sizes, while icon-*.png are individual images. The package also includes apple-touch-icon.png, icon-maskable-512.png, site.webmanifest and integration.html. The integration file is a head-tag reference, not a complete page.
Root and subdirectory paths
Generated tags and manifest entries start with /, such as /favicon.ico. If the app runs under example.com/app/, decide whether assets belong there or at the root. Match link href values, manifest icon src values and start_url to the deployment.
Check small and maskable icons
Open the 16px PNG at actual size and look for merged lines. A maskable icon leaves space around important artwork for system cropping. PolishTools creates it separately from the regular icons.
Linking a manifest does not create an offline app. Installation and offline behavior depend on additional site implementation and browser requirements.
Example: an Astro site at the root
You serve an Astro site at the domain root and want to replace its favicon.
Steps
- Place the image, ICO and manifest files in the project public folder.
- Add the integration tags to the layout head and remove conflicting old favicon references.
- Build and deploy, then verify that /favicon.ico and /site.webmanifest load.
Result
Once the files are served and the page references them, the integration is in place. If an old icon remains, check caching and competing head tags.
Frequently asked questions
Can I use the manifest unchanged?
Check the app name, colors, start URL and icon paths first. Subdirectory deployments may need changes.