File size: 6,400 Bytes
3ca0269 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
<!DOCTYPE html>
<head>
<title>
Favicons
</title>
<meta charset="utf-8" />
<!-- For old IEs -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- For new browsers multisize ico -->
<link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="favicon.ico">
<!-- Chrome for Android -->
<link rel="icon" sizes="192x192" href="favicon-192.png">
<!-- For iPhone 6+ downscaled for other devices -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon-180-precomposed.png">
<!-- For IE10 Metro -->
<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>
|