What is Favicon.ico? Personalise Your Site's Bookmark
link:
http://www.thesitewizard.com/archive/favicon.shtml
by Christopher Heng,
thesitewizard.comSome time back, I had an email from a visitor asking me how I managed to have thefreecountry.com's icon displayed next to my URL in his browser's location bar. In fact, had he checked carefully, he would also have noticed that the icon is also used in his "Favorites" menu.
Internet Explorer ("IE") 5.0 and above has a facility where, if someone bookmarks your website (ie puts it in their "Favorites" menu), it associates a particular icon with your website in the bookmark. It tries to obtain that icon by first requesting for "favicon.ico" from the directory of your web page. If it cannot find such a file, it will try to obtain it from the root directory of your website, failing which, it will simply use a default icon for the bookmark.
On the other hand, the favicon.ico file is available, the icon will also be displayed beside your website name in the "Favorites" menu, the location bar in IE, and if the user opens up the "Favorites" folder, it will be the icon used for the link to your site.
Mozilla, and probably also the new versions of Netscape (which are based on Mozilla), also have the ability to use the favicon.ico file, except that Mozilla also accepts the file in other graphics formats, such as the PNG format. It displays the "favicon.ico" in the location bar of the browser (the part that shows your website's URL). The latest version of Opera also loads the favicon.ico file into the address bar if available.
Software Requirements
If you have an Windows icon editor (which you may already have if you have purchased a programming language development system for Windows), you're all set.
All is not lost, however, if you do not have the above. Simply pop over to thefreecountry.com's Free Resource Editors and Icon Editors page at http://www.thefreecountry.com/programming/resourceeditors.shtml and get yourself one. That page lists a few free icon editors and resource editors. Just choose any of the icon editors that strikes your fancy and download it. Alternatively, you can also download one of the other packages that contain a resource editor. Resource editors are tools that programmers use to create and edit Windows "resources" like icons, cursors (ie, mouse pointers), menus, dialog boxes, etc. For our purpose here, you will only need to use the icon editor portion of such resource editors.
How to Create a "Favicon.ico" File
-
Create an image 16X16 pixels in size. Yes, it is really small and you can't really draw much in it. You should also restrict yourself to the standard Windows 16 colours, although I suspect that 256 colours will work fine.
If you like, you can also create a 32X32 pixel icon, which will be scaled to size for the Favorites menu and the location bar. You can even put both 16X16 and 32X32 pixel icons into the same icon file. Windows will use the former for its menus and the latter when the user opens up a folder that is set to display large icons. It's probably not really necessary to do this if you can't be bothered.
-
Save the image as an ICO file (named "favicon.ico", of course).
-
Upload it to your website. You don't need to upload one to every directory of your site if you don't want to waste space - simply put it in your root directory and IE will apparently locate it eventually. You can also upload it into your images directory, but you will need to modify your web pages if you do. See later in this article for more information on this.
Help! My Web Host Doesn't Allow ICO Files!
If your hosting company does not allow files with the .ICO extension to be uploaded, you might try to work around it by uploading it (in binary mode) with some other extension (like GIF). Once it's on your site, rename it using your FTP program to the correct extension.
Helping the Browser Locate the favicon.ico file
If you have placed your favicon.ico file in a location other than the current web directory (relative to your web page) or the root directory, you have to help your visitors' browser locate the favicon file by specifying it with a tag like the following in the <head> section of your web page.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
You should replace "/favicon.ico" in the above example with the actual location of your favicon.ico file, for example, "/images/favicon.ico" if you have placed it in your "/images/" directory.
This step is optional if you have put your "favicon.ico" file in the standard locations, ie, in the same directory as the web page or in the root directory of your website. Otherwise you will need to modify all your existing web pages to take advantage of the "favicon.ico" facility.
How Many People are Bookmarking My Website?
This "favicon.ico" used to have an interesting side-effect. The side-effect applied whether or not you bothered to put a special "favicon.ico" on your site. You used to be able to find out the number of IE 5 users who bookmarked your site by simply counting the requests for "favicon.ico" in your web server logs. From that number, you can estimate the total number of people who bookmark your site by applying this formula: number of IE 5 bookmarks divided by the fraction of your visitors using IE 5.
For example, if two-thirds of your visitors use IE 5+, and you get 100 requests for the icon, simply divide 100 by two-thirds to get 150. This was by no means an accurate measure - it did not take into account numerous factors: but at least it was able to give you a hint of how useful people find your site.
However, this side effect is no longer relevant today. Mozilla, Netscape and Opera load the favicon.ico to display in your visitors' location bar whether they put your site in their favourites (or bookmarks) or not. Apparently the Mac OS X browser, Safari, also loads the favicon.ico file whenever it visits a site (it uses it in the history menu). I've not checked the latest version of IE so I'm not sure if it does the same too. I merely mention this "side-effect" so that you won't deceive yourself when you see the large number of "favicon.ico" requests in your web logs: it doesn't tell you that those your visitors bookmarked your site anymore.
Miscellaneous Matters
If you are testing your favicon file in Internet Explorer, and find that you're seeing an old version of your favicon.ico file, you probably need to empty your browser's cache (and possible restart the browser). Internet Explorer caches the favicon.ico file in the "Temporary Internet Files" folder, so if you don't empty the cache, you'll probably continue to see your old version and not the new version that you've created. Incidentally, this also means that if your visitors empty their cache, their copy of the favicon.ico file that was associated with the bookmark of your site will also be lost.
Conclusion
The "favicon.ico" facility is by no means essential to your website's operation. In fact, few people even notice its existence, and its really too small to put anything useful in it. However, creating one can save your site some bandwidth if you have created a custom 404 File Not Found error file - that file will be sent by your web server everytime there is a request for a nonexistent "favicon.ico" file. Perhaps more importantly, creating such an icon adds to the professionalism of your site, marking you as a web designer who attends to detail.
分享到:
相关推荐
1、此文件包含流行、个性和其它图标可供选择 2、能解决访问 Apach 时,错误日志中老是报找不到 htdocs/favicon.ico 文件的错误 3、内含调试错误的解决方法
什么是favicon.ico?favicon图标制作和制作技巧.docx
favicon.ico 很简单的一张图片 favicon.ico favicon.ico favicon.ico favicon.ico
favicon.ico 一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的 logo,如图红圈的位置, 目前主要的浏览器都支持 favicon.ico 图标. 如果要让网站看起来更专业、更美、更有个性,制造...
Favicon.ico远程获取插件 简介 Favicon.ico远程获取插件:远程实时获取并显示网站的Favicon.ico文件,美化网站外链显示效果。 适合网址导航网站,网站友情链接显示美化等。 Favicon.ico远程获取插件页面展示 ...
favicon.ico 一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的 logo,如图红圈的位置, 目前主要的浏览器都支持 favicon.ico 图标. 如果要让网站看起来更专业、更美、更有个性,制造...
在线ICO图标制作Favicon.ico图片在线制作网站PHP源码+支持多种图片格式转换 favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器...
网站导航的logo,设置为自己的logo方法和,生.ico的软件,免费下载~\(≧▽≦)/~啦啦啦
本文介绍在web.py中设置favicon.ico的方法: 如果没设置favicon,后台日志是这样的: 127.0.0.1:4133 - - [03/Sep/2015 18:49:53] "HTTP/1.1 GET /favicon.ico" - 303 See Other 由于浏览器会自动去获取这个文件,...
[其他类别]PHP 在线生成 favicon.ico_favicon.zip
ico文件
一个简单的插件,可为您提供favicon.ico路线。 这是将显示在浏览器选项卡中的图标。 安装 npm install hapi-favicon 基本图示 只需在您的hapi服务器上注册插件: await server . register ( { plugin : require ...
swagger-ui,Restful WEB API 在线调试工具源代码
主要介绍了nginx关闭favicon.ico、robots.txt日志记录配置,同时提供了不允许访问某些隐藏文件的配置方法,需要的朋友可以参考下
在做路由模块的时候,发现控制台每次都会多输出一条favicon.ico的请求,对于这种又占资源,看着又碍眼的玩意,强迫症完全忍不了了,查了下代码,加了一行进去解决问题(没有技术含量,如果想笑话我的仁兄,请速速...
PHP实例开发源码—Favicon.ico远程获取插件 php版.zip PHP实例开发源码—Favicon.ico远程获取插件 php版.zip