Can you tell me what is the difference of creating the image in these two codes?
<link href="img/favicon.ico" rel="icon" type="image/png">
versus
- initiating using the simple
<img />tag
I'm just trying to understand what is the difference
CodePudding user response：
The <img> tag embeds an inline image in your document. The <link> tag tells the browser the entire document is associated with an external resource. In this case, your document is associated with img/favicon.ico and the relationship is "icon" -- it's the icon for the document.
CodePudding user response：
<link href="img/favicon.ico" rel="icon" type="image/png">
This code is for favicon. Favicon is the image top of your browser. You can create favicons using "https://www.favicon-generator.org" this kind of website. And also you can create favicons for different devices. It will look like:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
In the code above; "apple-touch-icon" is for ios devices to set favicon in safari and the images is going to be used for app icons also. "icon" for android and going to be used for chrome. "msapplication-TileImage" is for edge in windows. "manifest" is to define path for android. "theme-color" is just the app color if you enable PWA.