Welcome to WebmasterWorld Guest from 54.166.54.215

Forum Moderators: not2easy

Stop all those favicon 404s!

Creating a favicon.ico and favicon.gif

   
8:57 pm on Nov 22, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Did you know that you can create a favicon.ico for free these days? And, did you also know that you can create an animated favicon.gif?

<link rel="shortcut icon" href="/images/favicon.ico">
<link rel="icon" href="/images/favicon.gif" type="image/gif">

The above two lines of code should be placed between the <head></head> of each page you'd like marked with a favicon. Keep them in this order if you want the animated version to work in Firefox. I'm doing all pages these days. :)

I've been using this free online tool from HTML Kit (no affiliation)...

FavIcon from Pics
[htmlkit.com...]

It does everything for you. All you need is the original image that you are creating a favicon from, the online interface will do the rest for you and you'll even get a readme.txt file with complete easy to understand instructions. It takes all of about 5 minutes to set everything up.

There are other resources out there that offer free favicon.ico generation. But, I like HTML Kit's ability to create an animiated version (in addition to the static version) which is supported by Firefox.

9:25 am on Nov 23, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



cheers P1R

So, to clarify - if you specify the favicons in this way, firefox will display the animated favicon, and browsers that do not support it will display as usual..?

10:18 am on Nov 23, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



So far that appears to be the case. If I reverse the order, Firefox does not display the animated version, just the static one.
11:11 am on Nov 23, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



great
9:16 pm on Nov 23, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I'm going to expand on this one a bit as I see many websites overlooking this important piece of visual branding, including some of my own. But, I'm on a rampage today making up for lost time. :)

I am now going to get into the micro-management of favicon's. Did you know that you can have an entire library of favicon's and serve them based on the page? For example, let's say I have 7 categories and they are color coded. Well, I might take the clients Logo Icon and place it against a colored background that matches the color coding of the website categories. That way when a user bookmarks that particular page, they can easily distinguish it from other pages bookmarked from other categories. It's a really simple process and one that I'm finding to be very user oriented (at least for those that do not have any visual disabilities).

I've probably generated over 50 favicons today, and, I'm still going through my list. My favorites folder has now "lit up" with all sorts of color and "visual branding appeal". I'm really likin' it!

Not sure how to create a favicon? Here are some simple steps...

1. You'll need an original working image. It should be perfectly square as your final favicon will measure 16x16. If you are utilizing the above icon generator from HTML Kit, and your image is not square, it will scale the image to fit. This will cause distortion in some instances so that is why it is important that your original working image is perfectly square. It doesn't matter what size it is.

2. I've been working with gifs mostly. While at the above icon generation tool, browse to your "perfectly square" working image and upload it. Check the box to "animate".

3. Download the zip file.

4. Upload the images to your website. It doesn't matter where so if you want to manage them properly, drop them in the folders where they belong. Just be sure to update the references in the link rel elements.

5. Include these two lines of code within the <head></head> section of each page where you would like a favicon to display. I typically have include files for static <head> content so it was fairly easy for me to drop in a global favicon. If these two lines of code are not within the <head></head> of the page, then there will be no favicon available and a 404 will be generated when a user bookmarks the page.

<link rel="shortcut icon" href="/images/favicon.ico"> 
<link rel="icon" href="/images/favicon.gif" type="image/gif">

That's it! Remember, the two link relationship elements need to be in the above order. IE will display a static favicon (favicon.ico) and Firefox will display an animated favicon (favicon.gif). I take the files generated and rename them to suit my needs. You'll find the animated version in a folder called /extra/animated_favicon1.gif.

You'll notice that in Firefox when you first visit a site with an animated favicon, it will go through 7 loops. Then, on each page visit thereafter, it goes through 1 loop. It's a very interesting subtle effect.

Pros vs Cons

Pro: No more 404's generated for favicon requests!

Pro: One more area to "show your stuff" and brand, brand, brand!

Pro: Can be used from a usability standpoint when working with larger websites. And even smaller ones. You can create a favicon for each page of your website if you want to!

Con: I can't think of any, can you? Oh wait, it takes about 10 minutes of your time for each website to implement a global favicon in both static and animated versions.

What's your favicon look like?

