What is a favicon you ask? It is short for “favorites icon”, and is a snappy little image that dresses up your url address in the browser window, in your bookmark menus, and in the header in Tabs. For those of you who use TypePad for blogging, you will recognize the Lilypad image next to your TypePad blog url. Here’s an example of favicons in action.
Favicons are a nice touch because:
- It helps your url standout in a sea of bookmarks and web pages
- It carries through your brand from your blog to your url
- It’s FUN!
Getting started
The process of creating a favicon for your blog is easier than any of Rachel Ray’s recipes. First, you will need to create or get an image (gif or jpeg) that is square in format, and that will look good at 16x16 pixels. Keep it simple. The area of 16x16 pixels is VERY small, so small that even a 4-letter name would be pushing it.
To create a favicon image from scratch you will need a program like Adobe Illustrator or Photoshop. Some of you are saying Yikes! Not to worry, there are stock image sites like istockphoto.com where you can find image (photo and illustrations) for $1. You can also use clip art from your favorite collections. You can use a picture of your face, your dog, cat, whtever. Remember, whatever image you select is a reflection of your image. Pick something you are proud of.
Once you find an image, just make sure you crop it into a square format. If you leave the image in a rectangle format, it will get smashed into a square and end up looking yucky. Your image file size does not have to be 16x16 pixels in order for the favicon process to begin. You can resize to 16x16 if you want to get a preview of what the real thing will look like. Here’s a favicon gallery, for some inspirational ideas.
If you don’t have a creative bone in your body, and are okay with just text and color, you can use this favicon generator.
Convert your image to .ico format
If you have a lovely image picked out, we will now convert your gif or jpeg into .ico format, the format browsers need in order to display your cool favicon, right here. Yes! You don't have to leave us yet, thanks to Favicon from Pics.
- Click the “Browse…” button to upload the image you want to use.
- Click the “Generate Favicon” button, and the faviconizer will do its magic.
- A zipped file will be downloaded to your computer. Unzip the file.
Installing your favicon into your blog
Installing your new favicon into your blog address will depend on the blog platform you use. If you use:
- TypePad, instructions are here. NOTE: TypePad recommends using Favicon from Pics to convert your image to .ico format, so you can skip down Step 2: Upload your favicon.ico to your account.
- Blogger, instructions are here. NOTE: Blogger is a little more challenging because you will need to do some code. I'm a code scaredy cat which is why I use TypePad, land of the drag and drop. In these Blogger instructions, they use MyAvatar instead of Fsavicon from pics to convert your image into .ico format. Here is a list of help at the Google Blogger Help Group if you're still stuck.
- Movable Type, Wordpress, or any other blog platform not noted here, please ask "How do I install a favicon?" from the company you use for web/blog hosting. Tell them that you already have converted your image file into .ico favicon format.
If this tutorial helped, be sure to point me to your url with your shiny new favicon. Enjoy!
