Use of favicon

 

Strictly speaking, the topic of favicon has nothing to do with Seo technology and has little to do with discussions on Web server technology. However, in our website construction, it is necessary to create a personalized logo that matches the website's themes. This is directly related to the success of website brand building. This is still within the scope of website promotion from some perspectives, and to be successful, not only good page design, impressive Website Logo, but also favicon.

What is favicon?
The so-called favicon is the abbreviation of favorites icon. As the name suggests, it allows the browser to display the corresponding title in the favorites folder, but also to distinguish different websites in the form of icons. Of course, this is not just the whole favicon. According to different browsers, The favicon display is also different: In most mainstream browsers such as Firefox and Internet Explorer (5.5 and later versions, favicon is not only displayed in favorites, but also in the address bar. You can drag favicon to the desktop to create a shortcut for the website. In addition, the label-based browser even has many extended functions, such as Firefox and even the favicon In the animation format.
From a specific technical point of view, favicon not only gives the website a more professional view, but also can reduce the server's traffic and bandwidth usage to a certain extent: generally, to improve website availability, we will create a custom 404 error file for our website. In this case, if the website does not have a corresponding favicon. ICO file. When a user adds a website or webpage to favorites, the web server calls this custom 404 file and records it in the website error log. This should be avoided obviously.

How to Create favicon. ICO
Create favicon. the ICO method is quite simple. First, we use a graphical tool to create two 256-color pictures that reflect the website subject. One is 32 × 32 pixels, and the other is 16 × 16 pixels. Note that the "Windows Default palette" must be selected for the color palette. Otherwise, the image may change differently in the final effect display.
It should be noted that, in a lot of information about favicon. in the description of ICO, it is common to say that the picture is a 16-color statement. It should be said that this statement is outdated: In the early windows 95 period, the 16-color favicon. ICO may be a secure choice to ensure its normal use in most cases, but now there is no such restriction, 16 colors can only greatly reduce the icon display effect.
As for how to use 16x16 pixel images in a browser, it is sufficient to prepare 32x32 pixel images because, as mentioned above, favicon is also displayed in the address bar, you can drag the favicon to the desktop to create a shortcut to the website, while the desktop icon will be displayed in 32 × 32, if your favicon. ICO does not include 32-pixel images. The system can only use the default browser icon to mark websites/webpages, such as the blue "E" of Internet Explorer. the role of ICO in building website brands.
After the image is created, use a small program such as image2ico to convert two images to an icon file. You can also create A favicon website online. However, you must note that the source image file format must be pic.

Use favicon. ICO on the webpage
The principle for a browser to call favicon is to first find the favicon. ICO file in the directory where the webpage is located. If not, search for it in the root directory of the website.
Therefore, the easiest way to use favicon on a webpage is to name the created icon file favicon. ICO and upload it to the root directory of the website.
If you need. ICO is placed in another directory, or you want to display different favicons on different webpages, you need to set them in the HTML file of the webpage. The specific setting is also very simple, add the following code to the Program code

HTML 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. The usage is as follows:
First, create a 16*16 GIF animation and add the following code to the HTML code Program code

HTML code

<link rel="shortcut icon" href="favicon.ico" ><link rel="icon" href="animated_favicon.gif" type="image/gif" >

ICO files in 16*16 format

Site Test browse address: http://leekingduan.gicp.net/%e6%8a%95%e7%a5%a8/%e6%8a%95%e7%a5%a8/bike_map.aspx