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

Detailed explanation of primary keys and transactions in MySQL

Introduction to the difference between shortcut icon and icon code

Detailed explanation of primary keys and transactions in MySQL

In-depth explanation of environment variables and configuration files in CentOS

Design Theory: A Method to Understand People's Hearts

Detailed tutorial on deploying Apollo custom environment with docker-compose

Detailed explanation of how to use the mysql backup script mysqldump

HTML imitates Baidu Encyclopedia navigation drop-down menu function

How to expand the disk size of a virtual machine

Web design must also first have a comprehensive image positioning of the website

Sample code for a large drop-down menu implemented in pure CSS

Implementation of docker-compose deployment of zk+kafka+storm cluster

Recommend

In-depth understanding of Vue's data responsiveness

The Chinese garbled characters in HTML files and the display problems in browsers

Our thoughts on the UI engineer career

Specific use of Linux man command

JavaScript to achieve a simple carousel effect

CSS positioning layout (position, positioning layout skills)

Detailed explanation of MySQL Innodb storage structure and storage of Null values

Share the 15 best HTML/CSS design and development frameworks

Essential Handbook for Web Design 216 Web Safe Colors

Detailed explanation of Angular routing basics

Detailed explanation of upgrading Python and installing pip under Linux

The implementation principle of Zabbix dynamic execution monitoring collection script

A detailed introduction to for/of, for/in in JavaScript

mysql5.7.17.msi installation graphic tutorial

Make your website automatically use IE7 compatibility mode when browsing IE8