Head tags

Special tags for branding, SEO, and PWA purposes

Demo

Look at your browser tabs and favorites page, home screen icon, search engine results, and more to see how these tags are working for this site.
Your app would simply replace these values with assets for your app.

API

Tag Purpose
<meta name="description" content="{Your description here.}"> Used to summarize a page and is the text that shows up in search engine results and smart links.
<meta name="viewport" content="width=device-width, initial-scale=1"> Configures device viewport to support responsive designs
<link rel="apple-touch-icon" sizes="180x180" href="path/to/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/favicon.png"> Browsers use these as tab and app icons.
<meta name="theme-color" content="#ffffff"> Browsers use this is some areas to help your brand feel more embedded.
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="path/to/ms-icon-144x144.png">
Windows uses these to help your brand feel more embedded.
<link rel="manifest" href="path/to/manifest.json" crossorigin="use-credentials"> Downloads the application manifest, which includes helpful information for browsers to optimize the user experience.

Guidelines

Polish matters

Don't underestimate the value of these tags. Browsers are more able to embed your website into the OS experience when these simple tags are found in your page and users expect this integrated look. It's a very cheap way to add a level of polish to your site, so take a minute to get it right.

Unfurling

When you share a link in a social product like Twitter, iMessage, or Slack, it "unfurls" into a little preview:

M- preview in Slack M- preview in Slack

These head tags and many others are required for a good preview. Slack has an in-depth article about this topic if you'd like to learn more.