Links to stuff on this blog

Use the Site Index of Projects page link above for an easier way to find stuff on my blog that you might be looking for!

Saturday, August 28, 2010

How I made my Blogger favicon.ico image without special software (for free!)

If you are reading this post you might have noticed something a little different about my Blog. Instead of the orange and white B at the top of the browser tab there is now (or should be) a orange, white and black OB. This little image is a favicon and there are a ton of websites that talk about how to make your own  favicon and add them to your website or Blog. I decided to add one to my blog and because this blog is all about the things I do I decided to write about how I did it!
 
Favicon Images

The favicon icon or image is the little image that appears on a browser tab, and in the bar at the top that shows the web address see the above picture. Also at times it sometimes  shows up in the favorites bookmark. Why doesn't it always show up in the bookmark? I don't know but many people seem to have the same problem. If I figure it out I'll update this post or if you know the answer let me know!  
From what I have read the favicon.ico image was something that Microsoft added in Explorer some time ago and was adopted by many other (maybe all) browsers after that. As a side note if you are reading this and you don't see my custom favicon image in the places you see in the above picture, please let me know by leaving a comment or an email (ottobelden@yahoo.com) and let me know what browser you are using.
  
On to what I did to make this work in Blogger. 
  
First off you have to have an image that is the right size and format. The size is generally 16 x 16 pixels which is really small. I say generally because some multiples of 16 like 32 x 32 or 64 x 64 also work with some browsers. Additionally the image should be in the favicon.ico or icon format. Lots of browsers can use jpeg, gif or other types but for compatibility to all (or most) browsers the ico or icon format is best. If you want to know a lot more about the details, size compatibility etc... check out the Wikipedia entry HERE.
  
I decided that because this image is so small I would keep it simple. Because my name is Otto Belden I and this is my Blogger blog I thought that an OB in an orange block would be appropriate. Anything will work but having something simple and unique is probably best. I started in Microsoft Paint and I made an orange box 256 X 256 pixels using the:  Piant> Image> Attributes> Height and Width settings. Set it for pixels and type in a multiple of 16. Using a multiple makes sure it will scale properly when it gets shrunk to size. I made mine a similar  color to the default Blogger "B" favicon. Using paint I added the text O and the text B by hand and using the 'brush' tool filled in all the odd spaces left by paint as best I could. I wasn't too worried about the details because once the image is scaled down to 16 x 16 all the details will be lost!
 
My Favicon Image
   
The next part is a little trickier because you can't use paint to scale down the image very accurately and you can't save it in the .ico or icon format in Blogger. What you can do is go to a site like this one HERE that will scale it and convert it for you for free! I picked that site (www.iconj.com) because they also host the image as well as convert it for you. You have to find some place that will host (store) the image for you because Blogger won't let you upload .ico images.
  
There are lots of sites that will host the image, others that convert it, some that let you make it from scratch or pick from lots of pre-made images etc... No matter how you do it what you need to end up with is a favicon.ico image and someplace on the web that it is stored.
  
Once you have the image and it's location on the web you have to modify your Blogger template so when someones views your Blog their browser is instructed where to look for the image. The site I used above creates the HTML code that you need to add to you template but if you don't have that you can make your own like this:
  
<link rel="shortcut icon" href="http://www.iconj.com/ico/n/n/nn8gzsd9xu.ico" type="image/x-icon" />
 
The above line is the HTML link to my personal favicon image and it's located at the green location. Copy that line above and replace the green part with the location that your favicon image is stored.
  
The next step is the scary one for me because I don't know how to program HTML, but if I can do it anyone can do it! Once you have the above line modified go into Blogger and click on the Design Tab. From there go to Template and choose Download Full Template which will back up your current template just in case something goes horribly wrong! The chance of something going wrong is small and if it does don't worry you can always hit the "discard changes" button and everything is fine. Just don't hit Save until you have previewed your Blog and it works the way you want.
  




<title><data:blog.pageTitle/></title>


<link href='http://www.iconj.com/ico/n/n/nn8gzsd9xu.ico' rel='shortcut icon' type='image/x-icon'/>


    <b:skin><![CDATA[/*-----------------------------------------------

The fuchsia colored line with the data:blog.pageTitle in it is what you are looking for and it's near the top of the template in the first dozen lines or so. Right below that past in the
"shortcut icon" line that has the location of your favicon from above. The remainder of the Template in fuchsia above stays the same. You are just adding one line right below the template Title line.
  
At that point you can save your template and it should have you favicon in the browser tab and in the address bar! If it doesn't work you might need to clear your browsers history or clear the browser cache. Another thing to look for is open a new browser window and paste in the URL location of your favicon icon. It should open up in a your browser showing your little icon. If it doesn't then odds are you modified your template correctly but something is wrong with where you are hosting the image.
  
I have found Blogger to be pretty fail safe as far a modifying things and making mistakes. I am not a programmer and I don't have a lot of experience but I have managed to get things done by trial and error - lots of errors. My advice is to download and back up your template before you make any changes and don't save anything unless you have previewed it and it looks OK. Blogger seems to catch a lot of stuff and won't let you make too many mistakes.
  
Let me know if you have any problems and I'll be happy to help out any way I can!

2 comments:

  1. I have been trying so many ways and your way worked for me. Thank you

    ReplyDelete
  2. You are welcome! I'm glad that you found it useful!

    ReplyDelete