Start with artwork that survives at 16 pixels
Use a square source with a clear silhouette, strong contrast and very little fine detail. Thin lettering and photographic textures may look acceptable at 512 pixels but disappear in a browser tab. Test the smallest result against both light and dark browser chrome.
Leave a little space around the main mark. Artwork touching every edge can look cramped when a platform adds a mask, rounded corners or its own background treatment.
Know what each file is for
favicon.ico remains a useful compatibility file because it can contain several small raster sizes in one container. A 180 × 180 Apple touch icon supports saved shortcuts on Apple devices, while 192 × 192 and 512 × 512 PNG files are commonly referenced by a web app manifest.
An SVG favicon can stay sharp at many sizes, but it should be simple, self-contained and tested in the browsers your audience uses. Keep a conventional ICO fallback when broad compatibility matters.
- favicon.ico: include small tab-ready sizes
- apple-touch-icon.png: a dedicated square touch icon
- 192 and 512 PNG: useful manifest icons
- site.webmanifest: connects installable app metadata to the icon files
Install the package and verify every reference
Place the generated files at stable public URLs and reference them from the document head or manifest. A correct file that is linked from the wrong path will still fail, so open each final URL directly after deployment.
Browser favicon caches can be persistent. When testing a replacement, use a fresh profile or verify the network response before assuming the new artwork was not deployed.