Creating a Favicon

WordPress Tutorials
For Beginners and Advanced

Adding a Favicon to your WordPress Website

Updated: May 3, 2022
By: RSH Web Editorial Staff

Contact Us

WordPress and Favicon
Menu

Favicon

A favicon is a small image you usually see next to the tittle of the websites you are browsing. It is normally the image displayed in the beginning of every tab of your Browser.

For example Google Favicon icon looks like this: wordpress favicon

RSH Web Services favicon: wordpress favicon

Creating a Favicon

To add a favicon to your WordPress website you first need to create the Favicon

A favicon can be created by using any graphics/image editing software that allows the saving of .ico files
Make the image square by cropping or adding space around it. Resize the image to 16x16 or 32x32 pixels. Save the file as favicon.ico.

There are also online services that will allow you to create a favicon for free
Faviconer.com or 3dcart.com. Also see our Free Icons and Image Resources

The image should be clear and visually appealing. Ideally it should be designed to match your site’s brand image and/or content.

Site Icon feature

The site Icon feature is built into WordPress. You will find it by navigating to
Administration Screen > Appearance > Customize

Click Site Identity. Click "Select Image" (located under the Site Icon subheading). Click on the Upload Files tab, then click Select Files to upload the image file that you prepared in the previous step.

wordpress posts

Manually Installing a Favicon

If your WordPress version or Theme does not support the Site Icon option described above, you can use the below method to manually add a Favicon.

Use an FTP Client to upload the new favicon.ico file you created above into your current Theme’s main folder
If there is one already there delete it.

Next you will need to edit the "header.php" File
From your WordPress admin screen click on "Appearance" > "Theme Editor"
Select the file called "Header" or "header.php" to edit the file
Find the line of code that begins with
<link rel="shortcut icon"
And ends with
"/favicon.ico">
This will be at the beginning of the page with in the <head> tag
Overwrite if it exists or if not add the following code below the HTML tag.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">.

Replace "/favicon.ico" with the name of the image you made
If you right click on this page and click on "View Source" You will see how we are also using a Favicon. But ours is in a "gif: format
<link rel="shortcut icon" type="image/x-icon" href="/images/globe.gif">.

You may need to clear your browser’s cache and cookies in order for the changes to take effect.

Tweet  Share  Pin  Email It.

Related Articles

We will save you time and headaches by setting up your WordPress Website quickly and easily.