fbpx
Skip links

Favicon Tutorial – for blogger


Favicons are the small image logos that appears on the tabs or next to all your bookmarks. Here’s the tutorial to help you customize your own Favicon….



It helps your site stand out in a list of bookmarks(compare to the other blank page looking icons or the infamous big orange B’s for bloggers.)


————————————————————————————————–

Tools to make the icon:

There are plenty of icon making programs such as Macroangelo, Imagicon…etc, but photoshop works just fine as long as you save it as “.ico” file. (I’ll teach you how in abit. Png/gif files are also ok for making favicons.)

Guidelines for favicons:

Make sure the icon’s 16 by 16 pixels.

With limited space(yea, it’s REALLY small), make sure the graphic is simple before it turns out to be complete blur.

Animated icons can sound really cool, but they can be very distracting and take away from the page itself.

Save file into .ico format:

Other than using the specialized program, photoshop has the same function to save file into “.ico”. This is really meant for photoshop version CS or above(older version may work, but I’ve never tried it): So, once you’re done with the 16×16 graphic, click “Save as”, then click the drop down box and select “Jpeg”, as for file name put in “NAME.ico“.

Whatever the name is, make sure to add “.ico” at the end.

Upload:

To whichever online server you prefer.

————————————————————————————————–

After the creative process comes the more technical implmentation of your fine work:

Log into Blogger => click “Layout” => “edit HTML” => look for the following:


It should be on the top few lines of the source code.

Then, copy the following code right beneath it.

“Make sure to change the URL portion to where to store your icon.

Like this:

If you use Png file:

If you use Gif file:

It’s all the same, just post the correpsonding codes under the the first line that I asked you to search for.

Bam, then you’re done.


Click “Refresh” to see your icon at its best.

————————————————————————————————–

There are plenty of Favicons out there. Here’s for inspiration:

-Benson|| Follow me on Twitter || Join the movement|| Check the original website

http://www.theimaginaryzebra.com

Choose What I Write Next

Too many things to write, too little time. You get to vote for what I write next. Just fill in the form below.

2. Cast Your Vote


Leave a comment