Let's first get to know favicon, which is the abbreviation of the English Favorites Icon. As its name implies, it is intended to enable the browser's favorites to display the corresponding text titles, but also to distinguish different websites by means of icons. It is commonly known as a website in Chinese in the industry. Most browsers now support displaying the website directly on the window label or in the address bar. If a good website wants to succeed in promotion, it needs not only a good page design, an impressive website logo, but also a unique favicon logo. Today, we will discuss how to add the favicon.ico logo to our website for novice webmasters?
In fact, favicon.ico is an image in a special format, which can be identified and displayed by the browser after it is prepared according to the established rules. The size of the website logo favicon.ico is usually 64X64, 48X48, 32X32 pixels. Since it is a picture, we first need to design it with drawing software. If the requirements are high, we can also ask professional designers to make it. Some drawing software can be saved directly in the. ico format. If not, we can also use Online conversion tool Convert jpg, png and other formats to ico format.
Now let's talk about the rules. Generally, the browser can only recognize the icon file named favicon.ico as a landmark, and it must be in the real. ico format (extension). Changing the extension only may cause the browser to fail to recognize it. Place the favicon.ico file in the root directory of the website（ What exactly is the root directory of a website? ）, that is, the directory where the website homepage file (such as index.html/index.php) is located (note that it is different from the template directory), and the browser can automatically read it. If you need to consider compatibility with relatively old browsers, you can add the following declaration code to the homepage of the website or the head of the header template file:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
The above code needs to be added before the</head>tag. The first line must be supported by all browsers. The second line is only used when it is necessary to distinguish between IE and standard browsers and use different icons. After using the declaration code, the site logo image file can not be limited to the favicon.ico name. The GIF file type used should be image/gif, and the PNG file should be image/png, It can also be placed in other directories. At the same time, it can declare different site logos for the home page files of different directories.
With the obsolescence of old browsers, various newer versions of browsers can basically automatically identify the favicon.ico logo under the root directory of the website, so many webmasters no longer use the declaration code method, and it is generally recognized that the common practice is to upload the favicon.ico file to the root directory of the website, which is effective for the entire website directory under the same domain name.
For whether to put the site logo in the root directory or give another name, you can refer to the site logo of the following well-known websites:
https://www.baidu.com/favicon.ico
https://www.taobao.com/favicon.ico
http://www.qq.com/favicon.ico
http://www.163.com/favicon.ico
http://www.sina.com.cn/favicon.ico
Let's talk about the Apple touch icon attribute private to Apple devices:
<link rel="apple-touch-icon" href="appleicon.png">
After adding this statement, you can use the Add to Home button on the safari browser of iPhone, iPad, and iTouch to add the website to the home screen, which is convenient for users to click and access from the home screen at any time, and is equivalent to the desktop shortcut of Windows system. The implementation method is to add the above code to the<head>tag of the HTML document.
The apple touch icon tag supports the size attribute and can be used to place different devices: 57 × 57 (the default value) icons correspond to 320 × 640 old iPhone devices, 72 × 72 correspond to iPads, 114 × 114 correspond to the iPhone of the retina screen, and iTouch and ipad3 correspond to 144 × 144 high resolutions.
Therefore, the theoretically perfect writing method is:
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png">
But in fact, many websites do not use the size attribute, but only preset an icon of a certain size to make it automatically zoom. Although Apple uses the official png image as an illustration, the actual jpg format is also available (not recommended), and the image does not need to be rounded and highlighted. Like the Native App, the system will automatically add rounded corners and highlights to the icon. If you don't want the system to add this effect to the icon, you can use apple touch icon prepared instead of apple touch icon. You can make your own rounded corners and highlight effects for unique features.
If your website is based on ZBlogPHP program architecture, it is good to read the above knowledge roughly. Here is an Amway version produced by the webmaster《 Favicon logo setting 》The free plug-in can easily set and add the website logo without modifying the template code. You can search the "Favicon Website Logo Settings" in the background application center of your website to find the plug-in and download it directly.
