How to make a favicon.ico
- Choose a square image, ideally a PNG logo with a transparent background.
- Pick the sizes to include: 16, 32 and 48 pixels are selected by default; 64, 128 and 256 are optional.
- Download
favicon.icoand upload it to the root folder of your website.
Why several sizes in one file?
An ICO file holds several versions of the icon, and each place picks the one it needs: 16 pixels for browser tabs, 32 for bookmarks and the taskbar, 48 for Windows shortcuts, and 256 for large Windows icons. Each size is drawn from your original, centred and scaled to fit, so non-square images get transparent space at the sides rather than being squashed.
Adding it to your site
Put the file at /favicon.ico; browsers look there automatically. You can also add <link rel="icon" href="/favicon.ico"> to your page's head. Many sites also add a PNG or SVG icon for sharper results on modern devices, while keeping favicon.ico for tools that still request it.
Tips for a clear icon
- At 16 pixels, fine detail disappears. A bold letter or simple symbol reads better than a full logo with text.
- Crop your logo to a square first with Crop image.