Create & Personalize Blog Favicon [Tutorial]-Lose that Orange B

You know when you're online, the icon to the left of your web address?


Well, that is called a favicon and if you blog on Blogger is looks like an orange "B" and on Wordpress it's a black "W".

While you're reading my post right now, you'll see a little house and a "G 2 B" on it.


So there's a FREE way to make your own. You guys know how I love to make my own blogging accessories, cause I'm kinda cheap frugal like that!

You just head over to Favicon and sign up for a free account.
{You have to sign up, or else you can't copy and save your creation- which is annoying since you have to start over, not that I know from experience!}
Once your account is created you can design your favicon however you'd like. Something that signifies your blog theme of blog name is probably a good idea.

There's two ways {that I know of} to add a favicon to a blog.

The 1st Way

Once you've decided you like the icon, you can look at "Preview" and underneath it click to "download" it.
Next go into your Dashboard and click on "Design."
Right under "Add and Arrange Page Elements" you'll see "Favicon" go ahead and click on "edit." You want to add the saved file here. Save the addition and preview it. If anything's wrong you can delete the text out and start over, no worries.

Once you've saved your changes you should be good to go.

 This 2nd Way is a little harder- but it's the way I learned first so I'm sure you can do it too.

Once you've decided you like the icon, you can look at "Preview" and underneath it click to 

"publish under an open license."
You will be prompted to title it, then you'll get directed to a new page that will hold all the icons you make.
Click on the title of your favicon and you'll get a page with the ability to download you icon or copy its code.

There are directions with the code for where to insert the icon's html code. But basically it tells you to go into your Dashboard and click on "Design."
Right under the page tabs you'll see "edit html" go ahead and click on that.
(People say you should copy your whole page before touching it, creating a back up for yourself, since you WILL be inserting code there in just a minute.  But don't worry too much about inserting code into your page layout- you can preview the changes and "clear edits" so nothing to be too freaked out about.)

Now go back to the Favicon website and copy the second html code {the lower one} for your new icon.
Then insert the code in between and . For me it's about 2/3's of the way down the page. {You can just "control F" search for it.}  Then Preview it and if you like it, save your changes.

Good luck with this one guys, but it sounds harder than it is. It's just a little difficult to explain. Let me know if you all have questions!

 Update: I thought I'd add in the new updated version of my favicon to go with my new blog background!

Also- thank you all for letting me know when you've finished making your own! I LOVE getting to see what you guys come up with!

Looking for places to link up your projects? Check out my Party page.

I'm also linked up here.