How to Create a favicon.ico (Multi-Size) From PNG or SVG

A favicon is the small icon that appears in browser tabs, bookmarks, history lists, and address bars. It is one of the first visual elements users notice about your site, and getting it right matters more than most developers realize. A blurry, missing, or incorrectly sized favicon makes a site look unfinished and unprofessional.

The ICO format remains the most reliable choice for favicons because it can bundle multiple image sizes into a single file. When a browser needs a 16x16 icon for the tab bar, it pulls the 16x16 image from the ICO file. When the operating system needs a 32x32 icon for a taskbar shortcut, it pulls the 32x32 version. This ensures your favicon always looks sharp at every size, rather than being scaled up or down from a single resolution.

In this guide, you will prepare a source image, convert it to a multi-size ICO file using Any2ICO, choose the right favicon sizes, and add the correct HTML tags so browsers find and display your icon. The entire process takes under two minutes, and conversion happens right in your browser.

Step 1: Prepare Your Source Image

A great favicon starts with a great source image. The quality of your input directly determines the quality of your output, so it is worth spending a moment to get this right before you convert anything.

Use a square image. Favicons are always displayed as squares, so your source should be square or very close to it. If your logo is wider than it is tall, consider cropping it to a square portion or using a simplified mark rather than the full wordmark. Any2ICO offers both contain and cover scaling modes if your image is not perfectly square. Contain fits the entire image inside the square with optional background fill, while cover scales the image to fill the square completely, cropping the edges.

Start with the highest resolution available. An image that is at least 256x256 pixels gives Any2ICO clean source data for every favicon size from 16x16 up to 256x256. If your source is only 32x32, the tool can still create smaller sizes by downscaling, but it cannot generate a sharp 256x256 version from a tiny original. When in doubt, go bigger.

PNG is the ideal input format. PNG preserves transparency and is lossless, making it the best starting point for icon conversion. If your logo has a transparent background, PNG will carry that transparency through to the ICO output perfectly. JPG works too, but it does not support transparency and may introduce compression artifacts in the source.

SVG works, but with caveats. SVG is a vector format that can theoretically scale to any resolution, which sounds ideal for favicons. Any2ICO accepts SVG files and rasterizes them during conversion. However, SVGs with external font references, linked images, or complex CSS may not render as expected when rasterized in the browser. If your SVG looks correct in a web browser, it will almost certainly convert correctly.

Step 2: Convert to a Multi-Size ICO with Any2ICO

With your source image ready, head to Any2ICO to convert it into a properly structured multi-size ICO file. The process is straightforward and takes only a few clicks.

Upload your image. Drag and drop your PNG, SVG, JPG, WebP, GIF, BMP, or AVIF file onto the converter area. You can also paste an image directly from your clipboard, import from a URL, or connect to Google Drive or OneDrive. Any2ICO accepts files up to 10 MB, which is far more than any favicon source should need.

Select your ICO sizes. Any2ICO lets you choose which sizes to embed in the ICO file: 16, 32, 48, 64, 128, and 256 pixels. For most websites, selecting 16, 32, and 48 covers the essential use cases. If you want full coverage including Windows application icons and high-DPI displays, add 64, 128, and 256 as well. Each selected size adds a separate image layer inside the single ICO file.

Choose your scaling mode. If your source is not perfectly square, choose contain to fit the full image within the square boundary (with a background fill for the empty areas) or cover to fill the entire square by cropping. For most logos, contain is the safer choice because it preserves the full image without cutting anything off.

Set the background. If your source has transparency and you want to keep it, select transparent background. If you prefer a solid backdrop, choose white. Transparent backgrounds look best in modern browsers and operating systems, while a white background can be useful if your logo has very thin or light elements that might disappear against dark tab bars.

Download your ICO. Click the convert button and download the generated favicon.ico file. The conversion is performed by the Canvas API right in your browser. To understand exactly how Any2ICO handles your files during upload and import, visit our about page.

Step 4: Add Favicon Tags to Your Site

Once you have your favicon.ico file, you need to place it on your server and tell browsers where to find it.

Place the file at the root of your domain. Save your favicon.ico file to the root directory of your web server so it is accessible at https://yourdomain.com/favicon.ico. Most browsers will automatically look for a file at this exact path, even without any HTML tags pointing to it. This convention dates back to the earliest days of favicons and remains the most reliable method.

Add a link tag in your HTML head. While placing the file at the root is often enough, adding an explicit <link> tag in your <head> section ensures that every browser finds it reliably, including those that look at non-root paths or subdomains. Here is the minimal snippet you need:

<link rel="icon" href="/favicon.ico" sizes="any">

The sizes="any" attribute tells the browser that the ICO file contains multiple sizes and the browser should pick the best one for its current context. If you want to be explicit about which sizes are included, you can list them:

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">

For most sites, the single-line version with sizes="any" is perfectly sufficient. Browsers are smart about selecting the right size from a multi-size ICO file. For a complete reference on favicon link tags, attribute values, and edge cases, see our guide on favicon HTML tags.

Verify it works. Open your site in a browser and check the tab icon. If you see the old favicon or no favicon at all, you likely need to clear your browser cache. Favicons are aggressively cached by every major browser, so a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) or opening the page in an incognito window is the fastest way to confirm your new icon is loading correctly.

Summary

Creating a proper multi-size favicon.ico is a four-step process: prepare a high-quality square source image (preferably PNG or SVG at 256x256 or larger), convert it to ICO with the right sizes using Any2ICO, choose sizes that match your audience (16, 32, and 48 at minimum), and add a simple <link> tag to your HTML head. The entire process takes under two minutes and produces a favicon that looks crisp in every browser tab, bookmark bar, and desktop shortcut.

A multi-size ICO file is still the most universally supported favicon format across browsers and operating systems. While modern browsers also accept PNG and SVG favicons, the ICO format guarantees compatibility all the way back to Internet Explorer and works seamlessly with Windows desktop shortcuts. By bundling multiple sizes into a single file, you ensure the browser always has the right resolution available without downloading separate files for each context.

Ready to create your favicon? Head to Any2ICO, upload your logo, select your sizes, and download your finished favicon.ico in seconds. No sign-up, no watermarks, and conversion happens right in your browser.