ICO maker online, create favicon from PNG or JPG free

Need to create a favicon for your website? Use ToolHQ's free ICO maker to convert any PNG or JPG image into a multi-size ICO file right in your browser.

ToolHQ's ICO maker is a free browser-based tool that converts PNG or JPG images into ICO format containing multiple embedded sizes (16x16, 32x32, and 48x48) in a single file, with your image never leaving your device.

A favicon is the small icon that appears in browser tabs, bookmarks, and browser history next to your website's name. It's one of the first visual elements users notice, and creating one from your logo takes less than a minute with this tool.

Key Takeaways

• Generates a multi-size ICO file with 16x16, 32x32, and 48x48 pixel layers in a single file
• A single multi-size ICO means browsers automatically pick the best-fit size for their context
• Your file never leaves your device -- conversion happens entirely in your browser
• ICO format is the standard for Windows application icons and browser favicons since the earliest days of the web
• Free with no login and no watermarks

---

What is an ICO file and why do you need one for a favicon?

ICO (Icon) is a file format developed by Microsoft for Windows application icons. It's the oldest and most widely supported format for browser favicons. Unlike PNG or JPG, an ICO file is a container that holds multiple sizes of the same icon in a single file -- browsers can then pick the most appropriate size for their context.

According to the Wikipedia article on ICO format, the ICO format supports embedding images at multiple resolutions, with each image stored independently inside the file. Modern browsers typically use the 16x16 version in browser tabs, the 32x32 version in taskbars, and 48x48 for high-DPI contexts.

The MDN Web Docs on the link element explains that browsers look for a favicon by default at /favicon.ico in the root of a website. This file should ideally be a multi-size ICO to ensure proper rendering at every display context -- from low-density screens to Retina and 4K displays.

While modern browsers also accept PNG favicons specified in a <link> tag, the ICO format remains the most compatible choice because it's served automatically without any HTML configuration and works in virtually every browser ever made, including Internet Explorer.

---

When you need to create a favicon

Every website needs a favicon. Without one, the browser tab shows a generic globe or empty square, which makes a poor first impression and hurts brand recognition.

Mini-story: Sarah is a 30-year-old entrepreneur who just launched a Shopify store for her handmade jewelry brand. Her web developer had set up the store but forgot to add a favicon. Every browser tab showing her store displayed a blank icon, and customers kept mixing up tabs. She took her logo (a 500x500 PNG with a transparent background), uploaded it to ToolHQ's ICO maker, downloaded the.ico file in about five seconds, uploaded it to Shopify's "Store favicon" setting, and the next day all browser tabs showed her logo. It was the smallest tweak that made the site feel 10x more professional.

Situations where the ICO maker is the right tool:

• Adding a favicon to a new website, blog, or web app
• Replacing a missing or low-resolution favicon on an existing site
• Creating a favicon for a client website during development
• Converting a brand logo to ICO for use in Windows applications or installer files
• Generating browser tab icons for internal tools, dashboards, or intranets

Create your ICO favicon at ToolHQ

---

How to create an ICO favicon

1. Open ToolHQ's ICO maker in your browser.
2. Upload your PNG or JPG image. A square image works best. Your logo ideally should be square, or crop it to square first using ToolHQ's image cropper.
3. The tool generates sizes automatically. It creates 16x16, 32x32, and 48x48 pixel versions embedded in a single ICO file.
4. Download your.ico file.
5. Upload it to your website. For most CMS platforms (WordPress, Squarespace, Shopify, Wix), there's a favicon upload field in the site settings. For custom HTML sites, place favicon.ico in your root directory.

---

Tips for the best favicon results

Start with a square image. Favicons are displayed in square containers. A rectangular logo will be squished or stretched. If your logo is not square, crop it to a square composition around the key element of the logo -- usually the icon mark rather than the full wordmark.

Use a high-contrast icon for small sizes. At 16x16 pixels, your favicon is only 16x16 pixels -- roughly the size of a small ant. Complex logos with thin lines, small text, or many colors become unrecognizable at this size. The best favicons use a single bold symbol, letter, or monogram that's clear at tiny sizes.

