| <!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> |
|
|
