How to Create a Favicon for Your Website (And Why It Matters)

A favicon is the smallest piece of branding on your entire website, and also one of the easiest to get wrong. It is the little icon that shows up in a browser tab, in a list of bookmarks, in browser history, and on a phone's home screen if someone saves your site. Most visitors never consciously notice a good favicon. They absolutely notice a missing or broken one, even if they could not tell you why something feels slightly off.

What a Favicon Is and Why It Still Matters

The word favicon comes from "favorite icon," a holdover from when browsers used it to mark bookmarked pages. Today it shows up in far more places: browser tabs, the address bar, bookmark bars, browser history lists, search results in some cases, and as the app icon when a site is added to a phone's home screen or saved as a Progressive Web App.

Each of those placements is a small but real branding moment. A generic gray globe icon, or worse, a broken image icon, signals that a site is unfinished or unmaintained. A clean, recognizable favicon does the opposite. It helps users find your tab among a dozen open tabs, it reinforces brand recognition every time someone sees it, and it makes a site feel complete and trustworthy. None of this requires a big design budget. It requires one good square image and the right export sizes.

Favicon Sizes and Formats Explained

Favicons are not one file anymore. Modern sites typically ship a handful of sizes so every browser, operating system, and device gets the right resolution instead of a stretched or squashed version of the same image. The most common sizes you will run into are:

16x16 and 32x32 pixels for the classic browser tab and bookmark icon, usually saved as favicon.ico or PNG. 180x180 pixels for the Apple touch icon, used when an iPhone or iPad user adds your site to their home screen. 192x192 and 512x512 pixels for Android and Progressive Web App manifests, where the icon can appear as a full app icon. Some sites also include a 48x48 version for Windows tiles and a scalable SVG favicon, which modern browsers increasingly support and which looks sharp at any size.

Format matters too. The old .ico format can actually contain multiple sizes in a single file, which is why it is still the default name browsers look for. PNG is simpler to create and edit, supports transparency, and is perfectly fine for every modern browser. SVG is the smallest and sharpest option for simple geometric logos, but it does not work as the Apple touch icon or in older browsers, so it should be an addition rather than a replacement. Whatever formats you choose, keep an eye on file size. A favicon that is needlessly large adds extra requests and weight to every single page load, so running your exported PNGs through an Image Compressor before you upload them is a quick way to shave off unnecessary kilobytes without any visible quality loss.

Designing an Icon That Works at 16 Pixels

The hardest constraint in favicon design is not the file format, it is the size. A 16x16 pixel square is roughly the size of a single character on most screens, and that is the size your favicon will be most of the time. Whatever you design has to survive being shrunk down to something close to that.

Keep it simple

Detailed logos, gradients, thin lines, and small text all fall apart at 16x16. The shapes blur together and the icon turns into a smudge of color. The favicons that read clearly at tiny sizes are almost always a single bold shape, a letter or initial in a heavy weight, or a simple icon with thick strokes and high contrast against its background.

Use contrast and color deliberately

Pick colors that stand out against both light and dark browser themes, since many people now browse with dark mode enabled. A light icon on a transparent background can disappear entirely in a dark tab bar, and a dark icon can do the same in a light one. Adding a solid background shape behind your mark, even a simple colored square or circle, fixes this in most cases and also helps the icon feel anchored rather than floating.

Test at real size before you commit

Design your favicon at a larger size for convenience, such as 512x512, but constantly check how it looks shrunk down. Export a 16x16 preview early and often. An icon that looks great as a big square on your screen can look like a meaningless blob once it is sitting in a browser tab next to nine other tabs.

Preparing Your Source Image

Most logos and source images do not start out as perfect squares. A horizontal logo with text next to a symbol, a photo, or an illustration with extra space around it all need to be cropped down to the part that should actually become the icon, usually just the symbol or mark on its own.

Start by isolating the element you want to use, ideally just the icon or letter mark without any surrounding wordmark. Then crop that element into a perfect square with a small amount of padding around it so the shape does not touch the edges. If your source file is a wide logo or a photo, the Crop Image tool lets you drag a square selection directly over the part you want to keep, which is the fastest way to get a clean 1:1 starting point before you move on to resizing.

A useful habit is to leave roughly 10 to 15 percent of empty margin around your mark inside the square. Icons that fill the entire frame edge to edge tend to look cramped once they are placed inside a rounded browser tab or an iOS home screen icon, which adds its own rounded corners and shadow on top of your image.

Resizing to Every Size You Need

Once you have a clean square source image, the next step is producing the actual size variants browsers and devices expect. The safest approach is to start from your largest version, ideally 512x512 pixels or bigger, and scale down from there rather than scaling up from a small image, which introduces blur and pixelation.

For each target size, 512x512, 192x192, 180x180, 32x32, and 16x16, export a separate file at exactly those dimensions. The Image Resizer handles this cleanly: upload your large square source once, set the exact pixel dimensions you need, and download each size without distorting the proportions. Repeating this for each required size only takes a couple of minutes once your source image is ready, and it ensures every device gets a crisp, correctly proportioned icon instead of a single image stretched or squeezed to fit.

If your icon design is very simple, mostly flat shapes and solid colors, it is worth opening the 16x16 export afterward and checking whether fine details have survived. Sometimes a small manual touch up, like thickening a line or removing a tiny detail that turned into noise, makes a noticeable difference at that size.

Generating and Adding Your Favicon to Your Site

With your sized images ready, the last step is packaging them into the files browsers actually look for and linking them in your page's HTML. This is where a dedicated favicon tool saves a lot of manual work, since it can take a single source image and output a complete set of favicon files in the right formats and sizes at once.

Once you have the files, place them in the root of your site (often a folder like /public in modern frameworks) and reference them in the <head> of your HTML. A typical setup 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" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

The site.webmanifest file is a small JSON file that lists your 192x192 and 512x512 icons along with your site name and theme color, and it is what powers the home screen icon on Android and the installed-app appearance for Progressive Web Apps. Most favicon generators produce this file for you automatically, so you mainly need to confirm the paths match where you uploaded the images.

Common Favicon Mistakes to Avoid

A handful of small mistakes account for most favicon problems. Forgetting to clear the browser cache after updating a favicon is extremely common. Browsers cache favicons aggressively, sometimes for weeks, so a new icon may not appear until you do a hard refresh or test in a private browsing window.

Using a non-square source image is another frequent issue, since it forces every export to either stretch the image or add unwanted padding. Skipping the Apple touch icon is also common, and it results in iOS generating its own screenshot-based icon when someone saves your site, which almost always looks worse than a designed icon. Finally, exporting everything from a small image and scaling up produces blurry results at the larger sizes, particularly the 512x512 icon used for app-like installs.

All of these are avoidable by working from one large square source image, generating the full set of sizes from it, and testing the result in an actual browser tab and on a phone home screen before calling it done.

Putting It All Together

A favicon takes only a few minutes to make once you understand the pieces: a single square source image, a design that holds up at 16x16 pixels, the right set of exported sizes, and the correct links in your page's HTML. Crop your source down to a clean square, resize it into the handful of sizes browsers and devices expect, generate the full file set, compress what needs compressing, and add the links to your site. The result is a small detail that quietly makes every page on your site look finished, recognizable, and a little more trustworthy.