Freitag, 25. März 2011

How to add a custom Icon to your blog

Not exactly a tip for Ubuntu users only, but this one might be useful for you!

I think the standard blogger / blogspot favicon is quiet ugly.
Even if you don't think it's ugly, you have to agree to the fact that one icon can not fit hundreds of thousands of different blogs. All with different themes and designs etc.

In order to change your favicon you will have to upload it to some imagehost and link it in your html code, because blogger does not give you any webspace or the ability to easily integrate your own icon. The problem is: most imagehosts don't accept the *.ico format.
Even if you found an imagehost that accepts icons you would encounter another problem. The image can easily be deleted by the hoster due to high traffic or whatever.

So here's my bulletproof way to embed your own favicon into your blog:

1.  Create or download an icon you like. (You can use The Gimp to save any image as an icon)


1.Upload it to this base 64 encoder.

2.Copy the base64 encoded output.

3.Paste it into this little code snippet:
<link href='data:image/x-icon;base64,[YOUR BASE64 ENCODED STRING]' rel='shortcut icon' type='image/x-icon' />

4.Go to Blogger Dashboard > Design > Edit HTML Find this piece of code
</head>

5.paste the whole snippet right in front of it.


6.That's it, enjoy your new custom favicon!

26 Kommentare:

ctweten hat gesagt…

Sweet. I'll probably do this later today :]

psyke hat gesagt…

So glad I've found this. I have been using Ubuntu for a while.

George Valentine hat gesagt…

cool thanks! i've been thinking about ubuntu and this might push me over the edge

John Wayne hat gesagt…

Very Helpful :) ty great work

Nemesis hat gesagt…

thanks fot the tip

Asty hat gesagt…

oh nice, im about to make one right now. thanks!

Colin B hat gesagt…

Awesome! :O
I'm going to make one for myself when i'm not so lazy

psyke hat gesagt…

Are you sure this respects the blogger ToS?

dende hat gesagt…

Pretty much, yes.
Could not find find anything referring to Icons in the TOS.

Digbert hat gesagt…

nice tutorial :)

Kuda hat gesagt…

Will this work in cs5 instead of gimp?

Naits hat gesagt…

thx for the sweet guide ! Followed =)

dende hat gesagt…

I don't now @Kuda. But i think Photoshop is able to export to the *.ico format as well.

Pseudonachrichten hat gesagt…

nice thank you very much :D

Totenkreuz hat gesagt…

That's incredible!!!

A.C.Brown hat gesagt…

O_O it's so shiny

Drej hat gesagt…

Awesome, will try it later tonight. Thanks!

Photo Blog hat gesagt…

Wow, thats cool im going to give it a try :D Cudos to you brother!

amBored hat gesagt…

yeah know this :)

Mr Duke hat gesagt…

Very cool, I'm always on the lookout for tips on how to improve my blog. I hope to see some more ideas in the future!

http://much2doabout0.blogspot.com/

Frank Null hat gesagt…

will try

Lehan hat gesagt…

Usefull info, will try later on my netbook.

ZeroTime hat gesagt…

Gonna try this out in a few minutes

Crose hat gesagt…

Fantastic! I figured that you could do this on Blogger, but wasn't exactly sure. Thanks for the tip!

Team Panda hat gesagt…

good stuff, ill be sure to try it out. thanks!

Killerko hat gesagt…

didn't know you can do this.. can give it a try later, thanks

Kommentar veröffentlichen