Introduction to the difference between shortcut icon and icon code
|
Statement 1: <link rel="shortcut icon" href="favicon.ico" /> Statement 2 <link rel="icon" href="animated_favicon.gif" type="image/gif" /> Note: The Shortcut Icon in statement 1 is the Icon that appears before the URL bar. Question: What is the function of the icon in statement 2? What is the difference between it and statement 1? In the past, website designers and developers have used a variety of methods to ensure that favicons appear. It is difficult to definitively guarantee that a favicon will display on all computers, even those using the same version of a browser. Another limitation of the following code is that it associates the favicon with a specific HTML or XHTML document. To avoid this, the favicon.ico file should be placed in the root directory. Most browsers will automatically detect and use it. It is recommended to include the following two lines of HTML code: CODE: <link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"> However, only the first line is required, because the "shortcut icon" string will be interpreted by most standards-compliant browsers as a list of possible keywords ("shortcut" will be ignored, and only "icon" will be used); while Internet Explorer will treat it as a single name ("shortcut icon"). This has the effect of making the code understandable to all browsers. Adding the second line is only necessary if you want to provide an alternative fallback image for new browsers (such as an animated GIF). In HTML, the link element must be inside the head element (between <head> and </head>). For XHTML, a link must end with " />" (or "></link>") and cannot end with ">". The href can, but need not, point to the location of /favicon.ico. It can point to any URL. Images can generally use any image format supported by the browser. The .ico file format can generally be read by all browsers that can display favicons. Configure your server to send the correct MIME identifier: ICO file image/vnd.microsoft.icon (or image/x-icon for compatibility reasons. However, it is better to use the IANA registered MIME type because most major browsers now support it) GIF fileimage/gif PNG fileimage/png Use appropriate resolution and color depth. ICO: includes a variety of resolutions (most commonly 16×16 and 32×32, Mac OS X sometimes uses 64×64 and 128×128) and bit depths (bits per pixel) (mostly 4, 8, 24 bpp, i.e. 16, 256, and 16 million colors). GIF: Use 16×16, 256 colors. PNG: Use 16×16, 256 colors or 24 bits. Note: When favicon.ico is placed in the document root, it will be found by some browsers that do not handle the link element, even if there are no links pointing to it on your site. standardization The favicon feature was first created by Microsoft, and Microsoft's Internet Explorer web browser requests a favicon for every website. The link tag supported by Microsoft does not conform to the World Wide Web Consortium (W3C) HTML recommendation [1] because: The rel attribute must contain a space-delimited list of link types, so a two-word link type is not understood by standards-compliant browsers. The ".ico" file type (a raster format used for icons on Microsoft Windows) does not have a registered MIME type and does not appear to be understood by most browsers at the time. However, in 2003, the format was registered with IANA with the MIME type image/vnd.microsoft.icon, eliminating the first part of the problem. Using a reserved location on a website is inconsistent with the Architecture of the World Wide Web and is considered link squatting or URI squatting. Mozilla browsers added support for favicons using a web standards-compliant approach. It takes rel="icon" and allows web designers to add a favicon in any supported image format. For example, <link rel="icon" type="image/png" href="/path/image.png">. Later, most browsers added support for this feature, given that it would be used for all new content. |
<<: Detailed explanation of the difference between CSS link and @import
>>: Design Tips: We think you will like it
Recommend
How to create a stylish web page design (graphic tutorial)
"Grand" are probably the two words that ...
How to change the MySQL database directory location under Linux (CentOS) system
How to change the MySQL database directory locati...
MySQL controls the number of attempts to enter incorrect passwords
1. How to monitor MySQL deadlocks in production e...
Detailed explanation of how to create an array in JavaScript
Table of contents Creating Arrays in JavaScript U...
Detailed explanation of the correct way to open em in CSS
Why do we say “usually 1em=16px”? The default tex...
Briefly explain the use of group by in sql statements
1. Overview Group by means to group data accordin...
Examples of 4 methods for inserting large amounts of data in MySQL
Preface This article mainly introduces 4 methods ...
Idea packaged into war package deployed to tomcat and access path issues (illustration and text)
The most important thing for idea to package a we...
Detailed explanation of 7 SSH command usages in Linux that you don’t know
A system administrator may manage multiple server...
How to use axios request in Vue project
Table of contents 1. Installation 2. There is no ...
Linux Dig command usage
Dig Introduction: Dig is a tool that queries DNS ...
How to run py files directly in linux
1. First create the file (cd to the directory whe...
HTML multi-header table code
1. Multi-header table code Copy code The code is a...
Summary of MySQL password modification methods
Methods for changing passwords before MySQL 5.7: ...
Introduction to TypeScript interfaces
Table of contents 1. Interface definition 2. Attr...