Sep 26, 2010

Change Blogger FavIcon



Before doing this Tutorial I highly recomend you backup your Template by using the 'Download Full Template' link under 'Design View' in your blogger settings.



Ever wanted a cool looking Icon in front of your Blogger URL but can't because Google Blocks it? Well heres a workaround.
First we need an Icon editor. I recomend getting IcoFx because its free and easy to use. Lets get started Download the Icon Editor and Install.


Select 'File' in upper left hand of screen and sellect 'New' a window will popup tick the following options:
Colors>True Color + Alpha Channel (32 bits)- this denotes the color and bit depth
Size>32x32- this denotes the icons size in pixels, I choose 32x32px so I can add a bit more detail this can be set at 16x16 if you like.
Hit 'Ok' to continue
To the right are your tools you can use to draw, they are pretty much self explainitory so I won't get into that for now.
I'll start my Icon by drawing a square with corners cut off with the 'Rounded Rectangle' tool and filling in the collor with the 'Paint Bucket' tool. You may also what to experiment with the 'effects' option in the upper left of the main menu. If you make a mistake you can use the undo button or by pressing 'ctrl' & 'z' at the same time. After you are all finished editing and are happy with your design you'll need to save your work. To do so go to 'File'>'Save As' and save as 'favicon.ico' Try to remember where you save it as it my be difficult to locate after you exit out of the program.
 Now we need somewhere to host the '.ico' file we created and be able to hotlink to our blog I have found that http://www.picpanda.com is an excelent source for this
A)Select 'Choose File' and browse to where you saved favicon.ico
B)Select 'Upload' to upload the file to Picpanda
Select and highlight & copy the code in the 'Hotlink for Websites' area as shown in the picture and paste it into a new notepad document
This may seem a little tricky but is really simple once you understand, the code we just copied is not exactualy what we want we need to extract just a snipit of it.
Look at the code and right after it says '<img src=' copy the web address that are in quotes and paste it under the other code in notepad. It should look something like this.


Now copy this code: <link href='xxx' rel='shortcut icon' type='image/x-icon'/>
Replace 'xxx' whith the web address you just copied, it should now look similar to this.
Next go to your blog and choose 'Design'>'Edit HTML' and look for a snippit of code that should look like this <title><data:blog.pageTitle/></title> and past in the Code that you copied to notepad after.
Hit 'Save Template' & then preview. That should be it. Enjoy having your own customized Favicon!
Custom Favicon Displayed in FireFox






If you followed my instructions step by step carefully you should now have a custom Favicon showing before your url like mine in the picture to the left. Be sure to check back often as more content is added daily. Good luck and happy Blogging.

8 comments:

Crunky said...

wow... although i think if google gets the idea you're hacking them they will unleash the robot army to destroy y... oh no... thay saw me type that... they're COMING!!!

Juice said...

lol its not a hack...

roger said...

dang so thats how u do it.
i might have to set it up.

Naj said...

cool dude! i've been meaning to look for tutorials to do this. thanks!

momo said...

oh, yay!

SilverWind said...

Good tut! I've made these before but in Paint.

RoodNverse said...

cool wery nice tutorial

Muhunty said...

ty for the tutorial mate i will do this tonight .

Post a Comment