Spaces:
Runtime error
Runtime error
<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> | |