Favicon Converter

Create the files needed to add a favicon to a website from one raster image. Choose how the source should fit the square canvas, set its background, and download a ZIP containing a multi-size ICO, seven PNG icons, a web app manifest, Windows tile configuration and a ready-to-copy HTML head snippet. The image conversion and ZIP assembly run locally in your browser.

How to convert an image into a favicon bundle

  1. 1

    Choose a raster image

    Select a PNG, JPEG or WebP that meets the displayed file-size and image-dimension limits. SVG, GIF and AVIF files are not accepted.

  2. 2

    Choose the fit

    Use Cover to fill the square and crop the edges, or Contain to preserve the full image and add padding around it.

  3. 3

    Set the background

    Choose a background colour for transparent pixels and any padding created by Contain mode, then review the generated previews.

  4. 4

    Download and install

    Download the ZIP, place its icon and configuration files on your site, and copy the supplied link tags into the document head.

What the ZIP contains

Bundle item Purpose
favicon.ico One ICO container with 16, 32, 48 and 256 px entries for browsers and software that request the traditional favicon path
favicon-16x16.png Compact PNG for browser tabs and other small placements
favicon-32x32.png Higher-density browser tab and bookmark icon
favicon-48x48.png Additional desktop and shortcut size
mstile-150x150.png 150 x 150 PNG referenced by the Windows tile configuration
apple-touch-icon.png 180 x 180 PNG for Apple home-screen links
android-chrome-192x192.png 192 x 192 application icon referenced by the web app manifest
android-chrome-512x512.png 512 x 512 application icon referenced by the web app manifest
site.webmanifest JSON metadata that points compatible browsers to the 192 px and 512 px icons
browserconfig.xml Windows tile configuration that references the generated icon assets
favicon-head.html Ready-to-copy tags that connect a page to the ICO, PNG, Apple icon, manifest and browser configuration

The ICO and PNG files are separate on purpose. Browsers and operating systems choose icons differently, so a complete bundle serves both the traditional /favicon.ico request and explicit modern icon declarations.

HTML head tags

The downloaded bundle includes a snippet in this form:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">

If the files live in a subdirectory or on a separate asset host, change the paths before pasting the tags into <head>. Keep the filenames and paths inside site.webmanifest and browserconfig.xml aligned with the files you deploy.

Cover, contain and background choices

  • Cover fills every square output. A wide or tall source is cropped equally from opposite edges, so important artwork should stay near the centre.
  • Contain keeps the entire source visible. Any unused space becomes padding in the selected background colour.
  • Background can remain transparent or use a custom solid colour. In Contain mode, that choice also controls the padding around the image. Check the previews against both light and dark page themes before publishing.

For the sharpest small icons, begin with a simple square image at least 512 x 512 pixels. Fine lettering, hairline strokes and small details may disappear in the 16 px version even when the source is large.

Input limits and placement

This converter accepts PNG, JPEG and WebP raster images only. It checks the image signature and rejects SVG, GIF, AVIF and other unlisted formats. Each source may be up to 20 MiB, with neither side longer than 8,192 pixels and no more than 24 megapixels in total. The dimension limits are checked before the full image is decoded.

After downloading, extract the ZIP and upload the generated files to the paths used by the supplied snippet. Root-relative paths such as /favicon.ico assume that the files are available from the root of the current domain. Clear any site or CDN cache when replacing an existing favicon, because browsers often keep icon files for longer than ordinary page assets.

The included manifest supplies icon metadata, but a manifest and icon set alone do not make a site an installable progressive web app. Installation also depends on the page, transport security and the requirements of each browser.

Frequently Asked Questions

You can use PNG, JPEG or WebP. The converter checks the file signature rather than trusting the filename alone, and rejects SVG, GIF, AVIF and other formats.

Cover scales the image until the square is full, cropping equal amounts from the edges when the aspect ratio is not square. Contain keeps the whole image and fills the remaining square area with the selected background colour.

ICO is a container that can store several small icon sizes in one traditional favicon file. Explicit PNG files give browsers and platforms clearly sized assets for tabs, home-screen links and application icons. Keeping both improves practical coverage.

No. The manifest describes the generated application icons and related display metadata, but installability depends on additional browser requirements and how the site itself is built and served.

The supplied snippet uses root-relative paths, so the simplest setup is to place the extracted files at the root of the domain. If you use another folder or asset host, update the snippet and the paths inside the manifest and browser configuration to match.

No. Image processing and ZIP creation happen in your browser. In the multi-step flow, an IndexedDB draft may keep the image in this browser for up to 30 minutes so it can move between steps. That local handoff is not a server upload.

Related Tools