↑↓ to move · Enter to open · Esc to close
How to add a favicon to a website so it shows in tabs, Google, and on phones

How to add a favicon to a website so it shows in tabs, Google, and on phones

One favicon.ico in the root folder used to be enough. Today browser tabs, Google results, and phone home screens each ask for a different file, so you need a small set and the tags that point to it.

By · Updated

One icon file is no longer enough

Current Chrome, Edge, and Firefox put an SVG favicon in the tab. Browsers still request /favicon.ico when a page has no icon tags, for example when you open a PDF. Google wants a favicon whose side is a multiple of 48 px. An iPhone puts a 180 × 180 apple-touch-icon on the home screen and paints its transparent pixels black. Android and installable web apps read 192 and 512 px icons from the web app manifest.

Skip one of these and that spot shows a blank or default icon, or your logo sits on a black square. A wide logo has its own problem: shrunk to 16 px it can't be read, so a single letter or symbol usually works better.

Build the files, then link them

Add your logo to the Favicon Generator, ideally as an SVG, or as a PNG or JPG of at least 512 × 512 pixels. It builds seven files: favicon.ico with 16, 32, and 48 px images, favicon.svg, favicon-96x96.png, a 180 px apple-touch-icon.png, 192 and 512 px icons for Android, and site.webmanifest. You can put the icon on a colored square, add a dark mode version inside favicon.svg, and set a folder and a version number. You get one ZIP and the exact code to paste into your pages, and the logo never leaves your browser.

The site.webmanifest in that ZIP holds the app name, the short name, the theme color, and the two Android icons. If the site should install as an app, build a fuller manifest with the Web App Manifest Generator, with the start URL, display mode, background color, and a maskable icon. It also gives you the <link rel="manifest"> and theme-color tags. Chrome offers to install a site only when the manifest has a name or short_name, a start_url, a display other than browser, and icons of at least 192 and 512 pixels.

Add a favicon to your website

  1. Add your logo to the Favicon Generator and check the tab, Google, and home screen previews.
  2. Enter a folder if the files won't sit in the root of your site, and a version number if you are replacing an old favicon.
  3. Download the ZIP and upload the files to that folder.
  4. Paste the HTML tags from the install steps into the head of every page.
  5. Reload the page with Ctrl+F5 and look at the tab.
  6. If the site should install as an app, make a full manifest in the Web App Manifest Generator and link it from the head.

What these tools leave to you

  • Only favicon.svg has a dark version. A browser that shows the PNG or ICO file always shows the light one.
  • The SVG cleaner removes scripts and anything that loads another file, including a style block that pulls in a web font. Turn text into paths before you upload.
  • Raster images under 48 × 48 pixels are refused, and under 512 px the home screen icons look soft.
  • A manifest alone doesn't make a site work offline. That needs a service worker.
  • Neither tool inspects your live site. After installing, open it and look at the tab.

Frequently asked questions

What size should a favicon be?

Start from an SVG or an image of at least 512 × 512 pixels. Tabs show the icon at 16 or 32 pixels, but phones ask for 180, 192, and 512 pixel versions.

Do I still need favicon.ico?

Keep it. Pages without icon tags, PDFs opened in the browser, and many feed readers still request /favicon.ico from the root of the site.

Why does my old favicon still show after I replaced it?

Browsers cache favicons for a long time. Reload with Ctrl+F5, or set a version so every address ends in ?v= and the browser fetches the new files.

Where does the favicon HTML code go?

Inside the <head> of every page. The Favicon Generator shows the exact tags in its install steps.

Tools used in this guide

  • Favicon GeneratorImage Tools

    Turns one logo into favicon.ico, favicon.svg, Apple and Android icons, and the HTML that installs them.

More from the blog

All guides