WordPress Tutorials

Creating a Favicon

Adding a Favicon to your WordPress Website

Updated: December 17, 2020
By: RSH Web Editorial Staff
WordPress and Favicon
Menu

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
You will find it next to the "Google Search" Tab at the top of your Browser

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  Tumble  Email It

Related Articles

Reliable, Fast and Secure WordPress Hosting