Avoid white backgrounds for icons placed on white browser tabs. A white-background favicon disappears into a white browser tab. Use a colored background, or ensure the icon has a distinctive shape that reads clearly even on white.

Mini-story: Jake, a 36-year-old web designer, built a portfolio site for a startup. The client sent a logo file that was a white logo mark on a white background -- invisible as a favicon. Jake used ToolHQ's image cropper to square up the logo, then manually added a dark background color in a simple image editor, then ran the result through the ICO maker. The finished favicon was the client's logo mark on a brand-color background -- clean, distinctive, and visible on any tab.

If your logo is in SVG format, first convert it to PNG using ToolHQ's SVG to PNG converter at 200x200 or larger, then run it through the ICO maker. Browse all image tools in the ToolHQ image category.

---

Favicon sizes: which ones do you actually need?

The favicon landscape has simplified considerably over the last few years. Here is what is actually required vs what is legacy overhead.

The modern minimum. For browsers in 2026, you need two things:

1. A 32x32 PNG <link rel="icon"> in your HTML <head>. This is what all modern desktop browsers (Chrome, Firefox, Edge, Safari) use for tab icons.
2. A 180x180 PNG <link rel="apple-touch-icon"> for iOS home screen icons when users save your site to their home screen.

<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

The legacy multi-size ICO file. The traditional favicon.ico placed at the root of your server (/favicon.ico) serves as the universal fallback for environments that do not read your HTML <link> tags. This includes:

• Internet Explorer (all versions)
• Windows taskbar pinned sites
• Some browser bookmark managers and reading list tools
• RSS feed readers that display site icons
• Many email clients that show sender site icons

A properly built ICO file embeds multiple sizes (16x16, 32x32, and 48x48) in a single container so each context gets the size it needs. The 16x16 is used in browser tabs and legacy contexts. The 32x32 is used by most modern Windows contexts. The 48x48 is used for Windows taskbar and high-DPI legacy contexts.

What you can skip. Multiple separate PNG files at sizes like 96x96, 128x128, and 192x192 were required for Android Chrome in older versions but are no longer needed for most sites. If you are building a Progressive Web App (PWA), you need a 192x192 and 512x512 PNG for the web app manifest, but for a standard website these are optional.

The practical recommendation. Generate an ICO with ToolHQ for the /favicon.ico root file (handles legacy), add a 32x32 PNG <link> for modern browsers, and add a 180x180 PNG <link rel="apple-touch-icon"> for iOS. Three files covers all real-world scenarios.

---

Frequently asked questions

Is my image uploaded to a server?

No. ToolHQ's ICO maker processes your file entirely in your browser. Your file never leaves your device.

What size should my input image be?

Use a square image at 200x200 pixels or larger. The tool scales it down to the required ICO sizes (16x16, 32x32, 48x48) automatically. Larger input images produce sharper downscaled results.

Can I use a PNG with a transparent background?

Yes. The transparent background is preserved in the ICO output. Use a transparent PNG for logos that need to work on both light and dark browser tab themes.

How do I add the favicon to my website?

Upload favicon.ico to your website's root directory. Most browsers detect it automatically at /favicon.ico. You can also specify it explicitly: <link rel="icon" type="image/x-icon" href="/favicon.ico"> in your HTML head.

Can I use different favicons for dark mode and light mode?

Yes. Modern browsers support media queries on <link> tags, so you can specify different favicon variants for light and dark color schemes:

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

This is useful when your logo is dark-colored (invisible on dark browser tabs) or white (invisible on light tabs). Create two PNG versions and let the browser pick the right one based on the user's system theme.

What is the difference between ICO and PNG favicons?

ICO files contain multiple sizes in one file. PNG favicons are single-size and require a <link> tag to specify. ICO is more widely compatible including with older browsers and Windows taskbar behavior.

---

The short version

A favicon is the small icon in browser tabs that makes your site look professional and helps users identify it at a glance. ToolHQ's ICO maker converts any square PNG or JPG into a multi-size ICO file in seconds, with no server upload, no account, and no design software required.

Your file never leaves your device.

For SVG logos, convert to PNG first with ToolHQ's SVG to PNG converter. For cropping your logo to square, use ToolHQ's image cropper. Browse all image tools at the ToolHQ image category.

Create your ICO favicon now

---