Sign up for PayPal and start accepting credit card payments instantly.

Saturday, March 15, 2008

My Favicon

How To Create Your Favicon

Recently I noticed that my favicon on the address box and browser tab (in FireFox) is missing. It was replaced by an empty blank square. Neither were the Blogger's Favicon visible Blogger's Favicon

Here's the part I'm going to tell you a little bit of 'History Lesson'. Nah! You're wrong! It's not a fairy tale, but it began just like one. Okay, here goes:

One upon a time not too long ago when I started my hands on blogging, I've read somewhere about the importance of a favicon. So, I created my own favicon using one of the many favicon creators, My Favatar, which I think exist no more. Thus this post. A ha, by now I'm sure your next question will be, What Is A "Favicon" - And What Use Is It? So please, allow me to explain;

A "favicon" (pronounced “fav-eye-con”) short for "favourites icon" is a tiny image which is displayed in various parts of a web browser. It replaces the default image which a browser displays in the address bar, in the favourites list, on the link bar and so on. In my case as you can see above on your browser tab, it look like this: My Favicon Yeah yeah, I know. He's cute, lol!

The use of a "favicon" means that you can change this image to anything you want - and this means that your site should stand out from the others in different parts of the browser:

Cute Little Favicon

You should know, however, that this can be a bit hit-and-miss and sometimes, even though you have set everything up correctly the favicon may not be displayed especially on Internet Explorer due to some unexplainable bug.

Creating A Favicon

A favicon is an image file of the type ".ico", and it always has the file name "favicon.ico". It is a special type of graphic and not many graphics programs can create .ico files. "The Gimp" is an exception, and you can download this free (but rather quirky) graphics package from The Gimp.

Personally I used my favourite Photo Editor, ACDSee. Even though ACDSee cannot create .ico files, but it still can save the image on My Picture's folder.

As already stated, there are many online favicon creator services on the WWW. You can googled it to find out the many favicon creator services. But as it is, I preferred to create my own .ico image after the collapsed of My Favatar.

To create a favicon image, I used this image. It doesn't matter what size it is, as long as it's square. Once I opened it on my favourite Photo Editor I resized it to 16 x 16 pixels.

My favicon Image

You can use most graphics formats. I used a GIF (.gif) for this favicon.

After resizing the image above (you know, the handsomest one!) to 16 x 16 pixel, I saved it in My Picture's folder. Then I went to Ripway, my favourite web hosting and file sharing service. For me, this is the best service to host your images. For a free account you will be allocated 30MB of storage space, and 150 MB of daily downloads. Head over there now and open up a free account. Just tell them, ArahMan7 sent you and I'm sure they gonna treat you well, ;-)

After uploading your favicon's image with Ripway, copy the direct link URL for the favicon's image to your clipboard. Mine will be like this:

Below is the code for your favicon. For Blog*Spot user, after login --> Dashboard --> Page Elements --> Edit HTML. Paste the code into your template between your <head> </head> tag. Preferably at the top.

<!-- My Favatar -->
<link href="" rel="shortcut icon" type="image/x-icon">
<link href="" rel="icon" type="image/gif">
<!-- end My Favatar -->

Troubleshooting Shortcut Icons

If your favicon doesn’t show up after the above steps, try the following:
  • Check that your favicon has been uploaded to your correct blog.
  • Check that your favicon exists by typing in the path of the favicon in your browser like
  • Check the link tag on the homepage refers to the correct path.

If your favicon still doesn’t show up after the above troubleshooting steps, it may be because your web browser is using some internal caching and the favicon has not been refreshed. To check if your favicon is really there:
  • Wait a day or so then check your web site again, your web browser should have refreshed its cache by then.
  • Try viewing your web site using another browser.
  • Use Internet Explorer and bookmark your web site, the favicon should appear on the next reload of your web site in Internet Explorer.

Below is a guidebook for Republican brought to you by The News Room. Enjoy!

Subscribe to My Journey To Recovery

A candle loses nothing by sharing its flame.

7 Responses to "

My Favicon

Anonymous said...

Wish internet explorer didnt wait till after the page loaded to show the icon.

Hopefully the newer upcoming browsers will still show fav icons without needing to modify code again.

Anonymous said...

Hеy there! I just wanted to аsk
іf you ever have any trouble with hackerѕ?
Mу lаst blog (wοгdpresѕ) was hаcked and
I enԁed up losing months of hard work due to nο ԁata backup.

Do you haѵе any methoԁs to protect against haсkeгs?

My weblоg - free playstation 3

Anonymous said...

Heуa thіs is κind of of off tоpic but Ι was wondering if blοgѕ use WYSIWYG еditors or if уоu haνe to mаnuаllу code with HTML.
І'm starting a blog soon but have no coding know-how so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!

my webpage; lose belly fat fast

Anonymous said...

Write mоre, thats all I have to say. Literally, it ѕeems as though you relied on thе video to mаke your point.
You defіnіtеly knοw what yοurе talking
аbout, why ωaste youг intellіgenсe on just рosting videos to yοur weblog when you cоuld be givіng us sоmething еnlіghtening to rеad?

My web-site ... make boobs bigger

Anonymous said...

Hi thеrе wоuld you mіnԁ letting me know ωhich ωeb host you're using? I've loaded yοur blog in 3 ԁiffeгent bгowsers and I
must say thiѕ blοg loads а lot fаsteг then most.
Can you suggest а gooԁ іnternet hoѕting provider at a fаir priсe?
Manу thanks, I аpρreciаte it!

my web page easiest way To lose belly fat

Unknown said...

moncler outlet
ugg boots
polo ralph lauren outlet online
oakley sunglasses wholesale
prada sunglasses wholesale
supra store
hollister clothing store
louis vuitton outlet online
moncler uk
ugg outlet online
discount oakley sunglasses
jordan pas cher
ed hardy
ugg outlet store
uggs outlet
nike free flyknit 5.0
kd shoes
coach outlet store
rolex replica watches
louis vuitton purse
cheap oakley sunglasses
canada goose jackets
kobe 11
cheap nike air max
puma outlet
canada goose outlet
burberry bags
ralph lauren pas cher
red bottoms outlet online
pandora jewelry
canada goose outlet
mont blanc pens outlet

قمم التميز said...

شركة جلي رخام بالرياض
شركة عزل اسطح بالرياض
عزل اسطح بالرياض
شركة عزل اسطح
عزل اسطح

Post a Comment

I loves to receive comments from everybody and I tried to make everything easier for my readers to comments. So please, be nice even though you totally disagree with me. No comment moderation and whatnot here. So, please respect the privileges given.

God's willing, all comments will be followed and replied.

p/s Please leave your URL so that I can follow it and leave comments on yours. No URL = No Comments. It is as simple as that. Thank you in advance.

~ ArahMan7

PS - Word verification has been enable. Sorry about that [Sept 3rd, 2013].

Back To Top