Monday, July 29, 2013

How to Design a Favicon for your Blog

Favicon examples: Blogger "B", Craftimism "C" Spiral, a leaf, and a zig zag

Did you know you can custom design a favicon for your blog? Thus, instead of the default orange and white Blogger "B," you can create a unique identifier to set your page apart from the others open in your browser.

www.favicon.cc screenshot of my favicon in progress. I uploaded a cropped square image from my Happy Tree Painting.

To do this in blogger, you will first need to create your 16 by 16 pixel favicon image. You can do this using www.favicon.cc and creating a new favicon or uploading a picture and turning it into a favicon. Once you have your favicon how you would like it, click "download favicon" below the image to save the favicon to your computer in the appropriate .ico extension.



Once you have your favicon designed how you want it:

  • Log into blogger and click the "Layout" tab
  • Click edit in the Favicon box to upload your creation 
  • Click save arrangement
  • View your blog to see if the new favicon worked. 
    • If you still see the "B," try this trick 
      • Open a new tab
      • type http://[yourblogurl]/favicon.ico (for example, I typed "http://www.craftimism.com/favicon.ico") in the address bar and hit enter. 
      • Refresh the page and you should see your new favicon in the upper corner. Check your blog to make sure it works. For more information, click here.


Here are some of the favicons I came up with based on my Happy Tree Painting. I ended up using the third one (which is also pictured above), although I liked the first one too. Let me know what you think of them! I look forward to seeing your blogs decorated with more than the boring blogger "B" soon!




No comments:

Post a Comment