# Favicon tutorial: create your website's icon A favicon is the little image that stands for your website in browser tabs, bookmarks, Google and on phone home screens. This short course explains why it takes several files, and how to get them in a few clicks. - Mini-course : Beginner - URL : https://ressources.online/outils/favicon/tutoriel/en/ - Open the tool : https://ressources.online/outils/favicon/ - Updated on 2026-09-27 ## What you will learn - Know where the favicon appears and why it helps visitors recognise you. - Understand the different files: ICO, PNG, SVG, iPhone and Android icons. - Design an icon that stays readable at 16 pixels. - Install the icons on WordPress or a hand-built site, then check the result. ## 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 takeaway : A 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. ## Create your favicon step by step ### Step 1 : Choose the source: logo or initials Open the [favicon generator](https://ressources.online/outils/favicon/). There are two tabs: **My logo** and **Initials**. With **My logo**, click **Choose my logo** or drag the file into the box. The best result comes from an SVG, or a square PNG of at least 512 pixels. If the image is too small or very wide, a message lets you know. > Tip : A very wide logo, with the name written next to the symbol, becomes tiny in a square: keep just the symbol. ### Step 2 : Or build an icon from your initials In the **Initials** tab, type one to three letters in **Letters (1 to 3)**, for example “CG” for Clara's Gardens. Choose the **Background colour**, the **Letter colour** and the **Font**: Montserrat, Georgia or Courier. Reuse your website's colours and keep a strong contrast: light letters on a dark background, or the other way round. ### Step 3 : Set the shape, margin and background Under **Shape**, choose **Square**, **Rounded** or **Round**. The **Margin** slider leaves more or less space around the design: reduce it so the icon fills the square well. With a logo, the **Keep the background transparent** box is ticked by default. The **Background colour** is still used for the iPhone icon, which cannot be transparent. Finally, enter the **Site name (for phones)**: it appears under the icon on the home screen. > Tip : A short name, 12 characters at most, shows in full under the icon on phones. ### Step 4 : Check the previews The **Preview** column shows your icon in a light tab and a dark tab, then **In Google results** and **On the home screen** of an iPhone and an Android phone. Check three things: the icon is recognisable in the small tab, it stays visible on the dark tab, and nothing important is cut off in Android's circle. ### Step 5 : Download the files There are two buttons: - **Download all (.zip)**: the archive contains `favicon.ico`, `apple-touch-icon.png`, the Android icons, `site.webmanifest`, `icon.svg` if your logo is an SVG, and a file with the code to paste. - **Icon for WordPress (512 px)**: a single square image, which also suits Wix, Squarespace, Shopify or Jimdo. The HTML code appears below, with a **Copy** button. ### Step 6 : Install the icons and check **WordPress**: **Appearance** › **Customize** › **Site Identity** › **Site Icon** (or **Settings** › **General** with a recent theme). Choose the 512-pixel image, then **Publish**: WordPress makes the other sizes itself. **Hand-built site**: unzip the .zip, put the files at the root of the site, then paste the code into the `` section of every page. Then check in a private window. > Tip : If the old icon is still showing, it is not necessarily a mistake: it is often just the browser cache. ## 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](https://ressources.online/outils/diagnostic/). ## 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 1. Why does the iPhone icon need a background colour? - [x] Because the iPhone fills transparency with black - [ ] Because the iPhone only shows photos - [ ] Because the file would be too heavy On the home screen, the iPhone does not accept transparency: empty areas turn black. A solid background avoids that surprise. 2. What is the margin of Android's “maskable” icon for? - [ ] To make the file lighter - [ ] To display the site name - [x] To keep the whole design when Android crops the icon Android crops the icon into a circle or rounded square. The design must fit inside the central safe zone so it is not cut off. 3. Your new favicon does not appear in your browser. What do you do first? - [ ] Make all the icons again - [x] Open the site in a private window - [ ] Delete the website The browser often keeps the old icon in its cache. A private window shows the real situation. 4. What works best for an icon that must be readable at 16 pixels? - [ ] The full logo with the name written out - [ ] A photo of the team - [x] The symbol alone, or one or two high-contrast initials At 16 pixels, only simple, high-contrast shapes stay recognisable. Text and fine details disappear. --- Source : https://ressources.online/outils/favicon/tutoriel/en/ (Ressources.online, Favicon and icons)