Adding a Favicon to your Website

My Favicon Image


There has been something missing on my blog.  I had it on my old blog on blogger. When I moved to WordPress,  I quickly realized it wasn’t as easy to add all the bells and whistles I wanted, like I had on blogger.

What was I missing?? A FAVICON!! I wanted a Favicon and haven’t had the time to figure out how do it on WordPress.

What is a Favicon for anyone who might not know??

It’s that little square graphic before the URL on a lot of websites.

Why was I suddenly obsessed with this today?  Because today I didn’t wake up feeling so hot.  For a week I have had a sore throat and headache.  Two days ago the nausea decided to come to the party.  I guess not too different from what half the U.S. is infected with right now.  Being a diabetic, I don’t like strep to fester – So off to the doctor-pronto!!  Scored me some meds, and I have been reassured all will be well by the end of the weekend! Yea!!

Meanwhile back at the ranch, my nausea isn’t cooperating with me moving around so much.

Perfect….Perfect time to park myself on my favorite spot on the couch and work on some of the bells and whistles on my blog.

Now that I have strep, I am gonna also get me a Favicon!

And I am gonna show you, how you too, can get one for yourself.

Everyone deserves a favicon, not just the big named sites!!

Its not hard. I promise!  I figured out how to do it and so can you!!


What you need to do first:

Decide on a graphic that you would like to use.  I used the three letters from my website/business name and arranged them so they overlap and become more interesting.  It is my brand.  A brand is important because it is a visual reference of who you are and what you are about.

We all know what this image is….Target….Target Brand!!

 See?  You need an instant recognizable brand for yourself.


Decide on what you think will be your “brand” and design a 16  x 16 px image.

I used Photoshop to design mine.  Any photo editing software will work. Here is a hint: I worked on mine in 64 x 64 px image.  16px is so small that it is really difficult to work with.  Work in bigger and then change the image size down to 16 x 16 px before you save it.  (in Photoshop, I do this by going to Image>Image Size> then change the size to 16 x 16 px.)  Now save the image to .png format.

Getting your icon into the proper format:

You will need to change it to .ico format but Photoshop won’t let you do this directly.  If your software allows you to save it to .ico , do that now.  Otherwise, there are online converters that will change the format for you.  This is the one I used here.  Once at the site, go to:  #16 Convert to Icon.

Once you have the .ico file, you should name it to favicon.ico, and upload it to to your root directory where the site resides.

Putting your favicon in your URL:

You need to open your header.php file which is in your template folder. This is done in the HTML editor in your computer, or on your WordPress Admin Panel.

To do that, go to your blog dashboard, and find Editor.  In my blog it looks like this:

Next, open the Header.php.  On my WordPress Admin it is on the far right.  It looks like this:

Just a few more steps, and you’re done!!

You need to add the following code before </head>.  (Just copy and paste into your HTML editor)

<link rel=”shortcut icon” href=”/favicon.ico”>
<link rel=”icon” type=”image/gif” href=”/favicon.ico”>

Now, upload and your done!!! You might need to refresh your screen to see your favicon. 

See wasn’t that easy?

You worked hard for your favicon, why don’t you share yours in the comment section!  And score yourself some bloglovin while your at it!!

If you have any questions…don’t hesitate to email me or ask in the comment section…I’d be glad to help!

Smiles!!



subscribebuttonfinished

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow Me