How to Generate a Favicon From Any Image

October 17, 2026 • NOFYI Editorial Team

A favicon is the small icon that appears in a browser tab, in bookmarks, and in search results. It is tiny, but it helps visitors recognize your site at a glance. Many people skip it because it seems technical, yet generating a favicon from an image you already have is a short task. The main challenge is not the file format. It is choosing a source image that still looks clear when it is reduced to the size of a few pixels.

This guide explains how to do it well. You will learn what makes a good source image, how to prepare it, how to create the PNG and ICO files you need, how to add them to a site, and how to check the result. It also covers the limits of the process, so you do not expect a detailed photo to stay readable at sixteen pixels wide.

What a Favicon Is and Why Size Matters

A favicon is usually displayed at sixteen by sixteen pixels in a browser tab. That is very small. A line of text, a face, or a detailed illustration will often turn into a blur at that size. A simple mark works better. Think of a single letter, a bold shape, or a simplified version of a logo. If your logo already has a simple symbol, that symbol is often a better favicon than the full logo with words.

Because the icon is shown at several sizes, you should not create only the smallest version. Modern browsers and devices use larger versions for bookmarks, home-screen shortcuts, and search results. A common approach is to create a high-resolution master file, usually five hundred twelve by five hundred twelve pixels, and then export smaller sizes from it. That master file gives you enough detail for large displays while letting you test how the design holds up when it is scaled down.

Square shape matters too. Favicons are square. If your source image is wide or tall, it will be cropped or squeezed if you force it into a square. Start with a square source, or crop to a square early, so you control what is kept and what is removed. Leave a small amount of breathing room around the mark, because an icon that touches the edges can look cramped and can lose detail when it is scaled down.

How to Prepare Your Source Image

Choose an image you have the right to use. That may be your own logo, a mark you created, or an image with a license that allows this use. Do not take a logo, character, or photo from another site and turn it into your favicon. If you are unsure about rights, create a simple original mark instead. A single letter in a solid rounded square is often enough, and it is yours.

Look at the image at a small size before you invest time in it. Most image editors let you zoom out or export a preview. Shrink a copy to thirty-two pixels wide and then to sixteen pixels wide. Can you still tell what it is? If not, simplify it. Remove small text, thin lines, and background clutter. Increase contrast. Make the main shape larger within the square. These changes may make the large version look plain, but they make the small version usable, and the small version is the one people will see most often.

Next, clean up the background. A transparent background is usually best, because it lets the icon sit naturally on light and dark browser themes. If your mark needs a background to be readable, use a solid color that matches your site. Avoid a busy photograph as a background. It will compete with the mark and turn to noise at small sizes. Save your work as a high-quality PNG master file at five hundred twelve by five hundred twelve pixels. Keep that master file, because you may need it again if you change your site or add new icon sizes later.

How to Generate the Favicon Files

There are two main file types to know. PNG files are widely supported and easy to create. ICO files are an older container format that can hold several sizes in one file, including sixteen, thirty-two, and forty-eight pixel versions. Many sites use both. A PNG is used for modern browsers, and an ICO is kept for compatibility with older browsers and for the classic favicon request that browsers still make.

To create them, start from your five hundred twelve by five hundred twelve master. Export a PNG at that size, and also export smaller PNGs at one hundred eighty, one hundred ninety-two, thirty-two, and sixteen pixels if your tool or site asks for them. Then create an ICO file that contains the sixteen, thirty-two, and forty-eight pixel versions. Many image editors, online favicon generators, and site platforms can create an ICO file from a PNG. Use a tool you trust, and avoid uploading private or sensitive images to an unfamiliar service. If the image is your logo, a reputable generator is normally fine, but a local editor or your site platform is often simpler.

Keep the file names simple and clear. A common setup is favicon.ico for the ICO file and favicon-512×512.png, favicon-192×192.png, and apple-touch-icon.png for the PNG versions. The exact names matter less than consistency. What matters is that the files you reference in your site actually exist at the locations you specify. A broken favicon link is a common reason an icon does not appear.

Worked Example: From a Logo to a Working Favicon

Imagine you have a simple logo for a small site called Bright Notes. The logo is a yellow rounded square with a dark blue letter B in the middle. You want to use it as a favicon. The full logo also includes the words Bright Notes underneath, but you decide to leave those words out of the favicon, because they would be unreadable at sixteen pixels.

First, you crop the logo to a square that contains only the yellow square and the letter B. You check that the B is centered and that there is a small margin around the square. You export that square as a PNG at five hundred twelve by five hundred twelve pixels. That is your master file. You then zoom out and preview it at thirty-two and sixteen pixels. The B is still clear, and the yellow square is still visible. That is a good sign.

