Favicon WordPress: how to change your site's icon?

By Fabien Paupier

Published: April 23, 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 little image that appears in the tabs of Chrome, Firefox, Edge, etc. browsers, and in the bookmarks manager:

When several tabs are open, the favicon makes it easy to find the tab you're looking for. Some online applications personalize the favicon with a small counter to show, for example, the number of e-mails received without keeping the 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'll see in the next step.

Creating an icon in PNG format

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

Converting a PNG image into a favicon

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

Select your image in PNG, JPG, JPEG or GIF format
Click on Generate Favicon!
Right-click on the small icon and 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'll need FTP (File Transfer Protocol) software like FileZilla.
Connect to the server hosting your WordPress website. To do this, you can use the free FileZilla software. Then upload your favicon.ico file to the root of your site. The site root is the folder containing all 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 our other tutorials on how to create a multilingual site or how to switch your WordPress site to HTTPS.

Article translated from French