What is Favicon?

Source: Internet
Author: User
The so-called Favicon, namely Favorites icon abbreviation, as the name suggests, is that it can let the browser's favorites in addition to display the corresponding title, but also in the way of the icon to distinguish different sites. Of course, this is not just all favicon, depending on the browser, the Favicon display is different: In most mainstream browsers such as Firefox and Internet Explorer (version 5.5 and above), Favicon is not only displayed in the Favorites folder, Also appears on the Address bar, where users can drag favicon to the desktop to create a shortcut to the site; In addition, tabbed browsers even have a number of extended features, such as Firefox and even support animation format Favicon.
From a specific technical point of view, Favicon is also not just to make the site more professional impressions, but also to some extent to reduce the server's traffic bandwidth consumption: generally in order to improve the usability of the site, we will create a custom 404 error files for their website, in this case, If the site does not have a corresponding Favicon.ico file, the Web server will call this custom 404 file and record it in the error log of the site whenever a user collects the site/page. This is clearly to be avoided.

How to make Favicon.ico
The method of making favicon.ico is fairly simple, first of all, using the graphics tool to create 2 256-color images that reflect the theme of the site: one for 32x32 pixels and the other for 16x16 pixels. It should be noted that the palette is to choose the Windows default palette, otherwise the graphics in the final effect display may vary in color that is different from what you originally intended.
It should be noted that in many of the descriptions of Favicon.ico, it is common to claim that the picture is 16 colors, which should be said to be far out of date: In the early days of Windows 95, The 16-color favicon.ico may be a safe choice to ensure that it works in most situations, but now there is no such limit, and 16 colors only makes the display of the icon much less effective.
As for the use of 16x16 pixels in the browser is enough, why to prepare 32x32 pixel picture, because, as mentioned above, Favicon also displayed in the Address bar, users can drag favicon to the desktop to create a shortcut to the site, and the desktop icon to 32x 32 shows, if your favicon.ico does not include 32 pixels of the picture, the system can only use the default browser icon to mark the site/page, such as Internet Explorer Blue "E", do not have our intention to build the role of the site through Favicon.ico brand.
After the picture is made, use a small program such as Image2ico to convert 2 pictures into an icon file. Can also be produced by making favicon Web sites online, however, it is necessary to note that this site requires a picture source file format for pic.

Using Favicon.ico in a Web page
The principle of browser invoke Favicon is to look for Favicon.ico files in the directory where the Web page is located, and if not, go to the root directory of the Web site.
Therefore, the easiest way to use favicon in a Web page is to name the made icon file Favicon.ico and upload it to the root of the Web site.
If you need to put Favicon.ico in another directory, or want to let different pages display different favicon, you need to do in the HTML file in the Web page, the specific settings are simple, in the HTML section of the
Reference content

Program code: <link rel= "icon" href= "/dir/favicon.ico" mce_href= "/dir/favicon.ico" type= "Image/x-icon" >
<link rel= "shortcut icon" href= "/dir/favicon.ico" mce_href= "/dir/favicon.ico" type= "Image/x-icon" >

Firefox also supports favicon in GIF animation format, using the following methods:
First make a 16*16 gif animation, and then add the following code to the HTML code
Reference content

Program code <link rel= "shortcut icon" href= "Favicon.ico" >
<link rel= "icon" href= "Animated_favicon.gif" type= "Image/gif" >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.