Pages

▼

Thursday, August 26, 2010

How to make a favicon for your site

You might have noticed, this website never had it's own favicon, the nifty little picture that preceeds a URL in every modern browser's address bar. And now it has!. I don't know why I never really bothered with the plain white on orange Blogger B. Maybe it's because I thought it stood for Burgers.


Let me tell you how I did it:

I will first tell you how to make a favicon picture and where to upload it to the web for free if you do not have your own space. Then I will explain how to make your favicon appear for your url by adding some lines of code to your template. This second part is Blogger specific.

1. (being in) The picture.
Select a picture for your favicon. I used the profile picture or avatar that I use on all the webs; here and at Flickr, Youtube, Twitter, Facebook, Vimeo, Wordpress, you name it. Because it's so... recognizable. It has to be at least 64 x 64 pix. Then go to the Free Online Favicon Generator and follow the instructions.

Now that you have your favicon downloaded to your machine you will need to upload it back to the web to a location where it will sit for all eternity so browsers can read the to be augmented code of your page enabling them to show your url with your new favicon.
If you do not have your own webspace you will need to grab some.

I go for 110mb.com which is exactly that: 110 MB of webspace, for free. I do have ample free webspace with my ISP but in case I ever change providers I prefer to claim more neutral territory.
Just register and upload your favicon.ico, and all that other stuff you so dearly needed some on-line back-up for.
That's step 1.

2. Editing your code. (Blogger specific)
Log in, go to your Dashboard. Choose Design. Here you have to click Edit HTML which is situated next to Page Elements in the top left. Now search for this line in the top of your template:

<title><data:blog.pagetitle/></title>


and just after that line add these two lines:

<link href='Favicon URL' rel='shortcut icon'/>
<link href='Favicon URL' rel='icon'/>


Finally replace Favicon URL with the URL of your favicon.ico (for example http://mauritsburgers.110mb.com/favicon.ico) and save your your template.

You did it! Now enjoy your favicon.
op

4 comments:

  1. Peter Berkhout26/8/10 2:36 pm

    Nice article. Good workaround.
    Works great for FireFox but somehow my safaribrowser doesn't wan't to get rid of the Blogger favicon. But who uses safari anyway. ;-)

    ReplyDelete
  2. Maurits Burgers26/8/10 9:18 pm

    Sounds like a latency issue with Safari. Did you try deleting your history?

    ReplyDelete
  3. Peter Berkhout27/8/10 12:38 pm

    Yep. Cleared Cache. Hell, I even removed ~/Library/Safari. Created new user etc. All to no avail.
    Googled some more. Found this article:
    http://www.google.com/support/forum/p/Chrome/thread?tid=3ed9a32fd41adf33&hl=en

    in short: type='image/x-icon in linktag should do the trick.
    I tried it. No result....... Too bad.

    I will not search any further for a solution for Safari. Maybe it is bug. Right now I have more important things to do.

    ReplyDelete
  4. Maurits Burgers27/8/10 1:24 pm

    Thanks for that addition.
    I still think it has to be a cache problem with Safari. I read somewhere that other people experiencing the same fluke had their favicon reappear some hours or days later without a clue why.

    Thanks for the link to:
    http://www.google.com/support/forum/p/Chrome/thread?tid=3ed9a32fd41adf33&hl=en

    ReplyDelete