Create A Favicon For Your Blog – You’re Doing It Wrong

Last updated on August 1st, 2018 at 07:03 pm

This won’t be a long tutorial, but it is something that you should do whenever you blog goes live. In this tutorial I am going to show you how to create a favicon for your WordPress blog the right way, from start to finish.

Now you might think that you already created your favicon the right way, but what I’m about to show you is going to surprise you. (at least it did me)

[clickToTweet tweet=”Learn to manage your blog, skills to make money. #WordPress #freetraining  at susanvelez.com ” quote=”Learn to manage your blog, skills to make money. #WordPress #freetraining at susanvelez.com ” theme=”style4″]

How to Create A Favicon For Your WordPress Blog

Before we can get into the tutorial, you might be wondering, what is a favicon? Well let me show you what it is.

Open up your WordPress blog in your favorite browser and look at the top left hand side of the tab, also known as the title bar.

What do you see?

If you look closely you will see that one has no favicon and my live WordPress blog has a small 16px by 16px favicon.

A favicon is important because it:

• Helps build your brand recognition
• Establishes credibility with your readers

If your blog already has a favicon then great, you don’t need this tutorial. You can now browse to my other WordPress tutorials, or maybe you need to learn how to install Google Analytics on your blog.

However, if you want to see what your favicon looks like and get an analysis of it, then test it out here. You might be amazed like I was about mine.

As you can see from the favicon analysis. My favicon needs some help.

[thrive_2step id=’860′][/thrive_2step]

Why You Need To Create A New Favicon

After running an analysis of my favicon, I realized that my favicon was missing several high resolution images.

With so many different types of browsers and devices, it’s important to make sure that your favicon looks good on all devices. If you want to master the art of favicons, read this.

You can continue using the basic 16 x 16px favicon. However, if you want to follow along and get a good to go green light on the analysis, I’m going to show you exactly what I do.

I am going to be creating a brand new favicon along side you and will get everything to look good in all the browsers.

Now this tutorial will not show you how to install the favicon. I will create a different tutorial on that later. I don’t want to make it too long and my goal is to help you create a favicon that looks good on all devices.

So let’s improve our analysis results.

Browse to Favicon Generator

There are several other favicon generators available online, but for this tutorial we will be using this one. It’s free and easy to use.

I am a huge fan of free stuff. I am sure that you are as well.

The best part is that we will be able to run an analysis check after we complete the steps.

Browse to your computer and choose your logo. (I’m going to assume you already have an image you’re going to be using for your favicon)

The favicon generator will list the types of files it supports as well as the file size.

Step 1: Click on Select your Favicon

Browse your computer and select your logo that you want to display in the title bar.

Click select picture

Step 2: Choose your Favicon settings

You may have to play around with the different settings until you pass the favicon checker.

This is how I set my settings up. You can set yours exactly like mine or feel free to play around with the settings till you get it to look the way you want it to.

I will run through the settings for each one, you can follow along as I go through each one.

iOS Safari: Selected dedicated picture

Favicon for Android Chrome: I’m not really sure about these settings as mine still wasn’t able to pass the analysis. However, I chose dedicated picture and I uploaded a logo with the dimensions of 192 x 192px.

Windows Metro: Assets >> Medium, square icon, declared with two HTML markups >> Medium, square icon

macOS Safari: Pick picture for Safari pinned tab (I used the 192px by 192px image)

Favicon Generator Options: Choose the path you want to store your images.

The generator recommends that you just place these icons in your root directory. However, I chose to create a folder called images and just dropped everything in there.

My New Analysis Results

You can now see mine now shows all green and everything is fine.

There you have it, you now know how to create a favicon for your blog that will look good regardless of how people access your site.

As your blog continues to grow, if you’ve installed Google Analytics, you will notice that not many people use desktops anymore.

I am probably still one of the few people who use a 27″ iMac everyday. I know most people use laptops.

Final Take Away

If you’re going to create a favicon for your website, you might as well create it the right way. Once you’ve created your favicon and it passes the analysis, it’s time to upload it to your blog.

You have to take into consideration all the different devices that someone will access your blog from. The basic 16 x 16 favicon alone is not the answer to creating a favicon for your WordPress blog.

If you followed the steps above, your site will be covered and will support iOS, Android, Windows 8 Metro and desktop browsers.

[thrive_2step id=’860′][/thrive_2step]

Just like anything else you do for your website, before you get started, make sure you take the time to backup your blog.

Now that you know how to create an awesome favicon, do you know how to create a Gravatar?

Let me know if you ran your site through the analysis checker and what your results were. Were you happy with your analysis results? Are you taking action to fix your results or just NOT going to worry about it?