How to create a favicon for your website
A favicon is the small icon shown in a browser tab, bookmark list and search results. It is a tiny detail that makes a site look finished and helps users recognise it among many open tabs.
What files a favicon needs
Modern sites usually need a 32x32 PNG, a 180x180 Apple touch icon, and an SVG or ICO for older browsers. Browsers pick the best match automatically when the files are declared in the HTML head.
SVG is ideal because it stays sharp at any size, but a simple PNG set covers every current device. Keeping the artwork minimal — a bold letter or simple shape — reads better at tab size than a detailed logo.
How to make a favicon with FreetoolsY
Open the Favicon Generator, choose a letter or short text, pick foreground and background colours, and download the result as PNG or ICO.
- Type one or two characters and choose a background colour.
- Download the PNG and ICO files.
- Upload them to your site and link them in your HTML head.
Using favicons correctly
Reference the icon in every page's head with a link tag, and keep the file at the site root so crawlers and browsers can find a default favicon.ico. Missing favicons cause 404 requests that clutter your server logs.
If you are starting from an existing logo image instead of text, resize it to a square with the Image Resizer and convert it to PNG with the Image Converter. Pick colours that match your brand using the Color Converter.