EN

How to make a favicon for your website

Last updated: 28 October 2026

A favicon is the small icon next to your site’s name in browser tabs, bookmarks, history and, on mobile, in Google’s search results. Without one, browsers show a generic globe and your site looks unfinished. Making a good one takes a few minutes.

Start with the right image

  • Square, at least 256 × 256 pixels, ideally as a PNG or SVG with a transparent background.
  • Simple: at 16 × 16 pixels only bold shapes survive. A logo mark or a single letter works much better than a full logo with text.
  • High contrast, so it is visible on both light and dark browser themes.

If your logo is an SVG file, you can export a large PNG from it with SVG to PNG, and if your image is not square yet, Resize Image helps you get the dimensions right.

Which files you need

Different places look for different files. A sensible, modern set is:

  • favicon.ico in the root of your site, containing 16, 32 and 48 pixel versions. Browsers and many other tools still request /favicon.ico automatically, even if your HTML points elsewhere.
  • An SVG icon (optional), which modern browsers can use at any size.
  • apple-touch-icon.png, 180 × 180 pixels, used when someone adds your site to an iPhone or iPad home screen.

Google’s search results use your favicon too. Its guidelines ask for a square icon whose size is a multiple of 48 pixels, so including the 48 × 48 version in your ICO file, or providing a 96 or 192 pixel PNG, covers that.

Create the favicon.ico

  1. Open PNG to ICO and drop in your square PNG. JPG, WebP and SVG work too.
  2. Tick the sizes 16, 32 and 48. Add 256 only if you also want to use the file as a Windows icon.
  3. Download the file and upload it to the top folder of your site as favicon.ico, so it is available at yoursite.com/favicon.ico.

Add the HTML

Put these lines inside the <head> of every page, adjusting the file names to yours:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Browsers that understand SVG pick the SVG, the rest fall back to the ICO. If you do not have an SVG version, leave out the second line.

Why is my old icon still showing?

Browsers cache favicons for a long time. Open the icon’s address directly, reload it, or check in a private window. Google updates the icon in search results the next time it crawls your home page, which can take days or weeks.

Tools used in this guide

More guides