Follow my renovations on Instagram.

Tutorial on how to change your favicon

If you are not sure what a favicon is, it’s that little orange B that is on the top of the tab on your blog (blogger). You can change this you know! WordPress is just as easy.

I have added the code below for you. So chose a colour and I will show you how to put it into your blog.

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblack.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblack.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblack.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblack.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconyellow.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconyellow.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconyellow.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconyellow.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconseafoam.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconseafoam.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconseafoam.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconseafoam.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconroyal.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconroyal.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconroyal.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconroyal.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconred.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconred.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconred.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconred.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconpurple.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconpurple.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconpurple.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconpurple.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconpink.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconpink.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconpink.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconpink.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconlime.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconlime.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconlime.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconlime.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bcongrey.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bcongrey.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bcongrey.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bcongrey.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconbrown.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconbrown.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconbrown.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconbrown.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblue.jpg’ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblue.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblue.jpg’ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblue.jpg’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

Under each coloured favicon is a code.
To add this to your blog follow the steps:
1. Log in to the dashboard of your blog.
2. Click DESIGN
3. Click HTML
4. Find < / head > (I normally click CTRL F and type in  < / head >  which will easily locate this part for you)
5. Directly ABOVE  < / head >   paste in the code.
6. Save template and view your blog
If you run in to trouble email me.
If you are really clever you can make your own favicon! Make one in photoshop/paint/picnik and save it in to your photobucket account.
Replace this code below in red (RED AREA ONLY!) with your own image link. 

<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblue.jpg‘ rel=’shortcut icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblue.jpg‘ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblue.jpg‘ rel=’icon’/>
<link href=’http://i771.photobucket.com/albums/xx357/k_chambers/bconblue.jpg‘ rel=’icon’ type=’image/vnd.microsoft.icon’/>

Then pop that into your blog as above .

NOTE: It won’t change the orange in your nav bar if you have one. Just tabs/bookmarks/shortcut icon/bookmark icon. Refresh your page a couple of times before it comes up. If it doesn’t work are you using Explorer? Switch to another browser to view it.

With WordPress, just add the code above in to a HTML/TEXT WIDGET and done!

If you want me to make you one and install it also email me and I’ll do it all for $30.

Leave me a comment if you attempt this as I would love to pop over and have a look to see how you went!

7 comments

  • JANE

    Hi Katrina

    Thanks so much for this – I've always wanted to get rid of that hideous orange B!

    I just tried to do it but right-clicking has been disabled on this page so I couldn't copy and paste the code. Is there any way around that or do I have to write it down and then type it in, long-hand?

    And for step 5, is there a word missing? 'Directly above' – where, exactly? I was all ready to find the relevant word in the HTML but I'm not sure which one it is.

    I'd be grateful if you could let me know.

    Many thanks J x

  • Katrina Chambers

    Right click function now off! So sorry! I forgot that bit 🙂

  • Janette

    Yay, thanks Katrina! Just done it and it looks great, you're a clever chicky!
    Jxx

  • Time Worn Style

    Actually I have been wondering about this for ages. How to with typepad though as in which part of the html code do I insert this new code (not the B obviously as I am not with blogger!)?
    Alicia

  • Time Worn Style

    WOO HOO have just worked it out for typepad. Just load your favicon.ico file (it has to be called exactly that name) to your HOME FOLDER in your FILE MANAGER. Typepad will automatically add it to your blog address. If not showing ie. firefox use a hard refresh (Ctrl + F5) once loaded.
    alicia

  • jo_an

    thank you 🙂

  • HideMyAss

    Pretty section of content. I just stumbled upon your blog and in accession capital to assert that I get in fact enjoyed account your blog posts.
    Any way I’ll be subscribing to your feeds and even I achievement you access consistently quickly.

Leave a Reply

Your email address will not be published. Required fields are marked *