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
Detailed steps to install the specified version of docker (1.12.6) using rpm
1. Reasons If the system is Centos7.3, the Docker...
Sample code for using CSS to write a textured gradient background image
The page length in the project is about 2000px or...
After installing Navicat in MySQL, 2059 appears, Authentication plugin and local link virtual machine docker, remote link server
Preface After installing MySQL and Navicat, when ...
Installation and use of Ubuntu 18.04 Server version (picture and text)
1 System Installation Steps OS Version:1804 Image...
How to completely uninstall Docker Toolbox
Docker Toolbox is a solution for installing Docke...
Vue implements Tab tab switching
This article example shares the specific code of ...
Text pop-up effects implemented with CSS3
Achieve resultsImplementation Code html <div&g...
HTML Editing Basics (A Must-Read for Newbies)
Open DREAMWEAVER and create a new HTML. . Propert...
Detailed explanation of basic operation commands such as starting and stopping Nginx under Windows
To use Nginx under Windows, we need to master som...
How to check if a table exists in MySQL and then delete it in batches
1. I searched for a long time on the Internet but...
Three ways to align div horizontal layout on both sides
This article mainly introduces three methods of i...
Markup Languages - Lists Again
Click here to return to the 123WORDPRESS.COM HTML ...
Detailed tutorial on building a local idea activation server
Preface The blogger uses the idea IDE. Because th...
Use PHP's mail() function to send emails
Sending emails using PHP's mail function The ...
A brief discussion on the difference between Mysql primary key index and non-primary key index
Table of contents What is an index The difference...