Cheat sheet to meta tags, link tags and icons for a modern web page.
At Radiant Media Player we build our website in-house. One question we have been struggling with is what <meta> tags, <link> tags and icons do we need to use in order for our website to be properly presented to the wide range of devices of our time?
Here we have summarized the results of our work. Feel free to use it (replace our values with your data!). Note that this is not an exhaustive list of all recommended <meta> or <link> tags that a modern web page should include, just a cheat sheet of those we found useful to include. This is current as of March 2020.
We came across RealFaviconGenerator and this was a significant help to understand the reality of the fragmentation of the market when it came to add the right <meta> tags, <link> tags and icons to our web page.
Since we are using Grunt to manage our site we used the grunt-real-favicon plugin, but other options are available from Gulp to Ruby on Rails to node.js ... so pick your flavour.
<!-- Generated by RealFaviconGenerator -->
<!-- Making Apple devices happy -->
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<!-- Making mobile devices happy -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="194x194" href="/favicon-194x194.png">
<!-- Making Safari for macOS 10.11+ happy -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2196f3">
<!-- Making mobile Safari happy -->
<meta name="apple-mobile-web-app-title" content="RMP">
<!-- Making Windows 8.0 / IE 10 happy -->
<meta name="msapplication-TileColor" content="#2196f3">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<!-- Making progressive web app (PWA) happy - see below for details -->
<link rel="manifest" href="/site.webmanifest">
<!-- General happiness -->
<meta name="theme-color" content="#2196f3">
<meta name="application-name" content="RMP">
<!-- This part is NOT generated by RealFaviconGenerator but we found it to be essential -->
<!-- Making mobile Safari happy -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Making Windows 8.1 and 10 / IE 11 and Edge happy - see below for details -->
<meta name="msapplication-tooltip" content="Tooltip">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- Making Internet Explorer 5 happy ;) -->
<link rel="shortcut icon" href="/favicon.ico">{
"short_name": "RMP",
"name": "Radiant Media Player",
"lang": "en-US",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#2196f3",
"orientation": "any",
"description": "A modern go-everywhere HTML5 video player. HLS and MPEG-DASH for web apps. Google IMA certified advertising solution. DRM. 360/VR video. Live and DVR. Offline playback. Mobile and OTT apps.",
"icons": [
{
"src": "/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#2d89ef</TileColor>
</tile>
</msapplication>
</browserconfig>- Place icon (favicon.ico, apple-touch-icon.png ...), browserconfig.xml, PWA manifest files at the root of your web site. Some browsers are actually expecting those files to be here (avoid 404).
- The ICO format is not the same as the PNG format. ICO is a specialized file format that contains a collection of images at potentially different sizes and color depths. So use a specialized tool that produces ICO format for your favicon.ico file.
If you have any feedback on how to improve our <meta> and <link> tags, feel free to open an issue or a PR.
Otherwise you can help us by letting people around you know about our commercial go-everywhere HTML5 video player: Radiant Media Player.
rmp-meta-icon-mobile is released under MIT.