How to Create a Favicon from Any Image (Free)

See that tiny icon next to the page title in your browser tab right now? That’s a favicon. Every website has one. If yours doesn’t, your tab shows a generic globe or a blank page icon, and honestly, it looks a bit unfinished.

I put off making a favicon for my own site for months because I thought it required some special design tool. Turns out, you can create one from almost any image in under a minute. No Photoshop. No design skills. Just crop, resize, and convert.

What a favicon actually is

A favicon is a small icon file that browsers display in the tab bar, bookmarks, and history. The word comes from “favorite icon.” Browsers started showing them back in 1999 when Internet Explorer 5 let people bookmark sites.

These little icons do more than look nice. They help visitors spot your tab among the twenty they have open. When someone scans their bookmarks, the favicon is the first thing they recognize. It builds familiarity. People remember images faster than text.

The sizes you need

Browsers and devices ask for different favicon sizes depending on where they show it. Here are the ones that matter:

16x16 px: standard tab icon in desktop browsers
32x32 px: tab icon on high-resolution screens (most laptops fall here)
48x48 px: Windows taskbar and site shortcuts
180x180 px: Apple Touch Icon, used when someone adds your site to their iPhone or iPad home screen

You can get away with just the 32x32 and 180x180 sizes. Most sites use those two plus an ICO file that bundles multiple sizes together. I’ll show you how to handle all of them.

Step 1: Start with a square image

Your favicon needs to look good when it’s tiny. A busy photo with lots of detail will turn into a blurry smudge at 16 pixels. A simple logo, a single letter, or a clean icon works best.

If your image isn’t square yet, crop it first. I use the crop tool and set the ratio to 1:1. Drag the handles until the important part of your logo or icon is centered, then download the result.

A few weeks ago I made a favicon from a friend’s bakery logo. The original was a wide rectangle with the bakery name spelled out next to a cupcake. At 16 pixels wide, the text was unreadable. I cropped it to just the cupcake, and it worked perfectly. Simpler is always better for favicons.

Step 2: Resize to each size you need

Take your square image and generate the sizes listed above. I do this with the resize tool.

Open the tool, drop in your square image, and type the dimensions. For a 32x32 favicon, set width to 32 and height to 32. The lock icon should be on so both dimensions change together. Hit resize and download.

Repeat for each size. It takes about five seconds per size. I timed the whole process at 28 seconds for four sizes, and that was with me double-checking each one.

One thing to watch: make sure your source image is at least 180x180 before you start resizing. If you try to upscale a 48x48 image to 180x180, it’ll come out blurry. Start big, shrink down.

Step 3: Convert to ICO format

Most browsers now accept PNG favicons, but the classic ICO format is still the safest bet. It works everywhere, including older browsers and Windows shortcuts.

Take your 32x32 PNG and run it through the image converter. Upload the file, pick ICO as the output format, and download. Done.

You can also bundle multiple sizes into a single ICO file using an online ICO generator. That way one file covers 16x16, 32x32, and 48x48. But if you’re keeping it simple, a single 32x32 ICO plus a 180x180 PNG for Apple devices covers about 99% of visitors.

Adding the favicon to your site

Drop your favicon files in your site’s root directory or an assets folder. Then add these lines inside the <head> section of your HTML:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">

If you’re using a CMS like WordPress, there’s usually a site identity section in the customizer where you can upload the favicon without touching code. Same for Shopify, Squarespace, and most other platforms.

After adding the code, clear your browser cache and reload the page. If the favicon doesn’t show up, hard refresh with Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac. Browsers cache favicons aggressively.

Mistakes I’ve seen (and made)

Too much detail. I once tried to use a photo of my cat as a favicon. At full size it was adorable. At 16 pixels it looked like a brown blob with two dots. Stick to simple shapes and bold colors.

Colors that clash with the tab bar. Your favicon sits on either a white or dark gray background depending on the browser and theme. A dark blue icon on a dark tab bar becomes invisible. Test yours on both.

Forgetting dark mode. More than 40% of desktop browsers run in dark mode now. I didn’t think about this and my first favicon was dark gray on a slightly different dark gray. Could not see it at all. Use a color that has good contrast on both light and dark backgrounds.

Not testing at actual size. Zoom in on your favicon design and it might look great. But that’s not how anyone sees it. Open your image at 100% zoom and step back from the screen. If you can still tell what it is, you’re good.

Crop images to a square before resizing for the cleanest favicon
Resize images to the exact pixel dimensions browsers expect
Convert images to ICO for the widest browser compatibility