1. Start with a square image

  • Square, at least 256 × 256 pixels; 512 × 512 is ideal.
  • A transparent background (PNG) so the icon has no white box around it.
  • Simple and bold: it will be shown as small as 16 × 16 pixels. A single letter or symbol works better than a full logo with text.

2. Convert it to ICO

  1. Open PNG to ICO (or JPG to ICO if your logo is a JPG, which will have a solid background).
  2. Drop in your image, select Convert, and download the .ico file.
  3. Rename it to favicon.ico.

Images bigger than 256 × 256 are scaled down to 256, the largest size ICO supports, and transparency is kept.

3. Put it on your website

Upload favicon.ico to the root of your site, so it opens at yoursite.com/favicon.ico. Browsers look there automatically. To be explicit, add this inside the <head> of your pages:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The second line is for iPhones and iPads when someone adds your site to their home screen: a 180 × 180 PNG with a solid background works best there.

Not showing up?

Browsers cache favicons hard. Open the site in a private window, or visit /favicon.ico directly and refresh, to see the new one.