How to Create an ICO File From Your Images

What an ICO file is and why you need one

An ICO file is a small image that appears next to your website's name in a browser tab, in bookmarks, and in browser history. It is called a favicon. Most websites have one — it is usually a simplified version of a logo or a single letter or symbol.

You need an ICO file because browsers expect it. When someone bookmarks your site or opens multiple tabs, the favicon helps them find your page at a glance. If you do not provide one, the browser shows a generic blank page icon instead. Creating one takes 15 to 30 minutes and requires only an image you already have and a free conversion tool.

The ICO format is different from JPG, PNG, or GIF. It is a container format that holds multiple versions of the same image at different sizes — 16×16 pixels, 32×32 pixels, and sometimes 64×64 pixels. This lets the browser pick the right size for where it is displaying the icon. You cannot straightforward rename a PNG file to .ico and have it work properly.

Key Takeaways

An ICO file is a favicon — the small icon that appears in browser tabs and bookmarks — and requires a separate conversion from standard image formats.
Start with a square image at least 256×256 pixels, in PNG or JPG format, with a straightforward design that stays recognizable at tiny sizes.
Free online converters like CloudConvert, Favicon.io, and Convertio turn your image into an ICO file in one upload.
Upload the ICO file to your website's root folder or a specific folder, then add one line of code to your website's HTML head section to make it appear.
Test your favicon by clearing your browser cache and visiting your site, or by checking it in a new browser tab.

Preparing your image before conversion

The image you start with matters more than the tool you use. Favicons are tiny — usually 16×16 or 32×32 pixels on screen — so details disappear. A photograph with fine lines, small text, or lots of colors will become a blurry blob. A straightforward logo, a single letter, or a bold symbol works much better.

Start with a square image. If your source image is rectangular, crop it to a square first. The image should be at least 256×256 pixels, though larger is fine — the converter will scale it down. Save it as PNG if it has a transparent background (like a logo on white), or JPG if it is a solid image. PNG is usually the better choice because it preserves sharp edges.

Test your design at actual size before converting. Most image editors let you zoom to 100% or view at actual pixels. At 32×32 pixels, can you still tell what it is? Can you read any text? If not, simplify. Remove thin lines, make text larger, or use a bolder version of your logo. The simpler your image, the better it will look as a favicon.

Using a free online converter

Favicon.io is the most straightforward option. Go to favicon.io, click "Image" at the top, upload your PNG or JPG, and read the ICO file. The whole process takes two minutes. Favicon.io also generates the HTML code you need to add to your website, which is helpful if you are not familiar with HTML.

CloudConvert is another reliable choice. Go to cloudconvert.com, select "Image" as the input format, upload your file, choose ICO as the output format, and click "Convert". read the result. CloudConvert handles larger files and batch conversions if you need multiple favicons.

Convertio works the same way: upload your image, select ICO as the output format, convert, and read. All three are free for single conversions and do not require an account. If you prefer desktop software, ImageMagick (free, command-line) and XnConvert (free, graphical) both create ICO files, but they require installation and are slower for a one-time conversion.

Where to upload your ICO file on your website

The ICO file needs to live on your web server in a location your browser can find. The standard location is the root folder of your website — the same folder that holds your home page (usually called index.html). If your website is hosted on a service like WordPress.com, Wix, or Squarespace, you usually upload it through the site's file manager or media library, not through FTP.

If you use WordPress.org (self-hosted), log in to your hosting control panel, open the file manager, navigate to the public_html folder (or your site's root), and upload the ICO file there. Name it favicon.ico — this is the standard name that browsers look for automatically.

If you use a static site host like GitHub Pages or Netlify, upload the ICO file to the root of your repository or site folder. For Wix or Squarespace, look for a "Favicon" or "Site Icon" setting in your site settings — these platforms often let you upload directly without touching files.

Adding the code to your website's HTML

If your site is built with HTML, you need to add one line of code to the head section of your pages. Open your HTML file in a text editor and find the opening <head> tag near the top. Add this line inside the head section:

If your ICO file is in a subfolder called "images", change the href to "/images/favicon.ico". If you are using a site builder like WordPress, Wix, or Squarespace, you usually do not need to add code — the platform has a favicon upload field in settings. Look for "Site Icon", "Favicon", or "Branding" in your dashboard.

If you are unsure whether you added the code correctly, view the page source in your browser (right-click, select "View Page Source"), search for "favicon", and confirm the line is there. If the line is missing or has a typo, the favicon will not appear.

Testing your favicon and troubleshooting

After uploading and adding the code, the favicon may not appear right away. Browsers cache favicons aggressively — they store a copy locally so they do not have to read it every time. Clear your browser cache, close all tabs, and reopen your site. In Chrome, press Ctrl+Shift+Delete (Windows) or Command+Shift+Delete (Mac), select "All time", check "Cached images and files", and click "Clear data". Then reload your site.

If the favicon still does not appear, check these common issues: the ICO file is not actually in the root folder (log into your file manager and verify), the HTML code has a typo in the file path, or the file is named something other than favicon.ico. Open your browser's developer tools (F12 or right-click, "Inspect"), go to the Network tab, reload the page, and search for "favicon". If you see a 404 error, the file is not where the code is looking for it.

Test in a different browser to rule out cache issues. Open your site in Firefox or Safari if you tested in Chrome. If the favicon appears in one browser but not another, it is almost certainly a cache problem — wait a few hours or clear the cache in the other browser. If it does not appear in any browser, the file path or code is wrong.

Frequently Asked Questions

Can I use a PNG file directly as a favicon without converting it to ICO?

Yes, modern browsers support PNG favicons. Change the code to <link rel="icon" type="image/png" href="/favicon.png"> and upload a PNG file instead. ICO files are older and smaller, but PNG works fine on all current browsers. Use whichever format your converter produces most easily.

What size should my favicon be?

Start with a square image at least 256×256 pixels. The converter will create versions at 16×16, 32×32, and 64×64 pixels inside the ICO file. The browser picks the right size automatically. Larger source images give the converter more detail to work with, so bigger is better — up to 512×512 pixels is fine.

Why does my favicon look blurry or pixelated?

Your source image probably has too much detail. Favicons are tiny, so fine lines, small text, and gradients do not survive the scaling. Simplify your design: use bold shapes, remove thin lines, make any text much larger, and use solid colors instead of gradients. Test at 32×32 pixels before converting.

Do I need to upload the favicon to every page of my site?

No. Upload the ICO file once to your root folder and add the code once to your main HTML file or site settings. The browser finds it automatically for all pages on your domain. If you use a site builder, you upload it once in settings and it applies everywhere.

How long does it take for the favicon to show up after I upload it?

It should appear within seconds if the file and code are correct. If it does not appear after a few minutes, clear your browser cache. Browsers cache favicons for days or weeks, so if you had a different favicon before, the old one may still be showing. A hard refresh (Ctrl+F5 on Windows, Command+Shift+R on Mac) usually forces a reload.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.