Use a modern source and ship an ICO compatibility file
A practical favicon set gives each format one job. Keep an SVG or a high-resolution PNG as the source asset. Offer an SVG for scalable rendering, a PNG when you want one exact raster size, and an ICO for a compact compatibility bundle. This approach preserves an editable master while giving browsers several usable choices.
HTML icon links can advertise type and size information. The browser evaluates those hints and chooses an appropriate resource, then can try another candidate when the first one does not fit. [2] MDN describes the same selection inputs: media, type, and sizes. [3] One favicon file does not need to solve every display context.
Match ICO, PNG, and SVG to different jobs
ICO is a directory plus one or more icon images. Each directory entry records an image size, color information, byte length, and byte offset. That structure lets one .ico file carry several raster layers. [4] Windows Vista added support for PNG-compressed images inside ICO files, which made a 256 × 256 layer practical without storing a large uncompressed bitmap. [5]
PNG represents one fixed raster canvas and gives predictable pixel output with transparency. SVG stores vector geometry and can scale without selecting a different raster layer. The HTML Standard even shows an SVG icon declared with sizes="any". [2] Use ICO for the compatibility package, PNG for an exact raster fallback, and SVG when a scalable source fits the target browsers and platform.
Design for the 16-pixel tab and the larger search surface
Start with a square source at least 256 × 256 pixels, then inspect the result at 16 × 16. Thin strokes, small letters, soft shadows, and detailed photos often disappear at tab size. A simple silhouette, strong contrast, and clear spacing survive reduction better. The 16-pixel check tests legibility; the large source protects clean raster output.
Google Search requires a square favicon that it can crawl and recommends dimensions larger than 48 × 48 pixels. It also asks sites to use a stable favicon URL and an image that represents the brand. [1] A 256-pixel ICO layer supports larger raster contexts, while 16, 32, and 48-pixel layers serve compact interfaces. The 256 layer is a compatibility choice, not a ranking promise.
Declare icons explicitly and keep their URLs stable
Place explicit rel="icon" links in the document head. A typical set can point to an SVG with type="image/svg+xml", a 32 × 32 PNG with type="image/png" and sizes="32x32", and an ICO with type="image/x-icon". The HTML selection model uses these hints rather than the filename alone. [2] Platform-specific touch icons and web app manifests remain separate deployment jobs. [3]
Publish each referenced file at a crawlable HTTPS URL. Keep that URL stable when the artwork changes so search systems can revisit the same resource. Google also needs access to the home page and favicon file, so robots rules must allow both. [1] After deployment, request every icon URL directly and confirm a 200 response with the intended content type.
Build and test the compatibility ICO
Use the imgrove Image to ICO converter to turn one PNG, JPG, or WebP into a centered square crop. It packages PNG-compressed 16, 32, 48, and 256 pixel layers into one ICO in your browser. The file stays on your device.
Check the preview at the smallest size and compare the download with the source at 256 pixels. Then add the ICO to your explicit icon set and test the live page in the target browsers. The converter creates the ICO file; it does not write HTML, generate a web app manifest, or publish the asset.
ICO vs PNG vs SVG at a glance
| Decision | ICO | PNG | SVG |
|---|---|---|---|
| File model | Container with several raster entries | One fixed raster canvas | One vector document |
| Strongest role | Compatibility favicon and Windows icon | Exact-size transparent raster fallback | Scalable modern favicon source |
| Size behavior | Selects an embedded raster layer | Scales one pixel grid | Renders geometry at the requested size |
| Useful declaration | type="image/x-icon" | type="image/png" with sizes | type="image/svg+xml" with sizes="any" |
| Source strategy | Export from a clean high-resolution master | Keep the intended pixel dimensions | Keep paths simple and test browser support |
| Main check | Confirm every embedded size and crop | Inspect edge clarity at its display size | Check tiny-size detail and target support |
Use this favicon setup when
- A website needs both modern icon files and a compatibility ICO
- The same clear square mark must work in tiny and larger interfaces
- You want a stable, explicitly declared favicon set
Prepare a different asset first when
- The source depends on small text or detail that disappears at 16 pixels
- The logo has no square crop with clear spacing
- You need a complete touch-icon and web app manifest package
Related favicon and image guides
Related imgrove tools
Build the multi-size compatibility ICO
Choose one PNG, JPG, or WebP. imgrove center-crops it into 16, 32, 48, and 256 pixel PNG layers and packages them in one ICO locally. Check the crop before download; the tool does not create HTML or a web app manifest.
Try Image to ICOTry the workflow and tell us what worked, what failed, or what needs clearer guidance: hi@imgrove.com.