Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3
Created September 3, 2020 00:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save prof3ssorSt3v3/42ba3dfe3620ecf869f7beda246e56fa to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/42ba3dfe3620ecf869f7beda246e56fa to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Using Favicons</title>
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<!--
Favicon creator websites:
https://favicon.io/
https://favicon.cc/
https://realfavicongenerator.net/
https://www.favicon-generator.org/
-->
<!--
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64"/>
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
Launcher icons
Android
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"/>
<link rel="icon" type="image/png" href="/favicon-144x144.png" sizes="144x144"/>
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192"/>
<link rel="icon" type="image/png" href="/favicon-512x512.png" sizes="512x512"/>
iPhone
<link rel="apple-touch-icon" sizes="120x120" href="/apple-120x120.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-180x180.png"/>
iPad, iPad-mini
<link rel="apple-touch-icon" sizes="152x152" href="/apple-152x152.png"/>
iPad Pro
<link rel="apple-touch-icon" sizes="167x167" href="/apple-152x152.png"/>
Windows 10 icons
<meta name="msapplication-square70x70logo" content="/icon70.png">
<meta name="msapplication-square150x150logo" content="/icon150.png">
<meta name="msapplication-square310x310logo" content="/icon310.png">
<meta name="msapplication-wide310x150logo" content="/icon-rect-310.png">
Web manifest
<link rel="manifest" href="/site.webmanifest">
--></head>
<body>
<h1>Favicons</h1>
<h2>Browser tab icons</h2>
</body>
</html>
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment