A favicon must remain legible at very small sizes. A large, detailed logo may need a simpler crop or a short initials mark before it works as a browser-tab icon.
Open the Favicon Generator to follow the workflow. Processing runs in your browser; the tool does not upload the input for conversion.
A practical workflow
- Upload a logo or enter initials. Use a compact image mark or choose initials, colours and a font.
- Adjust the crop if using an image. The default is a centred square; enter a tighter crop for a recognisable small icon.
- Generate and inspect the pack. Run Generate icon pack and review the preview and ZIP file count.
- Install the icons and tags. Extract the favicon folder, upload it to the website root and add the provided head tags.
Try an initials icon
Leave the upload empty, enter ST, choose navy text and a gold background, then generate the pack. Extract the ZIP and inspect the 16-pixel icon at its natural size before deciding whether the mark is clear enough for a browser tab.
Prepare a compact mark
Use a supported raster image or generate initials. When an image is loaded, the default crop is a centred square. Adjust the crop to retain the part of the logo that remains recognisable at 16 or 32 pixels. A rectangular crop is fitted into the icon rather than stretched.
Inspect the files in the ZIP
The pack contains several PNG sizes, an ICO containing PNG-backed entries, a web manifest and installation instructions. Inspect icon-16.png and icon-32.png at their natural sizes. Larger icons are useful for touch devices and app-manifest references, but do not fix an illegible small icon.
Install and test the paths
Upload the exported favicon folder to the site root and add the supplied tags inside head. If you choose another folder, change the paths consistently in both the tags and manifest. Clear the browser favicon cache when testing. A manifest alone does not create an offline progressive web app.
If the result needs attention
A favicon must remain recognisable at 16 pixels. Put the exported folder at the location shown in the snippet or adjust the paths.
Read the exact error before changing the input. Keep a copy of the original, reduce the sample when investigating a large file, and use the destination application to verify that the result has the meaning you intended. The tool processes the supplied data; it cannot infer an unstated application schema or project requirement.
For website delivery, check your PageSpeed report after deploying the actual asset. Use the Contrast Checker for text colours and the Favicon Generator for launch icons.
Sources and further reading
Turn the next step into a project
Need help with a brand identity, business website or launch assets? Explore SOPIDOTECH services and client projects, or discuss your brief.