1. Prepare a square image
- Use a square image, at least 256 by 256 pixels. Images that are not square are cropped from the centre.
- Use a simple design: a letter, a symbol or the mark from your logo. Full logos with text become unreadable at 16 pixels.
- Use a PNG with a transparent background so the icon looks good in light and dark browser themes.
If your logo is an SVG, turn it into a PNG first with SVG to PNG.
2. Convert to ICO
- Open PNG to ICO (or JPG to ICO).
- Drop in your square image and click Convert.
- Download the ICO file.
The ICO contains 16, 32, 48, 64, 128 and 256 pixel versions, so the right size is used in tabs, bookmarks, the taskbar and on the desktop.
3. Add it to your website
Rename the file to favicon.ico and upload it to the main folder of your site, so it is available at yoursite.com/favicon.ico. Browsers look there automatically. You can also add this line to the head of your pages:
<link rel="icon" href="/favicon.ico" sizes="any">
On WordPress you do not need the file at all: go to Appearance, Customize, Site Identity and upload a square PNG as the Site Icon.
Why is my old favicon still showing?
Browsers cache favicons for a long time. Open your site in a private window, or clear the browser cache, to see the new one. Search engines update the icon in results on their next visit, which can take a few days or weeks.