7.12.2011

How to Add a Favicon to Your Blog

Just the other day I figured out how to add a favicon to my blog.

What's a favicon!?! Take a look at the top left hand side of my blog. You see that little orange square with the blogger symbol on it?! Okay, now look up from that just a smidge. You will see the tab with "KdBuggie Boutique" on it. Next to that {on the left} is a super cute teal square with a "k" in it. That is the favicon.

Normally it is the same orange blogger logo... but I figured out how to change it to my own little design. {yay!!!!!}
Now it looks like this:


Want to change yours?
Here's how:

1. Start by designing your favicon. I used photoshop for mine. You can use any program that will let you set the pixel heighth and width of your file. Create a new page in your program with a canvas that is 32 pixels wide and 32 pixels high -- yes, it's small!

2. Keep it simple! It is a teeny tiny square.... so don't do anything too complicated!

3. Save your file. Then visit this website here and on the right hand side of your screen is a little file converter. You upload your created favicon and it will give you a link for your file. Keep that page open as you complete the next steps.

4.  Now, open your blog. Go to your dashboard and click on "design". The choose to view the HTML of your blog. *If you aren't used to working with the HTML codes on your blog, opt to save your template before you begin -- which is really a good idea to do regardless!

5. Click to expand the widgets. Type "CTRL+F" to open the find box. Type " <head> ". Once you find it, copy the link for your favicon. Then paste it on your HTML just above the <head> that you searched for.

6. DO NOT HIT SAVE JUST YET!!! Before you do, click the "preview" button and make sure that your favicon is there. If it is, then go ahead and click save. If not... try the whole thing again!

Hope this helps!!!

{These instructions have only been tested using blogger. If you have another server for your blog and decide to give it a try, let me know... I would love to know if it worked for you!}

**As a sidenote... blogger just added an option to their design page. If you take a look at the layout of your blog {on the main design page I believe} at the top of your layout there is not a favicon option. You can upload your own favicon there from your computer rather than messing with all of the html stuff. It didn't work for me, and I had to do it manually, but feel free to give it a shot! I hope it works for you!}
Pin It now!

3 comments:

  1. Shucks! It didn't work for me. :(

    ReplyDelete
  2. @Heidi: Make sure you have the right code to add into your html. The website will give you 2 codes. Copy the one on the top.

    ReplyDelete
  3. Heidi: Looks like it worked.... so cute!!!

    ReplyDelete

Thank you so much for stopping by. I would love to hear from you!