How To Add A Favicon Using A Plugin That Works On Smart Devices

(Last Updated On: January 19, 2017)

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:

favicon 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.

favicon uploder

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.

favicon ios

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

favicon ios

  1. Settings Tab – I changed the background color
  2. Assets Tab – check mark every feature
  3. Dedicated Picture – No changes

Android Tab:

favicon android

  • 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:

favicon  metro

  • Settings – No Changes
  • Assets – Selected the Medium box
  • Dedicated Picture – No Changes

MacOS Safari Tab:

favicon safari

  • Select the middle radio button

Favicon Generator Options Tab:

favicon options

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.

favicon generator

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)

favicon finished

What To Read Next

If this tutorial was helpful to you, please consider sharing this with your followers.

Leave a Reply

13 Shares
Share6
Share4
+11
Tweet1
Stumble1