Favicon Generator Guide: Formats, Sizes, and Setup
A favicon is the small brand mark shown in browser tabs, bookmarks, history lists, shortcuts, and other browser surfaces. An ICO is more than a renamed image: it can hold several resolutions of the same icon so browsers and desktop software can select the sharpest size for each context.
Choose a clear, square source image
Start with a square image at 256×256 pixels or larger. Simple shapes, strong contrast, and generous spacing stay recognizable at 16×16 pixels. PNG is dependable for transparent artwork, SVG stays crisp while rendered to each size, WebP can preserve transparency, and JPG works well for artwork with a solid background.
Recommended favicon sizes
- 16×16: the classic browser-tab size.
- 32×32: useful for high-density displays and browser UI.
- 48×48: useful for desktop shortcuts and larger browser surfaces.
- 256×256: keeps a high-resolution version available inside the ICO.
The favicon preset includes 16, 32, and 48 pixels. Select 256 pixels when you also want a larger source inside the ICO. This generator creates one multi-size favicon.ico; it does not create an app-icon ZIP or platform-specific manifest.
Transparency and image fitting
Transparent PNG, WebP, and SVG artwork can keep smooth transparent edges in the generated ICO. JPG does not support transparency. If the source is rectangular, Contain keeps the full image and adds transparent space, while Cover fills the square and crops the longer edge.
How to add favicon.ico to your website
- Download the generated ICO and rename it to
favicon.icoif needed. - Upload it to your website, usually at the site root.
- Add
<link rel="icon" href="/favicon.ico">inside the page<head>.
If the old icon still appears, clear the browser cache or test in a private window. Browsers often cache favicons longer than normal page assets.
Private, browser-based conversion
Your source image is processed locally in the browser. The generator renders every selected resolution, packages the PNG frames into an ICO container, and starts the download when the file is ready. If the source needs preparation, use the Image Cropper to make it square or the Image Resizer to adjust its dimensions.