Favicon WordPress: how can I change the icon on my site?

By Fabien Paupier

Published: 23 April 2025

If you've installed WordPress recently, you've probably noticed that no icon appears in the browser tab when you're on your site. This icon that you see on others is called a "Favicon". Whether it's to correct a branding or usability problem, follow this Wordpress tutorial which explains how to create a beautiful icon for your site.

See all software Content Management System

What is a favicon?

A favicon is the small image that appears in the tabs of Chrome, Firefox, Edge, etc. browsers and in the bookmarks manager:

When you have several tabs open, the favicon makes it easy to find the tab you are looking for. Some online applications personalise the favicon with a small counter so you can see, for example, how many emails you've received without keeping your mailbox on the screen.
The favicon file always has the same name and extension: favicon.ico. It is created on the basis of a classic image, as we will see in the next step.

Creating an icon in PNG format

The first step is to create an icon in PNG format in the size you want, as long as it's a square (256x256 pixels, for example). You can do this in Photoshop or any other drawing program.
Why PNG? Because the PNG format supports transparent areas, colour gradients and does not compress images. It's the best basis for creating a favicon. That said, you can also start from an image in JPG, JPEG or GIF format.

Convert the PNG image into a favicon

Once you've created your image, go to favicongenerator.com and follow these steps:

Select your image in PNG, JPG, JPEG or GIF format
Click on Generate Favicon!
Right-click on the small icon and then click on "Save image as".
Save the image to your desktop

See all software Content Management System

Add the favicon to WordPress

WordPress does not yet allow you to add a favicon. To do this, you need to use FTP (File Transfer Protocol) software such as FileZilla.
Connect to the server that hosts your WordPress website. To do this, you can use the free FileZilla software. Then send your favicon.ico file to the root of your site. The root of the site is the folder containing all the WordPress files. Among other things, it contains the index.php file. Place favicon.ico in this same directory.

Reload your site, after clearing your browser's cache: the Favicon now appears in the browser tab!

Your WordPress now looks even more professional thanks to your icon. Don't forget to read the other tutorials for creating a multilingual site or for switching your WordPress site to HTTPS.

Article translated from French