Page is a not externally linkable
pageoneresults - 9:16 pm on Nov 23, 2007 (gmt 0)
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. 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!
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. :) <link rel="shortcut icon" href="/images/favicon.ico">
<link rel="icon" href="/images/favicon.gif" type="image/gif">