favicon icon info and tips

The term "favicon" is short for Favorites Icon and gets its name from the fact that the "icon" (ie, the graphic image) appears in your visitor's list of "Favorites" (aka Bookmarks) after they have chosen to add your site to their "favorites" (aka, have "bookmarked" your page).

Also, in most browsers, the favicon icon also shows up in two other places... in the browser window just left of the website's URL and also on any open "tab" for your site.

The benefits of making a favicon icon may (or may not) be obvious at first glance but there are a variety of reasons why I suggest you make one for your site. These include...

• They're kinda cool and fun to make! (let's face it, sometimes "fun" is reason enough)
• Favicon Icons add an element of "professionalism" to your site
• They help you stand out from the crowd as many webmasters don't use them (which is crazy)!
• Favicons can help you increase your "branding" efforts (which is always good)
• Favicons can actually help you get more repeat traffic! (Your url will stand out more when buried in a list of 532+ other "favorites" and that little icon can help you get more repeat traffic from a visitor that has already bookmarked your site!!!

Fortunately, making a favicon is easy, fun and can be done without any paid tools!

Sure, you can create your favicon graphic with a paid piece of Software like Adobe's Photoshop (and admittedly, I do) but it's not a requirement. In fact, if you've already seen my Favicon How To Video you've seen me create a favicon image using the free online photo editor found at Pixlr.com and it only took me about a minute to do.

Basically, there are four steps to making a favicon (and getting it to appear on your website). They are...

STEP ONE:

Create the image you intend you use for your favicon. Just remember to create the favicon image in a "square" format or it will get distorted when it renders. By square, I mean that the canvas should be as wide as it is tall. 64 pixels by 64 pixels is a good place to start if you are uncertain.

Now, just because I said, "square," don't think that means the image has to be square in shape. It can be circular, elliptical or any other shape you can come up with. The important thing is that the "canvas" you create is the same in width and height.

If this is confusing, watch my Favicon How To Video as I think it will clear things up.

Remember: The final favicon image will be rendered at a size of only 16 pixels by 16 pixels so you MUST take that into consideration when designing the image. Think simple and don't use any fine lines or type as they will likely look horrible when displayed.

STEP TWO:

Once you've created your image you need to convert it into the .ico ("icon") file type. This is easily done with my Free Favicon Generator and it only takes a few seconds to complete.

STEP THREE:

In order for the favicon to appear on your website, you need to place a small bit of code (only one line) on each page of your website. The code is standardized and isn't really specific to any one website or page.

The Favicon Icon Code can be found at the bottom of my "Favicon How To" page. You simply copy the code and paste it into the "head" area of your website's html code (on each page) so the browser will know where to look for your "favicon.ico" file.

It's very important that the path to the file be correct! It's best to name your file, "favicon.ico" and upload it to the "root directory" on your server. (btw, your "root directory" is the same place where your "index"file will be on your server)

STEP FOUR:

The last part of the equation is to simply upload the "favicon.ico" file AND your web pages (with your updated code) to your server.

Again, just ensure that you have named your favicon, "favicon.ico" and that you have uploaded it to your "root directory."

Note: If some of your web pages are inside of a "subdirectory" then you will need to update the path to the favicon.ico file for those pages. Just like any image on your website, the browser needs to know specifically where each image is located on your server in order to properly serve them up.

If you have any questions about all of this, watch my Favicon How To Video.

A newer trend in Favicon Design is animating the favicon image. This is done by creating an image that is saved as an "animated gif file" before converting to .ico format.

One great example can be seen at Pod1.com -- Notice how they "expanded" the canvas through the use of animation. Even though favicons are standardized at 16 pixels by 16 pixels (which is tiny) these creative individuals found a way to show a longer message (similar to a "stock ticker" board).

Now, whether or not one should animate a favicon is a subject up for debate. Some say (and rightly so) that they draw more attention so any branding benefits should be improved (over a static favicon). However, as they appear on any open "tab," it can get real annoying to visitors if they have several of your webpages opened at once.

I don't think there's a hard-and-fast "right" and "wrong" here but it is something to consider.

Note: Creating an animated gif is outside of the scope of this page's intent but if I get enough requests, I may consider making a video which shows how to create animated gif's in Photoshop.

After doing a little poking around, I found three great Favicon Gallery sites that I think you'll enjoy.

Favicon Gallery Resource #1:

The first is by Michael Pierce and can be found here: http://mppierce66.home.comcast.net/~mppierce66/web/fi/

Michael's site has thousands of favicon icon images on display and I love the fact that he has linked each image back to the website it lives on. This way, you can take a look at the overall design of the website to see if you can pick up some of the influences that dictated the favicon design.

Favicon Gallery Resource #2:

While not as exhaustive as Michael Pierce's Favicon Gallery, this resource has each favicon image laid out in a way that makes it easy to glean certain nuances. For example, they have a category just for "typographical" favicons so if you were considering simply using text, you can get a lot of ideas, really quickly!

You'll find FineIcons.com's Favicon Gallery here: http://www.fineicons.com/en/favicon-gallery

Favicon Gallery Resource #3:

The Favicon Gallery over at TheFaviconGallery.com has nearly 500 favicons on display and they will allow you to submit your favicon icon to them to be added to their gallery. Better still, they link each icon to the corresponding website.

What a great idea...

Yet another way having a favicon can bring you more website traffic!

You'll find The Favicon Gallery here: http://thefavicongallery.com