What is in the favicon package?
| File | Purpose |
|---|---|
| favicon.ico | One file with six icon resolutions, from 16 to 256 px |
| favicon-16.png through favicon-256.png | Individual PNG copies for the six favicon sizes |
| apple-touch-icon.png | 180 × 180 px icon for an Apple home-screen bookmark |
| icon-192.png and icon-512.png | App-style icon sizes referenced by the starter manifest |
| site.webmanifest | Starter icon manifest; edit the website name before installing |
| README.txt | Suggested HTML link tags and installation steps |
The generated ICO embeds PNG images. This works in current browsers and many modern applications. Some very old desktop software accepts only BMP-based ICO files; this generator does not create that older encoding.
Make a favicon that works at 16 pixels
A full wordmark can become unreadable in a browser tab. Start with a simple symbol, initial or compact part of your logo. Thin strokes, small captions and wide empty margins often disappear at 16 × 16 px.
Keep whole logo preserves a rectangular source by placing it inside a transparent square. Crop to square fills the square and cuts away the excess edges. Use the second option only when the important part of the artwork is near the centre.
Choose a source with enough resolution for the largest icon you need. Enlarging a tiny JPG to 512 px does not restore its missing detail. A self-contained SVG can render cleanly at several sizes, but external fonts and linked images may not be available to the browser’s image decoder.
Install the icons and check the result
The package assumes files are served from the website root. If your site lives in a subdirectory, update the icon URLs in both the HTML link tags and the manifest. Replace the placeholder website name and short name in site.webmanifest before publishing it.
A manifest with icons is a starting point; it does not by itself make a website installable or add offline support. Those behaviours depend on your application and the browser’s requirements.
Browsers cache favicons heavily. After replacing an existing icon, try a hard refresh or a fresh browser profile. If necessary, change the icon filename and its HTML reference so the browser requests the new asset. Keep your original logo separately for future exports.