Learn how favicons appear in browser tabs, how to prepare a clean source icon, and what to test after adding one to a website.
Practical ideas for getting more done.
The guide
Clear steps and useful context
A favicon is a small icon associated with a website. Browsers may display it in tabs, bookmarks, history, and other interface locations, helping visitors recognize a site at a glance.
Begin with a simple, high-contrast square source image. Fine details and small lettering can become difficult to recognize at favicon size, so a distinctive mark or initial often works better than a complete logo.
Use the ToolCribz favicon generator to create supported icon output from your source image. Download the generated files and follow the instructions for adding them to your site's public assets and HTML metadata.
After publishing, test the icon in more than one browser and check that the file path resolves correctly. Browser caches can keep an older favicon for a while, so a fresh profile or cache refresh may be needed to confirm an update.
Favicon formats and platform requirements vary. Keep the source artwork, review the generator's output options, and provide the sizes and formats required by your target browsers or devices.
Ready to try it?
Use the related ToolCribz tool to follow the steps with your own file.
More on Developer Tools
Learn what Base64 image data URLs are, when embedding an image can help, and why they are not always a replacement for image files.
Read guide Developer ToolsA practical guide to viewing image data URLs, recognizing supported Base64 input, and troubleshooting invalid or incomplete strings.
Read guide Developer ToolsLearn what SVG optimization can remove, how to validate the output, and why you should keep a source copy before publishing.
Read guide