How to Convert PNG to ICO for Favicons
Every website needs a favicon — that tiny icon displayed in browser tabs, bookmarks, and search results. It's one of the first things that signals professionalism and brand identity. The standard format for favicons is ICO, and the easiest way to create one is by converting a PNG image. Here's everything you need to know about making the perfect favicon.
What Is an ICO File?
ICO (Icon) is a file format developed by Microsoft specifically for icons in Windows. Unlike regular image formats, an ICO file can contain multiple image sizes bundled into a single file. This means a browser can pick the most appropriate size for different contexts — a 16×16 version for the tab, a 32×32 for bookmarks, and a 48×48 for desktop shortcuts.
While modern browsers also support PNG favicons, the ICO format remains the most universally compatible option. It works in every browser, including older versions of Internet Explorer that many enterprise users still rely on.
What Size Should a Favicon Be?
For maximum compatibility, your favicon should include these sizes:
- 16×16 — Browser tabs (the most common size)
- 32×32 — Browser bookmarks and Windows taskbar
- 48×48 — Windows desktop shortcuts
A good ICO converter will handle the resizing for you. Start with a source image that's at least 48×48 pixels (ideally 256×256 or larger for the best quality when scaling down).
How to Convert PNG to ICO in 3 Steps
- Prepare your image — Use a square PNG with a transparent background if your design calls for it. A 512×512 or 256×256 source works best.
- Open the converter — Go to the PNG to ICO converter on This 2 That.
- Drop and download — Drag your PNG onto the page. The tool creates your ICO file instantly, right in your browser.
Create your favicon now — free, instant, no upload required.
Convert PNG to ICO →How to Add a Favicon to Your Website
Once you have your favicon.ico file, adding it to your website is straightforward. Place the file in your site's root directory and add this tag to the <head> of your HTML:
<link rel="icon" type="image/x-icon" href="/favicon.ico">For modern browsers, you can also provide a PNG version at higher resolution:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">Most browsers automatically look for /favicon.ico in your site's root, so simply placing the file there often works without any HTML changes.
Tips for Designing a Great Favicon
- Keep it simple — At 16×16 pixels, fine details disappear. Use bold shapes, a single letter, or a simple icon.
- Use high contrast — Your favicon needs to be recognizable against both light and dark browser themes.
- Use transparency wisely — A transparent background lets your icon blend with any tab bar color.
- Test at small sizes — Zoom out to see how your design looks at actual favicon dimensions before finalizing.
- Match your brand — Use your brand colors and a recognizable element from your logo.
ICO vs PNG vs SVG for Favicons
- ICO — Universal compatibility, supports multiple sizes in one file. Best for maximum browser support.
- PNG — Supported by all modern browsers. Simpler to create but each size needs a separate file.
- SVG — Scalable and crisp at any size. Supported in modern browsers via
<link rel="icon" type="image/svg+xml">, but not yet universal.
For the best results, provide an ICO file as the primary favicon and supplement with PNG and SVG versions for modern browsers.
Common Favicon Mistakes to Avoid
- Using a full-size logo — Logos with text are unreadable at 16px. Extract a symbol or lettermark instead.
- Forgetting dark mode — If your icon is dark on transparent, it vanishes in dark browser themes. Add a subtle outline or use a light version.
- Non-square images — Favicons must be square. Non-square images get distorted or cropped.
- Huge file sizes — Keep your ICO under 100KB. Oversized favicons slow page loads.
More Image Tools
Working on your website's visual assets? These tools might help:
- Image Compressor — Optimize images for faster page loads.
- Image Resizer — Resize images to exact dimensions.
- PNG to WebP — Convert to modern WebP for better compression.
- SVG to PNG — Rasterize vector graphics for compatibility.
All tools on This 2 That run entirely in your browser — your files never leave your device.