How to Make a Favicon From an Image

Turn one square logo into the full set of favicon files modern browsers and phones expect, with the exact files to add and the HTML snippet to paste.

Updated 6 min read By CodingEagles
Free tool Favicon Generator Make a favicon.ico, PNG icons and a manifest from one image. Open tool

You designed a logo, you want it to show in the browser tab, and you assume you need one small image. You do not. Modern browsers, iPhones, Android phones, and Windows tiles all ask for different icon files at different sizes, and getting any of them wrong leaves a blurry or missing icon somewhere. The good news: you can generate the entire set from one square image and add it with a short block of HTML. This guide covers what files you need, what image to start from, and exactly where everything goes.

TL;DR Start from one square logo, 512 pixels or larger. Generate a favicon.ico, PNG icons, a 180px apple-touch-icon.png, and a web manifest from it. Drop the files in your site root and paste a few <link> tags in your <head>. The favicon generator produces the whole set in your browser, nothing uploaded.

What is a favicon, and why do you need several files?

A favicon is the small icon next to a page title, in browser tabs, bookmarks, and history. It used to be one file, favicon.ico, and that was the end of it. Today a favicon is really a small family of files, because the icon now appears in places that did not exist when the original format was invented: phone home screens, installed web apps, and high-density displays that need sharper images.

Each surface wants a specific format and size:

  • favicon.ico in your site root, the classic file browsers still look for by default.
  • PNG icons at 32px (the tab) and 192px / 512px (installed apps and crisp displays).
  • apple-touch-icon.png at 180px, for iPhone and iPad home screens.
  • A web manifest that lists your icons so an installed site looks like an app.

Skip the Apple icon and iPhone users who save your site get a blurry screenshot. Skip the larger PNGs and an installed web app shows a fuzzy icon. The fix is not to make one perfect file, it is to make all of them from a single source.

You make all of them from one image

You do not draw each icon by hand. You start with one large, square master image, and a generator produces every required size and format from it. That is the whole trick: design once, generate the set, ship it. Change your logo later and you regenerate, rather than editing a dozen files.

What image should you start from?

Start with a square image at least 512 pixels on each side, with a simple, high-contrast design. The reason is brutal arithmetic: your icon will be shown as small as 16 pixels wide, smaller than a single letter in this sentence. Anything fussy turns to mush at that size.

Three rules keep an icon readable when it shrinks:

  1. Square shape. Icons are displayed in a square box. A wide logo gets letterboxed with empty space on the sides and looks tiny. Crop or rebuild your mark to fill a square.
  2. Simple subject. A single bold letter, a recognisable symbol, or a stripped-down version of your logo survives the shrink. A detailed wordmark or thin lettering does not.
  3. High contrast. The icon sits on tab backgrounds that are sometimes light, sometimes dark. Strong contrast between the mark and its background keeps it visible either way.

Many brands have a separate square mark for exactly this reason, a monogram or symbol used wherever the full logo would be illegible. If you have one, use it. If you do not, build a square crop of your logo that still reads at thumbnail size.

A note on transparency

PNG icons can have a transparent background, and that usually looks best in browser tabs because the icon blends with whatever colour the tab is. The Apple touch icon is the exception: iOS adds its own rounded corners and does not handle transparency well, so give that one a solid background. A good generator handles this distinction for you, filling the Apple icon and leaving the others transparent.

Where do the files go, and what HTML do you add?

Put the generated files in the root of your site, the same place as your home page, so the paths in the HTML below resolve correctly. Then paste these tags inside the <head> of your pages:

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

Each line has a job. The first points old browsers at the classic .ico. The second gives modern browsers a sharp PNG for the tab. The third hands iPhones and iPads a clean home-screen icon. The fourth links the manifest, which lists your larger icons for installed web apps. If your generator names the files differently, match the href values to whatever it produced.

How to check it worked

Browsers cache favicons hard, so you often will not see a change straight away. Open the icon file directly in your browser by visiting its full address (for example, yoursite.com/favicon.ico) to confirm it exists and looks right. Then load your site in a private or incognito window, which ignores the cache, to see the real result. On a phone, save the site to your home screen and check the icon there too.

Generate the full set in one pass

Rather than resize and export each file by hand in an image editor, feed one square image to a generator and let it produce the entire family. Upload, well, not upload exactly: the favicon generator does the whole job in your browser, so your logo never leaves your machine. You give it one square image, it returns the favicon.ico, the PNG icons, the Apple touch icon, and a ready-made manifest, plus the HTML snippet to paste.

That keeps the work to three steps. Pick a strong square image, generate the set, drop the files in your root and add the tags. Do it once and your icon shows up sharp in tabs, bookmarks, home screens, and installed apps, with no blurry gaps anywhere.

Frequently asked questions

What size should a favicon be?
There is no single size anymore. A favicon.ico typically bundles 16, 32, and 48 pixel versions, PNG icons are usually 32 and 192 pixels, and the Apple touch icon is 180 pixels. Start from one large square image, at least 512 pixels, and generate every size from it.
What image should I start from?
Use a square image with a simple, high-contrast design, ideally 512 pixels or larger. A favicon displays as small as 16 pixels wide, so fine detail and thin text disappear. A bold mark, single letter, or simple symbol reads far better than a shrunken full logo.
Do I still need a favicon.ico file?
Yes, keep it. Older browsers and some tools look for favicon.ico at your site root by default, even without an HTML tag. Modern browsers prefer the PNG icons you link in your HTML, so shipping both the .ico and the PNGs covers every visitor.
What is an apple-touch-icon?
It is the icon iPhone and iPad use when someone saves your site to their home screen. It is a 180 pixel PNG with no transparency, because iOS adds its own rounded corners. Without it, the home screen shows a blurry screenshot of your page instead of a clean icon.
What is a web manifest for?
A web manifest is a small file that tells phones and browsers which icons to use when your site is installed to a home screen, along with its name and colours. It points to your 192 and 512 pixel PNG icons so an installed site looks like a real app rather than a bookmark.

Ready to try it?

Make a favicon.ico, PNG icons and a manifest from one image. Free, in-browser, and 100% private — your data never leaves your device.

Open the Favicon Generator

Related guides

How to Batch Rename and Clean Filenames Safely Why messy filenames break uploads and sync, the cleanup rules that fix them, and how to rename a whole folder at once with a before/after preview.