Friday, October 14, 2011

Adding a Favicon to Your Blog











My sister and fellow blogger Jen, let me know about adding a Favicon to my blog today.  I was not familiar with the term, so for anyone else not familiar, it's the little icon that appears in your browser tab/window when you have a webpage open.  For example, this tab has a big B for Blogger as I'm typing this, my Gmail tab has a big M/mail folder icon and the image at the top contains some other recognizable examples.  

I got started by searching for .ico icons online, however quickly found that the larger cool ones were over the 100KB size limit for Blogger.  I added a plug-in to Photoshop to try and shrink them down, but couldn't get the plug-in to work.  I asked Jen how she got hers there and she used this site here, where you just pick an image file on your computer and it will convert the file over to .ico format and you can download and add it to your blog. Much easier!

So if you don't have an image that you want to turn into an icon, I recommend you go to Google Images and search for an image, go to this site and convert it over and then upload it to your blog.  The image file needs to be under 150KB to work on that site, so shrink it down to size with your favorite image editor if needed.  Remember, this is a very small icon, so no need to get all fancy. 

Blogger has a new option on your Layout page where you just click the Favicon button and upload the file.  If you're using Wordpress, this may help.  I just updated mine.  In order to see it, be sure to clear your browser cache, then go back in.  It's probably best to keep your favicon the same for the most part, so someone can easily identify the tab/window with your blog/website.  Enjoy!

4pm Update:  Thanks for the suggestion Jen, I changed my icon to a Palm Tree with a sun setting.  



3 comments :

Jen said...

Love it! I think you need a palm tree as your staple icon. Goes with your theme!

Chris said...

Great idea, I will do that! :o)

Marla said...

Yes...great choice!!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes