Welcome!
Let us help you improve your search engine rankings,capture
traffic, monetize, and make your blog look awesome!

Thursday, September 20, 2012

Starting A Blog 108 - Adding Favicons In Blogger

When you first start your blog, it will have a generic favicon (Favorite Icon).  Part of making your blog stand out is having a custom favicon.  So what is a favicon?  A favicon is a little symbol that sits next to your blog's name in the url bar, or in it's browser tab.  Also when someone bookmarks your site, the favicon will help give them a quick reference as to which site is yours.

Designing a favicon can be a task in and of itself.  I suggest you take a look at some favicon designs to get yourself started.  Of course you don't want to copy anyone else's design, but looking at other great designs can give you a jumping off point so you know what good favicon design looks like.

Take a look at these links to get a feel for good favicon design:


  • Your favicon should stand out.  It can either be a symbol that represents your blog, or a Letter, or both.  Mine is a simple H for Hot Shot Blogger.  
  • Some Favicons have no background, others have a colorful background.
  • If you're just using a letter, then pick a font that is easy to read, but not your typical Times New Roman or Arial.
1) Once you've made a favicon you're happy with, it's time to upload it.  Go to your Blogger dashboard, and then go to Layout.

2) Look for the box that says 'Favicon' and click 'Edit'  This should bring up a new box.




3) In the Configure Favicon Box that pops up, you'll need to click 'Browse' and find the Favicon file you created and saved to your computer.  When you're done, click 'Save'.



4) Your favicon is now installed on your blog, but you're not done yet.  The odds are that if you go to view your blog, the favicon will not yet show up for you, and you'll still see the generic Blogger favicon.  What you need to do is go into your browser properties or options and delete the cookies and empty your cache.  Once you've done this, you can go back and view your blog, and the new Favicon should now be showing up.  Congratulations!  Your blog is now another step above the rest!

Did you find this tutorial helpful?  Leave us a comment below, and don't forget to share it with your friends!  You can also subscribe for more great tutorials and resources on building your blog!

9 comments:

nice post! very good tip, getting a good favicon is important to really making the blog stand out. i used a graphic for my website that i got from a stock photography site

Nice pixelogist. Was it paid or free stock photography? How did it turn out once it became that tiny little icon?

That's so interesting! I never even knew there was such a thing as a favicon. I definitely don't use my blog often enough.

Hi Katie. I'm glad you found the post interesting. Yes, if you get serious about blogging or becoming a webmaster then having a favicon for your site is essential.

That's a great tip and it's so simple everyone should do it.

@Jason, thanks. Glad you found it helpful!

So, is there a max size? Does it have to be pixels? could someone make something in say photoshop, or paint tool sai and still use that?

A common favicon size is 16 by 16 pixels in Jpeg format. You can make it in Photoshop, but I don't know that you can set pixel size in Paint.

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More