Favicon tutorial: create your website's icon

Module 1

Favicons explained in 5 minutes

A tiny image that is everywhere

The word is short for favorites icon. It first appeared in 1999 in Internet Explorer, to decorate the list of favourite sites. Today it shows up in many places:

• in the browser tab, next to the page title;
• in bookmarks and history;
• in Google results, to the left of the site name;
• on a phone's home screen, when someone adds your site there like an app.

When a visitor has fifteen tabs open, it is often the only clue that helps them find yours again. Without a favicon, the browser shows a grey default icon, which makes a site look unfinished.

Why several sizes and several files

Each place has its own requirements. A tab shows the icon at 16 or 32 pixels, Google wants a square of at least 48 pixels, the iPhone expects a 180-pixel image, and Android asks for 192 and 512 pixels. Shrinking a large image down to 16 pixels often gives a blurry result; enlarging a small one makes it blocky.

Hence a small set of files, each with its own job:

• favicon.ico for tabs and bookmarks;
• apple-touch-icon.png for iPhone and iPad;
• icon-192.png, icon-512.png and a “maskable” version for Android;
• site.webmanifest, a small file that gives Android the site's name and the list of its icons.

A few lines of code in the page tell the browser where to find each file.

ICO, PNG or SVG?

The ICO format is a container: one file holds several sizes (here 16, 32 and 48 pixels), and the browser picks the one it needs. It is the oldest format and the one understood everywhere.

PNG is an ordinary image in a single size that supports transparency. It is the format used for phone icons. JPEG, on the other hand, has no transparency and blurs fine edges: best avoided.

SVG is a vector image: it is described by shapes rather than dots, so it stays sharp at any size. Most recent browsers accept it as a favicon. Our generator only creates an icon.svg if you give it a logo that is already an SVG: turning a photo into an SVG would not make it any sharper.

Transparency: what iPhone and Android do

In a tab, a transparent background is ideal: the icon sits on the browser's own colour, light or dark. Watch out for a black logo, though, which vanishes on a dark tab.

The iPhone does not accept transparency on the home screen: it fills transparent areas with black and rounds the corners itself. That is why the tool places your logo on the background colour you chose to create apple-touch-icon.png.

Android crops icons differently depending on the phone: into a circle, a rounded square, a teardrop. A so-called maskable icon allows for this: the design must fit inside a central circle 80% of the icon's width, the safe zone. Everything else is just background that may be cut off. The tool adds this margin automatically.

Readable at 16 pixels, and a patient cache

A 16 by 16 pixel icon has just 256 dots in total. A written name, a slogan or thin lines turn into a smudge. Keep only your logo's symbol, or one or two high-contrast initials that fill the square. A quick test: look at the preview with your eyes half closed.

Once installed, your new icon may take a while to show. Browsers keep the old one in their memory, the cache, sometimes for days. To check, open your site in a private window. Google updates the icons in its results as it revisits sites: allow a few days to a few weeks.

Key takeawayA good favicon is simple, high-contrast and comes as several files: ICO for tabs, PNG on a solid background for the iPhone, PNG with a safe margin for Android.

Words to know

Favicon

A small icon that represents a website in tabs, bookmarks, Google results and on home screens.

ICO

A file format that bundles several sizes of the same icon into one file.

SVG

A vector image format described by shapes: it stays sharp at any size.

Transparency

Parts of an image with no colour, where the screen's background shows through. PNG and SVG support it, JPEG does not.

apple-touch-icon

A 180-pixel icon used by iPhone and iPad when someone adds a site to the home screen.

Maskable icon

An Android icon with a safety margin, designed to be cropped into a circle or rounded square.

Manifest

The site.webmanifest file: a small text file that gives Android the site's name, icons and colour.

Cache

The browser's memory, which keeps files it has already seen to go faster, sometimes for too long.

Module 2

Create your favicon step by step

Open the tool

Module 3

Real-life examples

A club with no logo

Clara's Gardens does not have a logo yet. The treasurer uses the Initials tab: “CG” in white on the site's green, rounded shape. He downloads the Icon for WordPress (512 px) and installs it in two minutes. At last, the site's tab stands out from the others.

A bakery with a very detailed logo

The bakery's logo shows an ear of wheat, a windmill and the name in old-style lettering. At 16 pixels, it all blurs together. The manager crops the logo down to the ear of wheat, saves it as a 1000-pixel square PNG, then sets the margin to the minimum. The wheat stays readable in the tab and on the home screen.

An icon that will not change

Holly Cottage replaced its favicon, but the old one keeps showing. In a private window, the new one appears: it was the cache. On Google, it follows a few days later. To check the rest of the site, the owner then runs the complete website diagnosis.

Common mistakes

• Shrinking the whole logo, text included, down to 16 pixels: it becomes an unreadable smudge.
• Keeping a black logo on a transparent background: it disappears in a dark-mode tab.
• Starting from a 32-pixel image for phones: the home screen icon will be blurry.
• Drawing right up to the edge of the Android icon: cropping it into a circle cuts off part of the logo.
• Thinking the installation failed when the browser is simply still showing the old icon from memory.

The essentials

• The favicon appears in tabs, bookmarks, Google results and on phone home screens.
• Each use has its size: 16 to 48 pixels for computers, 180 for the iPhone, 192 and 512 for Android.
• ICO for compatibility, PNG for phones, SVG for perfect sharpness if your logo is a vector.
• The iPhone refuses transparency and Android crops the icon: plan a background and a margin.
• A good favicon is simple, high-contrast and checked in a private window.

Test yourself

A few questions to check that everything is clear.