Spaces:
Sleeping
Sleeping
| <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> | |