How to make a favicon
- Add your picture. Drop a logo or any picture on the page, paste it, or click the box. A square picture or a logo with a transparent background works best.
- Choose what the icon shows. The square at the top shows the icon as it will look. Drag the picture to move it and use the slider or the mouse wheel to zoom, or switch to Show the whole picture if you do not want anything cropped.
- Pick the shape, spacing and background, and look at the previews below: 16, 32 and 48 pixels, and the larger phone icon.
- Press Make the favicons, then Download all as ZIP, or take single files from the list.
- Upload the files to the top level of your website and paste the HTML tags into the
<head>of your pages. The tags are shown on the page and can be copied with one button.
What is in the ZIP
| File | What it is for |
|---|---|
favicon.ico | The classic icon file. It holds three pictures, 16, 32 and 48 pixels, and browsers pick the one that fits. Many browsers also ask for /favicon.ico at the top of a site even when there is no tag. |
favicon-16x16.png, favicon-32x32.png | The usual sizes for browser tabs and bookmarks, in PNG. |
favicon-48x48.png, favicon-96x96.png | Larger versions for sharper display on high-density screens and for search engines, which prefer an icon larger than 48 pixels. |
apple-touch-icon.png | 180 × 180 pixels, for when someone adds your site to an iPhone or iPad home screen. It always has a solid background. |
android-chrome-192x192.png, android-chrome-512x512.png | The two sizes that Chrome on Android expects for an installed web app. |
maskable-512x512.png | A 512-pixel icon for Android's adaptive shapes. The picture stays inside the middle 80%, so a round or rounded mask does not cut it off. |
site.webmanifest | The small file that tells Android which icons to use, with your site name and theme color. |
favicon-tags.html | The HTML to paste into your pages. |
Shape, space and background
- Shape can be a square, a square with rounded corners, or a circle. It applies to the browser and Android icons. The Apple touch icon and the maskable icon stay square, because iPhones and Android round them off themselves.
- Space around keeps the picture away from the edges, from 0 to 30% of the icon. A logo that touches the edges looks cramped at 16 pixels, so a little space often helps.
- Background is see-through to begin with. Untick it to pick a color, which fills the whole icon, inside the shape.
- The phone home screen icons always have a solid background. iPhones put black behind anything see-through, which usually looks wrong, so these icons use your background color, or white if you chose see-through.
Adding the favicon to your site
Copy the files to the top level of your site, so that /favicon.ico, /apple-touch-icon.png and the rest can be reached at those addresses, then paste the tags into the <head> of your pages. They look like this:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">The theme-color is the color you chose. If your files are in a folder, change the paths to match. Browsers keep favicons for a long time, so if you replace an old icon and still see the old one, clear the browser's cache for your site or try a private window.
What search engines want
According to Google's favicon guidelines, the icon must be square and at least 8 × 8 pixels, and Google recommends one larger than 48 × 48 so that it looks good on different surfaces. It reads BMP, GIF, ICO, PNG, JPEG, PPM and TIFF files, and wants the icon linked from the home page with a <link rel="icon"> tag. There is one favicon per hostname, its address should stay the same, and neither the home page nor the icon file may be blocked from crawling. Even with all that right, Google says a favicon is not guaranteed to appear, and that a new one can take days to weeks to show up in search results.
Making an icon that reads well when tiny
- Use a simple, bold shape. A tab icon is 16 pixels across. Detail and small text turn to mush, so a single letter or a simple symbol works better than a full logo with a tagline.
- Crop in. Zoom on the most recognizable part of the logo, for example the symbol without the wordmark.
- Check the previews on the page at 16 and 32 pixels. They are drawn at the real size, so what you see is what the tab will show.
- Contrast matters. A dark icon vanishes on a dark browser theme and a pale one on a light theme. A solid background color, or a circle with a color behind it, works on both.
Limits
- The tool makes raster icons (PNG and ICO). It does not make an SVG favicon, which can adapt to dark mode in some browsers.
- The
favicon.icoholds 16, 32 and 48 pixel pictures. A 256-pixel Windows icon is not included. - One picture produces the whole set, so every size shows the same shape. Detailed pictures can look soft at 16 pixels, and a simplified version of your logo may be the better source.
- HEIC photos work. In browsers other than Safari, the page downloads a decoder of about 3 MB the first time you add one.
Privacy
The icons are made inside this tab, and the file on your disk is never changed or deleted. For what the site collects, see our privacy policy.
Frequently asked questions
What size should a favicon be?
Browsers use 16 and 32 pixels for tabs and bookmarks, 180 for the iPhone home screen, and 192 and 512 for Android. Google recommends an icon larger than 48 × 48 pixels for search results. This tool makes all of these from one picture.
How do I make a favicon.ico from a PNG or JPG?
Add the picture, choose how it fills the square, and press Make the favicons. The ZIP contains a real favicon.ico with 16, 32 and 48 pixel pictures inside.
Why is the iPhone icon not see-through?
iPhones fill a see-through icon with black, which rarely looks right. The Apple touch icon is therefore made with a solid background, in your color or white.
What is a maskable icon?
Android can cut app icons into different shapes, such as circles or rounded squares. A maskable icon keeps its picture inside the middle 80%, so that no shape cuts off the important part. The ZIP includes one, and the manifest says so.
Why does my old favicon still show?
Browsers cache favicons for a long time. Clear the cache for your site, or open it in a private window. Search engines can take days to weeks to pick up a new one.
Does it make an SVG favicon?
No. It makes PNG and ICO files, which every browser reads. An SVG favicon needs vector artwork that a picture file does not contain.