August 11, 2011

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!

26 comments:

  1. This is great, thanks! I have made the favicon, put it on Blogger and saved it, but it's still not showing up. I'll try option 2 now.

    ReplyDelete
  2. I have been wondering how to do this! Thanks, I'm definitely going to give it a try :)

    ReplyDelete
  3. Wow! I have been wondering about this! Thanks so much!

    ReplyDelete
  4. Thanks so much for this tutorial! I'm getting stuff at this part: "Then insert the code in between and ."

    I tried the first way, and it didn't work.

    Thank you!

    ReplyDelete
  5. oh thanks! I was wondering how to do this!!!

    ReplyDelete
  6. Hi Becca! I wanted you to know I mentioned your blog in my post about my new favicon. Thanks so much for the tutorial! Like everyone else has said, "I've been wondering how to do this!" Hope you stop by for a visit.

    ReplyDelete
  7. Stopping by on the Inspiration Friday. I just changed my favicon, and it's such a nice feature. Thanks for this great tutorial. If you have a chance, check out my one-minute devotional site: http://biblelovenotes.com. Thanks!

    ReplyDelete
  8. Again, another great tip, which I plan to save and execute! Thanks so much!

    ReplyDelete
  9. Thanks! That is so cool and I've wondered about it but figured you had to pay for it or something.

    ReplyDelete
  10. Thanks so much for sharing this!! I've always wondered how to customize my favicon and always thought it was some crazy hard thing to do. This was easy! I am so grateful you posted this.

    ReplyDelete
  11. Thank you so much for this tutorial! I can't wait to change mine!

    ReplyDelete
  12. Can't wait to try this, Becca! Thanks so much!

    ReplyDelete
  13. OMG! I'm so glad I found you and your instructions! I'm pretty new to blogging, and I really wanted to have a nice favicon instead of that plain ol' B! Thanks a bunch!

    ReplyDelete
  14. This is easier than how I did it...I think...I did a post on it too.
    http://ritamay-days.blogspot.com/2011/09/whats-favicon.html
    I'll have to check out your favicon site.
    Thanks! I love favicons.

    ReplyDelete
  15. Thanks so much for sharing this tip! Would love it you would share this at my Monday link up!

    http://threemangoseeds.blogspot.com/2011/10/3rd-motivational-monday-link-up.html

    Hope to see you there!
    Clydia {Three Mango Seeds}

    ReplyDelete
  16. This is a new one to try! Thanks so much for sharing!

    Thanks for linking to a Round Tuit!
    Hope you have a great week!
    Jill @ Creating my way to Success
    http://www.jembellish.blogspot.com/

    ReplyDelete
  17. Nice post.....
    I've always wondered how people do this!

    ReplyDelete
  18. Thanks for this post! I'm going to try it this week. Found you on TJ :)

    ReplyDelete
  19. Great idea! Thanks for sharing! I will have to try this. Always wondered how to do customize it...
    Visiting from Creative Bloggers Party

    ReplyDelete
  20. Thank you for the great tutorial. I am off to try this. I stopped by from the Creative Bloggers hop. I am now following with GFC. I can't wait to learn more. Hope you stop by for a visit. Have a great week. http://grandmabonniescloset.blogspot.com/

    ReplyDelete
  21. Thank you so much for this! I can't wait to try it!

    ReplyDelete
  22. Thanks for posting this - I just changed mine. http://lovemycountryhome.blogspot.com

    ReplyDelete
  23. THANK YOU a million times for posting these directions! Mine is a new blog, and I've been trying to figure out the favicon thing for days! Not totally satisfied with what I have, but at least now I know how to 'play' with it! Nancy

    ReplyDelete

Thoughts? Questions? Opinions? Let's talk about it!

09 10 11 12
Blogging tips