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!
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!
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:
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.
<link href='http://www.iconj.com/ico/n/n/nn8gzsd9xu.ico' rel='shortcut icon' type='image/x-icon'/>
<b:skin>< |
| 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><
I have been trying so many ways and your way worked for me. Thank you
ReplyDeleteYou are welcome! I'm glad that you found it useful!
ReplyDelete