Adding a Favicon to your WordPress Website

Tips, Trick and Resources to Learn WordPress

For Beginners, Intermediate and Advanced Users

favicon is short for favorite icon

Updated: October 1, 2023
By: RSH Web Editorial Staff

Contact Us

WordPress and Favicon
Menu

WordPress and 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's favicon: Google favicon

WordPress.org's favicon: WordPress favicon

RSH Web Services favicon: RSH Web 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.

Favicon WordPress Plugins

Favicon Rotator

Easily set site favicon and even rotate through multiple icons. By Archetyped

Easy Digital Downloads – Custom Favicon

Adds a Custom updated favicon to Easy Digital Downloads. Displays how many items are in your cart in the favicon just like Gmail. By kprajapati22

Favicon

Create and install your favicon for all platforms: PC/Mac, iPhone/iPad, Android devices, Windows 8 tablets. By Philippe Bernard

All In One Favicon

Easily add a Favicon to your site and the WordPress admin pages. Complete with upload functionality. Supports all three Favicon types (ico,png,gif).

Heroic Favicon Generator

Heroic Favicon Generator is your one-click favicon generator for WordPress. By HeroThemes

SVG Favicon

Upload cool vector art from your favorite vector app in seconds! Support is common for SVG. By a 415 Production

Pk Favicon Manager

Change Favicon image of your WordPress website. By using this WordPress plugin you can easily upload and use your own Favicon icon for the website. By Pradnyankur Nikam

Favicon Extender

Extend the native WordPress Site Icon functionality to use different icons for Android, iOS and Windows. By Giorgos Sarigiannidis

Multicons [ Multiple Favicons ]

Now includes favicons for Android devices. Completely re-written in version 4.2 Multicons is a multi-favicon code generator. By Doc4

Complete WordPress Resources

Tweet  Share  Pin  Email It.

Related Articles

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