What is a Favicon? If you don’t know what this is, don’t worry, I’ll tell you right now (look in your browser) and I will show you step by step how to add one using a plugin that is just a lot better than using the traditional way of adding code into your theme file. My favicon shows up on smart devices using this one plugin that is free. Are you ready to do this? Note, you may have to make your image a certain size to do this but you might not have to. I am just warning you a head of time.
First things first, you will have to install the Favicon by RealFaviconGenerator plugin and activate it.
I’m going to do this with you, follow my lead:
Go to the plugin page and install the plugin:

Activate the plugin. Navigate to the Appearance tab and click on the favicon link to get started. You will see below that you need to upload an image to use. For my image, I just searched my media images and used my logo image for WPOutcast and cropped the picture. It’s better to use your logo for the favicon because it’s helps a little with branding your name.

Warning Before You Upload An Image
After you upload an image and click the “Generate Favicon” button you will be redirected to another website. That’s ok, it’s supposed to do this to complete all the steps required. Read the rest of the blog post before you do anything further.

When you are on this page, look at each section closely as you can edit stuff before you actually generate the favicon on your blog.
WPOutcast’s Settings
Favicon for iOS – Web Clip

- Settings Tab – I changed the background color
- Assets Tab – check mark every feature
- Dedicated Picture – No changes
Android Tab:

- Main Settings – Changed the colors and named the app with my blog name
- Options – No changes
- Assets – No changes
- dedicated picture – No changes
Windows Metro Tab:

- Settings – No Changes
- Assets – Selected the Medium box
- Dedicated Picture – No Changes
MacOS Safari Tab:

- Select the middle radio button
Favicon Generator Options Tab:

Click on the Generate your Favicons and HTML code button to save changes
Just chill out for a few seconds while you see this image below while you favicons are created and automatically added to your blog.

If you arrive at the page below, you are all done with adding your favicon. Keep in mind that if you have any caching plugins installed, you should empty that cache out. Also clear your web browser cache. Eventually you’ll see the favicon if you followed this tutorial step by step. (final page below)
What To Read Next
- How To Add A Gravatar To Your WordPress Blog
- Schedule Blog Posts: Direct Free Time Towards Other Blogging Needs
- How To Secure A WordPress Blog – A Step By Step Guide
If this tutorial was helpful to you, please consider sharing this with your followers.
Leave a Reply