Next, you export the smaller PNG sizes and create an ICO file with sixteen, thirty-two, and forty-eight pixel versions. You place the files in the main folder of your site or in the folder your site platform uses for icons. You add the link tags your platform asks for, or you upload the icons through your site settings if it provides a favicon option. Many WordPress themes, for example, let you set a site icon in the customizer, and they generate the needed sizes from the image you upload.

Then you clear the cache and test. You open the site in a new browser tab and look at the tab icon. You also open the site on a phone and check the bookmark icon if your site uses one. If the icon looks blurry, you go back to the master file and check whether the B is too thin or the yellow is too pale. If the icon does not appear at all, you check the file path, the file name, and whether the browser is showing an old cached version. In this example, the fix is often a hard refresh or a cleared cache, not a new file.

This example works because the source was simple. One bold letter, one strong color, and a clear square shape. If the source had been a photograph of a desk with a notebook, a pen, and a coffee cup, the result would have been a muddy blur. The lesson is not that favicons are hard. It is that the source image decides most of the result.

Adding the Favicon to Your Site

The exact steps depend on your platform. In WordPress, the site icon setting is a common route. In a static site, you place the files in the site root and add link tags in the head of each page. In a site builder, there is often a favicon or site icon upload field in settings. Use the method your platform documents, rather than editing theme files if you are not comfortable with them. If your platform generates sizes automatically, upload the five hundred twelve by five hundred twelve PNG and let it handle the rest, then check the result.

After you add the files, do not judge the result from a single tab. Browser tabs, bookmarks, and home-screen shortcuts each use different sizes and may cache icons separately. Check a fresh tab, a bookmark, and a phone if you can. If one place shows the new icon and another shows the old one, the difference is usually caching, not a missing file. Give it a short time, clear the cache, and test again.

Clear the Cache When the Icon Does Not Change

Caching is the most common reason a new favicon does not appear. Browsers cache favicons aggressively, because they are requested often and change rarely. Your site may also use a caching plugin or a content delivery network that serves an old version. If you have just replaced a favicon, a normal refresh may not be enough.

Start with a hard refresh in your browser. Then try a private or incognito window, which often starts with a fresh cache. If that still shows the old icon, clear your browser cache for the site or test in a different browser. If your site uses a caching plugin, clear that cache too. If you use a CDN, purge the cached files for the favicon paths. After each step, open the site in a new tab rather than reloading the same tab, because the tab itself may hold onto the old icon.

Also check that you did not leave an old favicon file in place. If both favicon.ico and a PNG favicon exist and point to different designs, browsers may choose one inconsistently. Replace or remove the old file so there is one clear version. Keep a note of where you put the files, so a future update does not create the same confusion.

Limitations: What a Favicon Cannot Do

A favicon cannot make a complex image readable at a tiny size. It cannot preserve fine detail, small text, or subtle gradients. If you start with a photo, the result will be an impression of color and shape, not a recognizable photo. That is not a failure of the tool. It is a limit of the size. The fix is to simplify the source, not to increase the resolution of the master file. A five hundred twelve pixel master helps with large displays, but it does not add detail to a sixteen pixel display.

A favicon also cannot fix a weak brand mark. If the mark is hard to recognize at large size, it will be harder at small size. Use the favicon test as a check on your mark. If the simplified version is clearer than the original, consider whether the simplified version should become your main mark for small uses. Many sites use a full logo on the page and a simplified symbol for the favicon and the app icon. That is a normal and sensible split.

Finally, a favicon cannot control how every browser or device displays it. Some browsers round the corners, some add a background, and some crop the image. Test in the browsers your visitors use most, and accept small differences. A favicon that is clear and simple will survive those differences better than one that depends on exact pixels.

Frequently Asked Questions

What size should my source image be?

Start with a square image at five hundred twelve by five hundred twelve pixels. That size is large enough for high-resolution displays and for platforms that generate smaller versions from it, while still being easy to work with.

Do I need both ICO and PNG files?

Many sites use both. PNG files work well in modern browsers, and an ICO file provides compatibility and a single file with several sizes. If your platform generates icons from one upload, follow its guidance and let it create the files it needs.

Why does my new favicon not show up?

The most common reason is caching. Try a hard refresh, a private window, or a different browser. Clear your site cache and CDN cache if you use them, and check that the file path and file name are correct.

Can I use a photo as a favicon?

You can, but the result is often unclear. Photos contain many details that disappear at sixteen pixels. A simple shape, letter, or simplified mark usually works better. If you want to use a photo, crop tightly to one clear subject and test it at small sizes before you publish it.

Keep it simple. Choose a square, simple source, export a five hundred twelve by five hundred twelve master, create ICO and PNG versions, add them through your platform, and clear the cache when you test. That workflow turns a task that looks technical into a short, repeatable check.