How To Create Favicons For Your Blog Or Site

by Sherry Riter in Blog tips  ,Blogger,Favicon,Woo Us To Your Blog,Wordpress

Visual effects always grab attention when someone happens upon a website or blog. Images such as brand logos or pictures are great ways to make a website stand out in the crowd. A favicon, also known as a favorites icon, shortcut icon, website icon, URL icon, or bookmark icon can add glam and individuality.

The address bar is the location bar where the URL of the site can be found. In this website widget, also called the address bar, the current URL will be found and can also be changed by simply typing in a new URL. The name Uniform Resource Locator has been shortened into the popular acronym URL. To the left of the URL in the address bar is where the favicon can be found.


Let’s take a gander at a few favicons you might recognize…

favicons you might recognize

I’m going to pretend I didn’t hear you say, “I’m not artistic enough to make my own favicon.”

Everyone can make a favicon and I am going to share my favorite site that you can go to for help. It is called

On the right side of this site, you will see a box filled with colors – click the desired color. Then on the blank palette in the center, click the squares that you want to be filled with that color. It is like coloring with the cursor.

How to create a favicon

You keep going back and forth until you have created the design.

How to create a favicon

When the design is complete, download the favicon as a .ico or publish it for general use.

How to create a favicon
How to create a favicon

How to create a favicon

Put the favicon.ico file into your webserver directory. However, if you have a Blogger account, you must save the file at an .ico hosting site.

My favorite .ico hosting site is Icon J because you can create favicons and have them hosted for free. This site also has a:

  • Picture to Icon converter
  • Pixel-Icon generator
  • 18,000+ animated favicons

The converters will change your pictures to look like this:

How to create a favicon

Yes, the favicons must be small…16×16 pixels to be exact.

After you have created, saved, downloaded and then uploaded the .ico file into the hosting website, a URL will be generated for your favicon.

If you have a Blogger blog, copy the URL for the favicon and paste it in the head section of your template as shown below. Either code should work, but if the first one doesn’t, use the other one.

How to create a favicon

Are you feeling creative and excited about creating your favicon?


Do you need a little inspiration?

I knew you would, so here are a few links filled with fantastic favicons to get the gray matter pumping out ideas.

Favicons are no longer a mystery to you! I hope you enjoy adding some pizazz to your site or blog with all this new knowledge you have acquired. The favicon is a perfect visual image that will help differentiate your blog or site from all the others on the internet. Think outside the box and use something that expresses the purpose of your blog or site and helps it to be immediately recognizable. Isn’t it amazing how a little picture in the form of a favicon can make all the difference in the world?

The last “Woo Us To Your Blog” post explored the hidden value of the Alexa Tool Bar. Do you remember why it is good for your blog if you have this tool bar set up?

As always, attached is the weekly Linky to enter either the main URL to your site or add each post you publish throughout the week. You don’t have to do anything special, just drop your link(s) in and get a little extra exposure to your site – as many of your blogs as you would like to link and as many individual posts as you desire to link.

Until next week’s wooing post, create your own favicon and then brag about it by leaving your URL in this post and/or next weeks’ Woo Us To Your Blog post.

Watching for your creative favicons,

The Redhead Riter


This post was written by...

Sherry Riter is also known as The Redhead Riter. Sherry is witty, intelligent and addictive as she writes about cooking, family, marriage, failures, blogging tips, art, humor, inspiration, travel, PTSD and aging. Her goal is to inspire, motivate, educate and to make her audience laugh. Sherry embraces being a redhead and helps others to see the redhead point of view…"In some eras redheads were worshipped while others thought us witches. Personally, I like the former and think every day is 'Love a redhead day!'" She can also be found on Facebook, Google+, Pinterest, StumbleUpon, Linkedin, tweeting as @TheRedheadRiter and you can subscribe to her free blog feed.

{ 11 comments… read them below or add one }

1 VedetteTX November 21, 2010 at 1:24 pm

Thanks so much for the tute! I never actually thought I could have my own custom favicon. (I wasn't even aware it was called a favicon) I created one for my blog I guess you could call it a little sneak peak into my forthcoming blog design overhaul. 🙂


2 Reggie November 21, 2010 at 3:53 pm

I have been wanting a favicon for my blog and website and this should do it. I'm gonna give it a try. thanks so much.


3 R.L.Scovens November 21, 2010 at 4:46 pm

I did it!! I did it!!! Thank you so much for this. I had tried once before and could never get it to work!


4 Doreen Lombardo November 22, 2010 at 12:07 am

Oh Red, you are going to make my head explode!!!!! LOL I just figured out, well, almost anyway, HTML. Now you hit me with favicons – runs away screaming, hides behind couch.

I can't deal. I'm running a fever, feel like poo poo, and my throat is on fire (thinking I have strep, seeing doc tomorow a.m.) and I'm tooooooo confuzzled right now to try this.

Maybe when I'm feeling better. Thanks for the tutorial.


5 Kristi November 22, 2010 at 8:46 pm

I've almost got it, but ran into a problem as to where to put the URL in my header. I took a screen shot of my header and will post it in the Group Forum at Blog Frog where my original Favicon question was. Maybe you can help point me in the right direction.


6 Holly November 23, 2010 at 1:22 am

You always have the coolest tips!! Thanks! <3


7 Madison November 23, 2010 at 1:03 pm

Thanks for that website! I'll have to give it a try.


8 Bev November 28, 2010 at 6:57 am

Thank you Red. I knew how to add a favicon to a webpage and now you have taught me how to add them to blogger also. You are so smart!


9 Dan Robinson December 3, 2010 at 2:18 am

This is interesting! I will have to visit the site and give this a try. I should probably get a logo or something first.


10 Stacey @ Mom's Daily Insight PR January 17, 2011 at 12:29 am

Just found this post. I didn't even know you could make a favicon. Thank you so much for this tutorial! You rock 🙂

~ Stacey ~


11 esp January 19, 2011 at 2:33 pm

Thank you! This was easier than I thought!


Leave a Comment

"How rare and wonderful is that flash of a moment
when we realize we have discovered a friend."

~William E. Rothschild~

Thank you for taking the time to share your thoughts.
I respond back to all comments.


Previous post:

Next post: