homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Stop all those favicon 404s!
Creating a favicon.ico and favicon.gif
pageoneresults

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



 
Msg#: 3511557 posted 8:57 pm on Nov 22, 2007 (gmt 0)

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.

 

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3511557 posted 9:25 am on Nov 23, 2007 (gmt 0)

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..?

pageoneresults

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



 
Msg#: 3511557 posted 10:18 am on Nov 23, 2007 (gmt 0)

So far that appears to be the case. If I reverse the order, Firefox does not display the animated version, just the static one.

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3511557 posted 11:11 am on Nov 23, 2007 (gmt 0)

great

pageoneresults

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



 
Msg#: 3511557 posted 9:16 pm on Nov 23, 2007 (gmt 0)

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!

Visit Thailand

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3511557 posted 11:47 pm on Nov 23, 2007 (gmt 0)

Great thread pageoneresults. I use favicons on all pages but had not thought of using page or category specific favicons. Thanks.

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3511557 posted 1:50 pm on Nov 25, 2007 (gmt 0)

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.

pageoneresults

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



 
Msg#: 3511557 posted 2:06 pm on Nov 25, 2007 (gmt 0)

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!

balam

10+ Year Member



 
Msg#: 3511557 posted 5:24 pm on Nov 25, 2007 (gmt 0)

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?

londrum

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3511557 posted 6:07 pm on Nov 25, 2007 (gmt 0)

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.

pageoneresults

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



 
Msg#: 3511557 posted 5:17 pm on Mar 26, 2008 (gmt 0)

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.

Achernar

5+ Year Member



 
Msg#: 3511557 posted 7:08 pm on Mar 26, 2008 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved