The Favicon, an untapped image promotion trick - Best practicesGet Web Design Tips and Tricks on mps-web-design.com. The Favicon, an untapped image promotion trick - Best practices topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.
Many critique the favicon as being just an eye candy, non-essential to your website's operation. This is actually not entirely correct. Creating one can save your site some bandwidth and clean your hit and error logs (non-cluttered logs are essential). If you have created a custom 404 File Not Found error file (if not, you should), this file will be sent by your web server every time there is a request for a nonexistent favicon.ico file. Also, creating such an icon adds to the professionalism of your site, marking you as a web designer or site owner who respects all the standards and formats of proper website building. In this article I will try to present all the essential best practices needed to understand and properly utilize the little-known marketing power of that tiny icon named the favicon: 1. Create a multi-resolution ICO file with two images. One image should be 32x32 pixels and the other 16x16 pixels. Use 256 colors. If in Windows, then stick to the 'Windows Default Palette' scheme. If you don't, you might see annoying shifts in colors, where the operating system re-maps your colors, a technical term describing results such as the lovely orange color on your logo showing in a dark green. In most modern browsers, you can drag the favicon to the desktop where it becomes a link. The desktop icon is often 32x32 pixels. If you don't include the 32x32 version, the default browser icon will be displayed instead, the blue letter 'e' for Explorer, the red 'O' for Opera, etc. Basically the browsers will imprint their brand into the memory cells of your visitors, and you will lose a very simple but potentially efficient marketing opportunity. You will find many tutorials telling you to just make a 16x16 bitmap and name it ICO. While this will work for less restrictive browsers such as Firefox, which basically takes almost any bitmap format as a favicon, it will not work with most other browsers. Also, you lose the opportunity to show your design in 32 square pixels. You will find many tutorials that insist on the fact that icons and favicons must be created in 16 colors. While this very conservative approach will most definitely ensure full compatibility with all systems and will probably eliminate the fear of color shifting due to palette re-mapping, it is irrelevant today. The 16 color rule dates from the old days, when browsers, due to the limitation of the operating systems they ran on (Windows 95, etc.), could only display 16 color favicons. Have you ever looked at your website in 16 colors? Try it - you'll be very, very scared. Some extreme geeks adopted the 'if you can't beat them, overload them' attitude. They insist on creating 4 image favicons. 2 16x16 images and 2 32x32 images, having one image with 16 colors and one image having 256 colors keeping size constant. It's totally unnecessary and a waste of energy and file size. Once again, do you browse the web in 16 colors? If you do, please shut your computer down, go outside and think hard whether you would consider farming, gardening or any less stressful activity. One very important conclusion we get from the above is that you absolutely must pay close attention to the dates when tutorials are written, just because in the online world things change so rapidly. This is also the main reason why I didn't write this article as a true step-by-step howto for a specific platform. Some of the stuff I wrote here will probably become obsolete soon, but I want to leave you with the basics, I want you to understand how things work. If you do get a good grasp of the basics, you will find that you no longer need that step-by-step tutorial, instead, you can just take any available tool or platform and work with it. 2. Name your file 'favicon.ico'. If you want to adhere to the proper web design standards, you must name your file 'favicon.ico'. Most browsers search for this file by default. Know however that with modern browsers, particularly Firefox, you can have different favicons with different names, as long as you design the pages to point to the proper file. You can of course have a combination of both scenarios, in which case Firefox displays your custom favicons, while the rest of the browsers grab the standard 'favicon.ico' 3. Place the favicon at the 'root' level of your site. The 'root' of your site is the place where your 'home page' resides, i.e index.html (or index.htm, or index.php, etc.) If you intend to get really creative and use different favicons on different pages, then upload the files in their respective locations. Common sense dictates that you can only name your different files the same (favicon.ico) if they go into different folders (same way as different folders have different index pages). If however you work with different pages located in the same folder (directory), then you must name your files differently and hardcode the exact names into the individual pages. Whatever you decide, it is advisable to always have a favicon.ico in the 'root' of your website, so it can be grabbed and displayed by all browsers. 4. Use the LINK tag on every page within the {HEAD} section. IMPORTANT NOTE: please replace all '{' and '}' brackets with '<' and '>' brackets. Place this line between the {HEAD} tag and the {TITLE} tag (with the proper '<' and '>' brackets - see above note): {LINK REL='SHORTCUT ICON' HREF='http://www.mydomain.com/favicon.ico'} Use hardcoded locators (such as http://www.mydomain.com/favicon.ico) and not relative ones (such as ../favicon.ico). You might want to know that in general, just having a favicon.ico in the 'root' of your site is sufficient. However, some browsers will not attempt to retrieve the favicon unless there is a LINK tag such as the one above. As a workaround tip, it is said that if you place the above code only in the index page of your site, it should be sufficient, as the browser will grab and store the favicon. Test your favicon file. With Internet Explorer, in some cases your favicon may not appear when you test it. If you have this problem, following these steps: 1. Delete all current favorites to your website. 2. Clear your History and Cache files. 3. Clear your Recycle Bin. 4. Restart (reboot) your PC. 5. Bookmark your site. Your favicon should appear. Common favicon file problems (mostly with Internet Explorer type browsers): - Favicons are not permanent and are stored in your temporary Internet files folder (browsers like Firefox use a different approach and do not store favicons as separate files). - If your Temporary Internet Files folder is deleted, your favicons will be lost. - Internet Explorer 5 sometimes fails to download the favicon automatically. - Some Web hosting services may not support .ico files. If you're in doubt, ask your hosting service. Get more information in my other favicon related articles. Just Google for 'The Favicon, an untapped image promotion trick' (with quotes). In conclusion, remember, you must design with all users in mind, and while I strongly favor the use of modern, progressive and unusual eye candy techniques, I urge you to never ever do it at the expense of the folks who can't see it.
Since this article is about best practice, you should have loaded on your computer every possible version of browser that can be loaded on your computer without crashing it. Ideally, you should have different operating systems, a PC, a Mac, etc., but few people can afford this. I think the minimum you should have is Internet Explorer, Firefox, Opera and Lynx. If all your features work in Explorer, Firefox and Opera (and whatever other browser becomes popular if you are reading this and an 'old' article), and your site is still usable and can be easily browsed in Lynx, then congrats, you did a banging job and your efforts will be rewarded by an increased number of happy visitors! Article Index: | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
More Articles:1. The Good Thing about a White Space White spaces are everywhere about in the artists’ world – the blank white paper spread, the untouched canvass of a painter, the white space in a web page …In fact, we can be thankful as long as we still see a white space around. It significantly tells us of the fact that there are still artistic creations waiting to be conceived. The blank white space in a paper spread signifies the conception of another unique design. It is a signal of another graphic style that will perhaps go on trend for yea… 2. How to Set Up Your Hosting in 5 Minutes Flat Once you've chosen your web hosting, you'll often find that you're given a set of passwords and technical details, before being left to more-or-less figure it out on your own. If you haven't started a website before, that can be a daunting experience. Point Your Domain at Your Host The email you received should have contained the addresses of some nameservers. Nameservers look like this: ns1.yourhost.com. If you can't find it, take a look at the help section of your host's website. Once you know… 3. Printing techniques If you are new to printing, some tips might be of great help to you. You don’t have to run through a lot of pains that you will encounter if you decide to print for yourself. Of course, you may not be as perfect as expected but there are ways to improve your handling. If you are using PhotoShop, keep your color settings to a higher mode like 8 or even higher.Always set it up at the highest resolution because it will definitely bring out great colors and prints. Make sure before you print out, yo… 4. How to Jazz up Your Site with Quality ClipArt Clipart has something of a bad name. And it's true, there's some terrible clip art out there. I always think of the images thatappeared in my grade-school reading workbooks: rigid linedrawings of kids playing sports, pictures of fruit bowls (theapples were always colored in with lots of little dots for somereason), and dopey-looking cartoon animals. Though the world andthe web still overflow with plenty of cut-rate, third-grade clipart, there's also a lot of good stuff out there, much of it free… |
||||
