|
<!DOCTYPE html> |
|
<head> |
|
<title> |
|
Favicons |
|
</title> |
|
<meta charset="utf-8" /> |
|
|
|
|
|
<link rel="shortcut icon" href="favicon.ico" /> |
|
|
|
|
|
<link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="favicon.ico"> |
|
|
|
|
|
<link rel="icon" sizes="192x192" href="favicon-192.png"> |
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="favicon-180-precomposed.png"> |
|
|
|
|
|
<meta name="msapplication-TileColor" content="#FFFFFF"> |
|
<meta name="msapplication-TileImage" content="favicon-114-precomposed.png"> |
|
|
|
<style> |
|
|
|
body { |
|
background-color: #f5f5f5; |
|
border: 0px; |
|
margin: 0px; |
|
padding: 0px; |
|
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; |
|
color: black; |
|
} |
|
|
|
pre { |
|
margin: 0px; |
|
color: black; |
|
padding: 0px 5%; |
|
} |
|
|
|
code { |
|
|
|
} |
|
|
|
.container { |
|
background-color: white; |
|
max-width: 800px; |
|
width: 100%; |
|
margin: 0 auto; |
|
padding: 1% 0; |
|
height: 100%; |
|
} |
|
|
|
.comment { |
|
color: gray; |
|
padding: 0px; |
|
margin: 0px; |
|
} |
|
|
|
hr { |
|
width: 80%; |
|
padding: 0 5%; |
|
border-color: #f5f5f5; |
|
background-color: #D1D1D1; |
|
} |
|
|
|
p { |
|
padding: 1% 5%; |
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
<body class=""> |
|
|
|
<div class="container"> |
|
<p> |
|
To use the favicons insert into your head section some of these tags accordly to your needs. |
|
</p> |
|
<hr> |
|
<pre> |
|
<code> |
|
<span class="comment"><!-- For old IEs --></span> |
|
<link rel="shortcut icon" href="favicon.ico" /> |
|
|
|
<span class="comment"><!-- For new browsers - multisize ico --></span> |
|
<link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="favicon.ico"> |
|
|
|
<span class="comment"><!-- For iPad with high-resolution Retina display running iOS ≥ 7: --></span> |
|
<link rel="apple-touch-icon" sizes="152x152" href="favicon-152-precomposed.png"> |
|
|
|
<span class="comment"><!-- For iPad with high-resolution Retina display running iOS ≤ 6: --></span> |
|
<link rel="apple-touch-icon" sizes="144x144" href="favicon-144-precomposed.png"> |
|
|
|
<span class="comment"><!-- For iPhone with high-resolution Retina display running iOS ≥ 7: --></span> |
|
<link rel="apple-touch-icon" sizes="120x120" href="favicon-120-precomposed.png"> |
|
|
|
<span class="comment"><!-- For iPhone with high-resolution Retina display running iOS ≤ 6: --></span> |
|
<link rel="apple-touch-icon" sizes="114x114" href="favicon-114-precomposed.png"> |
|
|
|
<span class="comment"><!-- For iPhone 6+ --></span> |
|
<link rel="apple-touch-icon" sizes="180x180" href="favicon-180-precomposed.png"> |
|
|
|
<span class="comment"><!-- For first- and second-generation iPad: --></span> |
|
<link rel="apple-touch-icon" sizes="72x72" href="favicon-72-precomposed.png"> |
|
|
|
<span class="comment"><!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --></span> |
|
<link rel="apple-touch-icon" sizes="57x57" href="favicon-57.png"> |
|
|
|
<span class="comment"><!-- For Old Chrome --></span> |
|
<link rel="icon" sizes="32x32" href="favicon-32.png" > |
|
|
|
<span class="comment"><!-- For IE10 Metro --></span> |
|
<meta name="msapplication-TileColor" content="#FFFFFF"> |
|
<meta name="msapplication-TileImage" content="favicon-144.png"> |
|
<meta name="theme-color" content="#ffffff"> |
|
|
|
<span class="comment"><!-- Chrome for Android --></span> |
|
<link rel="manifest" href="manifest.json"> |
|
<link rel="icon" sizes="192x192" href="favicon-192.png"> |
|
|
|
</code> |
|
</pre> |
|
|
|
<hr> |
|
|
|
<p> |
|
For more informations about favicons consult <a href="https://github.com/audreyr/favicon-cheat-sheet">The Favicon Cheat Sheet</a> by Audrey Roy. |
|
</p> |
|
|
|
</div> |
|
|
|
</body> |
|
|
