Light Mode
Dark Mode

Sign Up For Our Newsletter

Subscribe to get our latest content by email receive a free download on ‘How to Add Value to Your Home’.

Thank you for subscribing to the newsletter.

Oops. Something went wrong. Please try again later.

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 …

Share:

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!

Be the first to read my stories

Get Inspired by the World of Interior Design

Thank you for subscribing to the newsletter.

Oops. Something went wrong. Please try again later.

Katrina

Katrina

Full-time day job as interior designer for sustainable construction company Passionate about creating beautiful, functional spaces tailored to clients' needs and styles.

Comments

  1. JANE

    Reply
    December 24, 2010

    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

  2. Katrina Chambers

    Reply
    December 24, 2010

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

  3. Janette

    Reply
    December 27, 2010

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

  4. Time Worn Style

    Reply
    December 28, 2010

    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

  5. Time Worn Style

    Reply
    December 28, 2010

    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

  6. jo_an

    Reply
    September 2, 2011

    thank you 🙂

  7. HideMyAss

    Reply
    July 9, 2013

    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 *