P.S. Did you know that you can also include animated text with your animated favicon? I'm not kidding, it's way cool!

11:47 pm on Nov 23, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Great thread pageoneresults. I use favicons on all pages but had not thought of using page or category specific favicons. Thanks.
1:50 pm on Nov 25, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Another simple way of using them is to confirm or deny user actions - the Wc3 site does this well for validation:

green favicon=you passed
red favicon=you failed

I like the idea of being able to use favicons to allude to content type or denote process.

The biggest problem with favicons is browser support - It's still shonky, especially for IE users.

2:06 pm on Nov 25, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The biggest problem with favicons is browser support - It's still shonky, especially for IE users.

You are 100% correct there. But, I'm finding that there may be a few things you can do to address those IE issues. For one, specifying the type in the link rel "may" help...

<link rel="shortcut icon" href="/images/favicon.ico" [b][i]type="image/vnd.microsoft.icon"[/i][/b]>
<link rel="icon" href="/images/favicon.gif" type="image/gif">

Also, if you wish to "force" a new favicon for your visitors, just rename the file to something other than favicon, for example, favicon2.ico. That will force IE to update the users existing favicons. It works, I've been testing over this holiday and getting things in order. Using favicons with IE7 is the same as using them with Firefox. They are automatically recognized and now become visible next to the web address (the usual place), on browser tabs, bookmarks, favorites, etc. I'm not sure why IE doesn't support animation like Firefox.

I'm also finding that it is a good idea to always have a favicon.ico at the root of your web. Even though the W3 recommends against this practice, there are still browsers that look for the favicon.ico at the root level and don't adhere to the link rel element and/or don't recognize the "shortcut icon" and/or "icon" profiles. Remember, the old way required the user to "bookmark" or "add to favorites" before the favicon became visible. That is no longer the case with the newer browsers.

green favicon=you passed
red favicon=you failed

One of my projects this weekend was to take a larger site and color code it using favicons. What a pretty "site" that was to see 12 tabs open, each with their own custom favicon that was color matched to the category. I can see the use of custom favicons at the page level becoming commonplace in the near future. At least on my sites they will. :)

Note: Check your logs for favicon 404s. I was surprised to see the number of favicon requests on some sites. Heck, on one site, there were over 50+ in one day. That's 50+ pieces of my brand that I could have out there, that wasn't there before! And, it's FREE!

P.S. Another tip for creating favicons is to take a screenshot (

Alt + PrtScr
) of your website. Drop that into your favorite graphics program. Enlarge to 300%. Create a 32x32 cropping frame and then start dragging it around on the screenshot looking for that "perfect square". Once you've found it, crop, upload, download, upload, and viola!
5:24 pm on Nov 25, 2007 (gmt 0)

10+ Year Member



It's funny how such old tech can inspire such enthusiasm after all these years (at least close to a decade on the 'net), but why aren't you utilizing to it's fullest extend?

Given that the .ico format can hold different sizes, why are you limiting yourself to just 16 x 16? Where's the 48 x 48 x 256?

6:07 pm on Nov 25, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



remember to put a long expiry date on the images though. you don't want everyone requesting 50 images from your site every time they open up their bookmarked items.
you could be taking a bandwidth hit from loads of people even though they never visited the site.
5:17 pm on Mar 26, 2008 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



green favicon=you passed
red favicon=you failed

<link rel="shortcut icon" href="/images/faviconssl.ico" type="image/vnd.microsoft.icon">

Ah, there I was looking for a way to further delineate http vs https to the visitor. We use a few approaches now and I was looking for one more subtle way... and viola, found it!

I am now making nice solid GREEN faviconssl.ico for https pages. Heck, why should I pay $1,000.00+ per year for an SSL that changes the address bar to green when I can implement a "poor man's solution" and do it for less than a buck? I mean, I can take a $17.00 per year Cert and make it look like one of those $1,000+ per year deals.

7:08 pm on Mar 26, 2008 (gmt 0)

5+ Year Member



For those that don't want to use a favicon, but still want to get rid of all the 404, there is a simple solution.
In the root directory of your site, place an empty file named favicon.ico. If the file is 0 bytes long, all browsers will request it only once and still display their built-in default icon.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month