You just launched a site and noticed something missing: the browser tab shows a blank page icon instead of your logo. That tiny image is the favicon, and a missing one makes a site feel unfinished. The good news is that making one takes a couple of minutes once you know what you actually need.
What is a favicon?
A favicon (short for "favorite icon") is the small image a browser shows in the tab, next to a bookmark, and in your browsing history. It's how people recognize your site at a glance when they have a dozen tabs open. A clear, legible favicon makes your site look polished and helps it stand out.
Because it's displayed so small, a favicon is not just your logo shrunk down. The best favicons are simplified: a single letter, a symbol, or the most recognizable part of a logo. Fine detail and small text disappear at 16x16 pixels, so simpler almost always wins.
What sizes do you need?
Different places display the icon at different sizes, so a good favicon covers several. The common ones are:
- 16x16 — the classic browser tab and address bar size.
- 32x32 — used by some browsers and for taskbar shortcuts.
- 48x48 — used by Windows and some bookmark views.
- 180x180 — the Apple touch icon shown when someone adds your site to an iPhone or iPad home screen.
- 192x192 and 512x512 — used by Android and Progressive Web Apps for home screen icons and splash screens.
You don't have to create each of these by hand. A favicon generator produces the full set from a single source image, which is why most people use one rather than exporting sizes one at a time.
PNG or ICO: which format?
There are two formats worth knowing about.
ICO is the traditional Windows icon format. A single .ico file can hold multiple sizes at once, and a favicon.ico placed at the root of your site is the most broadly compatible option, including older browsers.
PNG is the modern choice for higher-resolution displays, Apple touch icons, and Android home screen icons. PNG supports transparency cleanly, which matters if your icon shouldn't sit on a solid square.
In practice, you'll usually want both: an .ico as the dependable baseline and several PNG sizes for modern devices. A generator gives you everything in one download.
How to make a favicon with Toolmingo
Here's the quickest path using a free, in-browser tool. Nothing is uploaded to a server; the image is processed locally in your browser, so your file stays on your machine.
- Pick your source image. A square PNG works best. If your logo is a different format or shape, run it through the Image Converter first to get a clean square PNG.
- Open the Favicon Generator and select your image.
- Let the tool generate the full set of sizes, including the
.icoand the PNG icons for modern devices. - Download the package.
- Add the files to your site and reference them in your HTML
<head>.
A typical set of tags looks like this:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Place the icon files in your site's root or wherever your build serves static assets, and update the paths to match.
Tips for a favicon that actually reads
- Keep it simple. Test how your icon looks at 16x16. If you can't tell what it is, simplify it.
- Use strong contrast. Browser tabs sit on light and dark themes. A shape that works on both is safer than one that blends into either.
- Mind the padding. A little breathing room around the symbol stops it from feeling cramped in the tab.
- Start square. A square source avoids awkward cropping. If yours isn't square, fix that before generating.
Why do it in the browser?
An in-browser tool means no account, no upload queue, and no copy of your logo sitting on someone else's server. For a brand asset like a logo, processing the image locally is simply cleaner and faster. It's free, it's instant, and you keep full control of your file.
FAQ
Q: Can I make a favicon from a JPG? Yes. A JPG works as a source, though PNG is preferable because it supports transparency. If you need transparency or a square crop, convert the JPG to PNG with the Image Converter first, then run it through the generator.
Q: What size should my source image be? Start with the largest square you have, ideally 512x512 or bigger. A generator scales down cleanly, but it can't add detail that isn't there, so a larger, sharp source produces better small icons.
Q: Do I still need a favicon.ico file?
It's still the most compatible baseline, especially for older browsers, and it's a small file. Including both the .ico and modern PNG icons covers the widest range of devices, which is why most generators output both.