A favicon is the small icon people see in their browser tab next to your site name, in bookmarks, in history, and sometimes in search results. It is a tiny thing, but it is one of the most recognizable parts of a website's identity.
This guide explains how to create a favicon, what sizes and formats to use, and the most common mistakes people make when creating one.
What a favicon is for
A favicon is a small icon associated with your website. You see it in the browser tab, next to the page title. You also see it in bookmarks, browser history, and sometimes in search results next to your site name.
Its main jobs are identification and recognition. When someone has several tabs open, the favicon helps them find your site quickly. When someone bookmarks your page, the favicon makes the bookmark visually distinct. In a crowded browser tab row, the favicon is often the only visual cue you have.
A favicon does not usually need to be elaborate. It has to work at very small sizes, so simple shapes, clear symbols, and a few letters tend to work better than detailed illustrations.
Formats and sizes
There are a few formats and sizes worth knowing about.
ICO is the classic favicon format. It can hold multiple sizes in one file, which is why it has been used for a long time. Many browsers still look for a favicon.ico by default, so having one is a good safety net.
PNG is also widely supported and often easier to work with. A PNG favicon can be clearer at a specific size than a multi-size ICO, and it is a good choice when you want control over a particular size.
SVG is sometimes used as a modern favicon. It scales without losing quality, which is nice for larger sizes, but support is not universal in every browser for every use case. Use it if you know your audience and the format is handled.
Common sizes include 16x16, 32x32, and sometimes larger sizes like 48x48 or more for higher-density displays and different contexts. A good practice is to provide a few sizes so the browser can choose the best one for the situation.
How to create a favicon
The simplest way to create a favicon is to start with a small, clear design and export it at the sizes you need.
A good favicon usually starts from one of these:
- A simplified version of your logo.
- A single letter or initial.
- A simple icon or symbol associated with your brand.
- A small graphic that reads well at very small sizes.
The key is simplicity. A favicon is tiny. Details that look good on a 500-pixel logo can disappear at 16x16. Before you finalize a favicon, look at it at the actual small sizes it will be seen at.
If you are making a favicon from a larger logo, simplify it first. Reduce detail, increase contrast, and make sure the main shape or letter is still readable when scaled down.
Using a favicon generator
A favicon generator is a practical way to create the file without manually exporting every size yourself. You give it an image or logo, and it produces the formats and sizes you need.
A good generator should:
- Accept a source image and turn it into favicon-friendly sizes.
- Produce the formats you want, such as ICO and PNG.
- Make it easy to download the files you need.
- Preserve enough detail from the source without trying to keep too much.
If you have a source image, a generator can save time and reduce mistakes. Just make sure the source image is already simple enough to work at favicon sizes. A generator cannot fix a source that is too detailed or unclear.
Choosing the source image
The source image matters a lot. A good source image for a favicon is:
- Simple and recognizable.
- High contrast.
- Made of a single shape or a few clear shapes.
- Not dependent on tiny details.
- Viewable at small sizes without confusion.
A bad source image is:
- Detailed and busy.
- Hard to read at small sizes.
- Dependent on thin lines or tiny features.
- So large or complex that it loses its identity when shrunk.
If your logo does not work as a favicon, make a simplified version. Often the best favicon is not the full logo but a simplified mark, initial, or symbol derived from it.
Common mistakes
- Using a source image that is too detailed for a favicon.
- Forgetting to export more than one size.
- Using a format or size that is not widely supported.
- Making the favicon unreadable because of low contrast or too much detail.
- Not testing the favicon at actual small sizes.
- Using a color scheme that disappears on certain backgrounds.
- Forgetting that favicons appear in multiple places, not just tabs.
The most common mistake is detail. A favicon is small, so every unnecessary detail loses clarity. If you have to squint to figure out what the icon is at 16x16, it probably needs simplification.
How to use the favicon on your site
Once you have the favicon files, you need to place them where the browser can find them and reference them. Usually this means putting the files in your site's public root or another reachable location and referencing them from your pages.
A practical checklist:
- Place the favicon files where your site can serve them.
- Reference the favicon in your page head so browsers know it exists.
- Provide more than one size if you can, so different contexts get an appropriate version.
- Test the favicon in tabs, bookmarks, and any other place your site appears.
- Make sure the favicon is reachable and does not fail to load.
A favicon that fails to load is worse than no favicon, because it can make the site look broken. If you add one, verify that it actually loads.
Wrapping up
A favicon is a small thing, but it matters for how your site is recognized and remembered. The best favicon is simple, clear, and readable at very small sizes. Start with a good source image, simplify it if needed, produce the right sizes and formats, and test it where people will actually see it.
If you have a logo, do not just shrink it down and call it a favicon. Look at it at the actual size, and simplify until it works. A good favicon is one people can recognize at a glance, even when it is tiny.