Sunday, 5 July 2009

FAVICONS

If you hate that icon (favicon) at the top of your address bar, then here's how to change it to something you do like!


Find an image you like, copyright-free of course, and not too detailed: it will be shrunk into a tiny thumbnail. There are items on my Freebies page, and links in the sidebars if you need to find something. ICONJ also have free images you can use.

Maybe you'd like to right-click and save this rose to your My Pictures folder.

Go to iconj.com and open a free account - you will then be able to upload your image and make it into a favicon! They'll do all the hard work for you - or you can choose one of their free ready-made favicons.
Click on the My Favicon Code button, copy all the code and you'll see they show you where to place it. I found this took a bit of trial and error re placement for my favicon to show, so here's the foolproof way:

  • Go to Layouts > Edit HTML
  • Anywhere on the page, click CTRL+F, which will open a toolbar right at the bottom (just above your Start button). There's a box labelled Find.
  • In the Find box, type in <head>
  • Place the code you copied below this section:
<head>
<b:include data='blog' name='all-head-content'/>
and put it here, just before the Title section you see below

<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
Now click on the Preview button, just below the HTML box, and if you are happy then click Save Template. If you hate it, just click Clear Edits.

That's it - now enjoy your prettier address line!
post signature
your photo name

12 comments:

  1. What fun, Susie! Can you use this to replace the "b" on your blog addy too?

    ReplyDelete
  2. It IS replacing the B in my blog address - and the favicon shows in your tabs, too, when you have a lot of pages open. I love it!

    I think yours might just have to be a cherry? :-)

    ReplyDelete
  3. Thank you for sharing Susie. I will be back for some of your blogging tutorial's

    ReplyDelete
  4. Thanx for this info Susie.. I am going to have a go at it. You are soooo clever!

    ReplyDelete
  5. It just doesn´t seem to work for me, duh! I tried and tried, uploaded diff. favicons but it just didn´t change, the boring B is still there...ah well

    ReplyDelete
  6. DUH!!! IT WORKED!!! YAY!!! Love it, thank you, lol. Must have done something wrong the first 100 of times lol.
    But now it worked.

    Hugs and thanks
    Marian

    ReplyDelete
  7. Yaaay! Hooray! Let's hear it for FAVICONS! No more boring "B"!

    ReplyDelete
  8. Thank you for sharing that tip! I love it!!
    Artful Blessings,
    Kathryn

    ReplyDelete
  9. Cool trick! Tried it and it worked!
    Thanks Susie..
    XOX
    Celia

    ReplyDelete
  10. Fabulous tutorial, Susie! Love my new Favicon. You've really made my week with your signature tutorial and now this :)

    Off to find something else I can fiddle with...

    ReplyDelete
  11. Thank you so much with my changing my layout i got the comment counter to work and was able to put the Favicon on my blog page. All under a hour. Unlike before where I have put in a few hours to not get any where. :)

    ReplyDelete
  12. Asha - Thanks so much for leaving a comment. I am so pleased my tutorials worked for you - it's so satisfying when things work how you want them to, lol.

    ReplyDelete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.