Favicon generator

What a favicon is, and where it shows up

A favicon is the small square icon that stands for your website. The name is short for “favorite icon”: the first browser to show one put it beside your bookmarks, which it called Favorites.

You see it in browser tabs, beside the page title, 16 pixels wide or 32 on a sharper screen. It marks your site in bookmarks and the browsing history too. When someone saves your site to a phone's home screen, it becomes an app icon. And Google shows it next to your site's name in search results.

Everywhere, its job is the same: to be recognized at a glance among other icons.

Why one favicon becomes a set of files

Each of those places came along at a different time and asks for its own file. The favicon generator above makes them all from one image.

Browser tabs, bookmarks and history use favicon.ico, one file with 16, 32 and 48 pixel versions inside. It's the oldest format: when a page names no icon, browsers still look for favicon.ico in the site's root folder.

Start from an SVG and you also get favicon.svg, which browsers that can draw SVG icons use instead. Made of shapes rather than pixels, it stays sharp on any screen, as our guide to logo file formats explains.

iPhones and iPads use apple-touch-icon.png, 180 pixels square, when someone adds your site to the home screen. An iPhone fills transparent areas with black, so this icon always gets a solid background: your color, or white if you chose transparent.

Android phones, and sites installed as apps from a browser, use icon-192.png and icon-512.png. They find them through site.webmanifest, a small text file that tells browsers your site's name, if you typed one in the tool, and where its larger icons are.

The loose PNGs from 16 to 48 pixels are spares for services that want a PNG. For search results, Google reads the icon links in your home page's HTML.

How to add the favicon files to your site

If you, or your developer, edit the site's files, it takes two steps.

First, unzip the download and put the files in your site's root folder, the top folder where the home page lives. To check, add /favicon.ico to your site's address: the icon should open.

Second, paste the HTML lines from the README (the tool shows them too) into the head of your pages: the section at the top of the HTML that holds the page's title. There's a line each for the ICO file, the Apple touch icon and the manifest, plus the SVG if you have one.

Usually every page shares one template, so you only paste them once. Delete any older icon lines first, or browsers may keep picking the old icon.

On a site builder you can skip both steps: upload icon-512.png in its site icon setting, and the builder adds the HTML for you.

How to make a logo work at 16 pixels

At 16 by 16, your whole icon is 256 tiny squares of color. Most logos weren't drawn for that.

Start with the symbol, not the name: squeeze an eight-letter name into 16 pixels and each letter gets two pixels of width. No symbol? Use the first letter, big and bold. Our logo font guide shows how much longer heavy letters survive than thin ones.

Then take detail out. Very thin lines and small gaps blur into their surroundings, and a slogan turns into a smudge.

What counts is light against dark, not the colors themselves. Tabs are light or dark depending on the theme, and a navy icon vanishes on a dark tab bar. If your mark is dark, give it a light background in the tool, or the other way around.

Padding, the space between your logo and the edge of the square, is a trade-off. Too much and the logo shrinks in the tab. Too little and an iPhone, which rounds off home-screen icons, clips the logo's corners.

Finally, check the light and dark tab previews above at their real size, without zooming in. Our free logo checker goes further: it shrinks your logo to 32 pixels and measures how much detail survives.

When to redraw the mark instead of shrinking it

Sometimes nothing saves it. In a detailed illustration or a 3D look built on shading, the detail is the design, and at 16 pixels it's gone. This tool can resize your logo, but it can't redraw it.

That doesn't make it a bad logo, only one made for bigger places. Draw a small version on purpose: a simplified symbol, or your initial in your brand font. Keep your colors and something of the shape, and people will connect the two. We'd take a clear initial over a blurry miniature every time.

Need a new mark? Our AI logo generator designs one from your brand name, plus a short description if you like. Logos from our logo templates come with the symbol as a separate file when they have one, and every logo you buy from us includes its favicon files.