How: Change Blogger's Favicon

Leave a Comment
"Tiny banner for thumbnails"

Hey hey hey, just change BCPY's favicon, and got to thinking.. I should teach you all too
I have 2 method to make it, you wan easy or hard? see which suit you:


Easy:

1.Open up Gimp, photoshop, mspaint or something you can create a image size about 16 x 16.
Don't really know how to use mspaint or other program? Don't worry you still got helped, See step 3 down there


"I mean seriously, that 16 x 16"

2. Start your design, do what you like and save it

"now you believe me that 16 x 16?, and don't worry it's should be blurry"

3. Now go to [Favicon.cc], and follow what you make in Gimp, photoshop, mspaint or something else.. just joking, proceed to next step. For reader who skip from step 1, you can draw or design your favicon on the canvas then you can step next step and  move on :)

"the black bar is a sample for reader skip from step 1, showing you that you can draw on it"

4. Click 'Import Image', if you draw/design on gimp, photoshop, mspaint or etc
If you draw/design on website, skip this step, proceed to step 6


5. And upload your 16 x 16 image


6.  Then download your favicon file, if you draw/design on website, you also need to download it

"the preview is using internet explorer by the way LOL"

7. Log in to your blogger and click on 'layout', look for favicon and click edit, new window pop up select choose file, and select the file you just downloaded

"1-2-3 poof, finish!!"

8. Make sure press 'Save' and you're done!! Wait about a day or 2 and it'll change

 "Bye penguin :'("



Hard: actually.. not that very hard, but it's complicated tho

1. Still do the same, draw/design on GIMP, photoshop, mspaint or etc, size still the same, about 16 x 16.. but this time I can't very help who doesn't know how to use that, you should follow the 'easy' way

2. After you done, look for a website where you can host it JPG, PNG, or even GIF! and make sure it's has 'Direct link' link, you'll need the link soon

"some website, don't have it"

3. Log in Blogger, Click on 'Template', then edit HTML
TIP for reader who press 'edit HTML' for the first time, before you do anything. Please download a backup of your template on the left side, just in case you did something wrong on the code

"even I need to back up"

4. Copy ths code: 

<link href="your-favicon-links-goes-here" rel="icon" type="image/gif"/>

and look for <b:skin> then paste it ABOVE it. Make sure "your-favicon-links-goes-here" replace with your image 'direct link' which end with .jpg, .png or .gif respectively 

"For lazy one, press anywhere in template code box then 'Ctrl + F' look for <b:skin>

5. Save template, and  done!! Instantly you got result!!


I think that all for this tutorial, be creative on your favicon ya :)

0 comments :