How to create a favicon from an image

The favicon is the tiny icon next to a page's title in a browser tab. It also shows up in bookmarks, history and search suggestions. Because it's displayed at very small sizes, a good favicon reads clearly even when it's only a handful of pixels wide.

The quality of a favicon is decided before you generate it, by the image you start from:

• Use a square image so it isn't stretched or cropped awkwardly.
• Start from something reasonably large (for example 512×512) and let it scale down.
• Favor a simple, high-contrast mark over detailed artwork — detail disappears at small sizes.
• Decide whether you want a transparent or a solid background before exporting.

1. Open the Favicon generator tool.
2. Select your square source image.
3. Generate and download the favicon, then add it to your site.

• Starting from a tiny source image, which produces a blurry result that can't be recovered.
• Using a full logo with text — wordmarks become unreadable at favicon size.
• Forgetting that a transparent background will show the tab's color behind it.
• Packing in fine detail that simply vanishes once scaled down.

The conversion happens in your browser; your source image isn't uploaded to a server. You can generate a favicon from a private logo or draft without it leaving your device.