link favicon code example
Example 1: favicon HTML
<link rel="icon" href="yourIcon.png" type="image/png">
Example 2: favicon html link
<link rel="shortcut icon" href="http://example.com/favicon.ico" />
Example 3: head icon html
<link rel="icon" href="http://example.com/favicon.png">
Example 4: favicon in html document
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
Example 5: favicon html
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>
Example 6: favicon x shortcut icon
// Target ios browsers.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
// Target safari on MacOS.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
// The classic favicon displayed in tabs.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
// Used by Android Chrome for the "Add to home screen" icon and settings.
<link rel="manifest" href="/site.webmanifest">
// Used for Safari pinned tabs.
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#193860">
// Target older browsers like IE 10 and lower.
<link rel="icon" href="/favicon.ico">
// Used by Chrome, Firefox OS, and opera to change the browser address bar.
<meta name="theme-color" content="#ccccc7">
// Used by windows 8, 8.1, and 10 for the start menu tiles.
<meta name="msapplication-TileColor" content="#00aba9">