A Favicon is the small image that is displayed next to the URL in your browser. Favicons do not help in search engine rankings but help in establishing an identity for your site. If you have a unique favicon, users can identify your site with your favicon. This Wordpress Tutorial will help you add a favicon to your Wordpress website.
To add a Favicon to your blog you must first have a favicon image. Favicon images must be 16 px x16 px. You can custom make your own favicon or you can use an online Favicon Generator. I used the site – favicon.cc where you can upload an image to convert into a favicon or select a favicon to download. Download the favicon with a .ico extension.
To easily add a Favicon to your WordPress site, I recommend to use a Free WordPress plugin called – All in One Favicon. That way even if you change your Wordpress Theme, your favicon will still be safely stored and will not have to edit the header.php file again to add the favicon code. Below are steps to Add a Favicon to your WordPress website with this free WordPress plugin.
Overview of steps to Add Favicon to WordPress Blog
- Download/Generate Favicon
- Install WordPress Plugin – All in One Favicon
- Activate WordPress Plugin – All in One Favicon
- Go to ‘All in One Favicon’ WordPress Plugin Settings
- Upload Frontend Favicon Image
- Upload Backend Favicon Image
- See Favicon Change in URL
Steps:
1. Download/Generate Favicon
You can download or generate your own Favicon. I used the site favicon.cc and used the Favicon Generator.
2. Install WordPress Plugin – All in One Favicon
All in One Favicon is a free WordPress Plugin that you can download from the WordPress Plugin Directory.
Add Favicon to WordPress Blog – All in One Favicon Plugin
- Login to your WordPress Administrator Backend
- Click on ‘Plugins’, ‘Add New’
- Search for Plugin ‘All in One Favicon’
- Click on ‘Install Now‘
3. Activate WordPress Plugin – All in One Favicon
After you install the WordPress plugin, you must activate it.
Activate All in One Favicon WordPress Plugin
- Click on ‘Plugins’, ‘Installed Plugins’
- Search for ‘All in one Favicon’
- Click on ‘Activate‘
4. Go to ‘All in One Favicon’ WordPress Plugin Settings
After you activate the Favicon plugin, now you can upload your favicon you generated from step 1. In this favicon free plugin, you can upload favicon images that have Extensions – ICO, GIF, PNG.
All in one Favicon Plugin Settings
- Click on ‘Settings’
- Click on ‘All in one Favicon‘
5. Upload Frontend Favicon Image
The good thing about this Favicon Plugin is that you can upload a favicon with the extension of ICO, GIF and PNG. You can also upload favicon images from your Apple Touch Icon. I have an ICO image, so I will use the ICO Frontend upload button.
Frontend Favicon Image – All in one favicon WordPress plugin
- I have an ICO image, so I will use the ICO frontend upload button
- Click on ‘Upload‘
- Select ICO file from computer
- It will initially show ‘fakepath’ but later it will change to a real image url
- Click on ‘Save Changes’
6. Upload Backend Favicon Image
You can also change the Favicon of your Administrator Backend site URL. The options are the same as the frontend. You can choose a different favicon for your frontend and backend.
Backend Favicon – All in one Favicon WordPress Plugin
- In Backend Settings
- I’m going to use the same favicon used for my frontend, so I will use the ICO Backend
- Click on ‘Upload‘
- Select Favicon from your computer
- Click on ‘Save Changes‘
7. See Favicon Change in URL
Now you can refresh your site and see the favicon changed to the image you chose in step 1 and uploaded in step 5 and 6.
Favicon in URL – All in one Favicon WordPress Plugin
The change for me was pretty fast. I was able to see the new favicon almost immediately.
Hope that helps you. Please leave a comment if you have any questions.
Thanks,
