Make a custom favicon for your blog!

Do you have a favicon? Do you even know what a favicon is? Read on. At the end, you will know it all!

A favicon (short for favorites icon) is a 16×16 pixel square icon associated with a particular website or webpage.
From Wikpedia

I'm going to show you the easy way to make one. There is one program that I highly suggest downloading. It is free, and you can use it for all your quick photo needs. It is IrfanView. I use this program as my default photoviewer on my computer simply because it is so quick and great to use.

When I do a custom favicon, I generally use part of my blog header. Take a look at SeaSide Sharon and Buttermilk Clouds. Do you see my favicon in the address bar? And in Firefox, the favicon is also displayed on the tab. Each of those favicons were taken from my header image.

Here is how to do it:

1. Open your blog so you can see your header (or the part of you blog you wish to make a favicon with)
2. On your keyboard, click the PrtSc Sys Rq button (top row, third from the right)
3. Open IrfanView
4. Click Edit | Paste

What you see now is a picture of your screen and a picture of your header.

1. Placed your cursor in the header and select a 16x16 pixel area
2. Click Edit | Crop Selection
3. Click File | Save As | ICO - Windows Icon 

Upload that image to an online hosting site. You will use the favicon's URL from the hosting site to put it on your blog. I use to use Ripway...but I'm getting away from it because my bandwidth issues. I now use Flickr.

Now you have a little custom favicon! To install your favicon, follow the instructions on this post Adding a Favicon. Since there was some sort of problem with favicons on blogger, I had to find a fix. So be sure to follow the link at the end of that post for a  easy fix.

EDIT: please post a link to your blog with your new favicon so everyone can see!!!!

Classic Blogger Favicon Fix!!

I was missing my favicon on Buttermilk Clouds, which happens to be a classic blogger template. I tried several different things and nothing worked until I tried this.

In your template (towards the top) find this:

<$BlogMetaData$>

Then place the following code right after it.

<link rel="icon" href="FAVICON URL" type="favicon" />
<link rel="shortcut icon" href="FAVICON URL" type="favicon" />

If you have the new blogger template (formerly known as blogger beta) there is a fix for them, also.

Pretty easy. I really love my favicon, and I'm very upset with Blogger for attempting to do away with it. Shame, shame on you Blogger!

Fix for Broken Favicons

I have been bombarded with emails from disgruntled bloggers that have lost their favicons. But, don't despair! There is a fix. I don't know how, or why it happened, but some of my blogs were also missing their favicon. Not all of them. But some. Once again, I don't know why. (Maybe a reader out there knows why.)

Anyway, the good news is, the fix is simple!! There are 2 steps.

Step 1 - find your favicon code in your template. It should be near the top of your template. Copy that code.

Step 2 - Paste that code here:

]]></b:skin>
PASTE ICON CODE HERE
</head>

If I have learned anything from this...we bloggers LOVE our favicons!!

Adding a Favicon

This was more fun! First, let me explain what a 'favicon' is. See the little icon next to my URL in the address bar that looks like this?

That is my favicon. I happened across it at MpP . They have a wonderful collection. Delta-Tango-Bravo was another favorite site. Both have extensive collections. Or, if you have your own graphic, several sites have favicon generators. The one I enjoyed playing with is Favicon from Pics . Once you find (or make) a favicon, you must save it as an 'ico' file. A great graphic viewer (free I might add...I'm all about free) is IrfanView. Now, upload that ico file to your webspace. I use Ripway. This is a free web hosting and online file sharing service.

To get the favicon on your blogger, you need a code to add to your template, and this is it:

<link rel="shortcut icon" href="http://myfavicon.com/favicon.ico" />
<link rel="icon" href="http://myfavicon.com/favicon.ico" />

Replace "http://myfavicon.com/favicon.ico" with the URL of where your webspace stored your ico file, & paste the code between the head tags of your blog. The favicon will now appear in most browsers address bar and bookmarks. (Not sure about the rhyme or reasoning here, but some do...some don't.) Added bonus! If you use Mozilla Firefox (why wouldn't you?) it will also show up on the tabs!!!!

Update: Favicons only appear in IE if the site is in your bookmarks. If the site is not bookmarked, I have discovered a little trick. Left click on the 'e' in the address bar and jiggle it a few times. The favicon will show up!

UPDATE:

12/29/06 - the head tags look like this: <head>and</head>

1/8/07 - it was brought to my attention by a reader, T.M., that the favicon can be saved as a 'png' file and it will work as well.

12/5/08 - Blogger has done things to our favicons. Bad things. But, there is a fix. Read about it: Fix for Broken Favicons