What's in my HEAD

the head is the good stuff

The HEAD of a HTML document is a really interesting thing. Every time I start a new project I have to make a new HTML template because my thinking on what to stick in the HEAD changes. Here’s my current thing, complete with comments. It’s largely derived from one of the MDL templates.

Icon-related stuff is a shit show of vendor-specific meta tags. C’mon guys, get it together. If you’re the type of person that likes to make five different icon sizes covering every apple device so your penny-sized thumbnail image looks pixel perfect, give strong consideration to not being that type of person. It’s the size of a penny.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="My super awesome app.">
  <title>Super Awesome App</title>

  <!-- for the little guys -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- favicon -->
  <link rel="icon" type="image/png" href="img/favicon.png">

  <!-- Add to homescreen for Chrome on Android 192x192 -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="img/chrome-touch-icon-192x192.png">

  <!-- Add to homescreen for Safari on iOS 152x152 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Super Awesome App">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">

  <!-- Tile icon for Windows (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="img/ms-touch-icon-144x144-precomposed.png">
  <meta name="msapplication-TileColor" content="#3372DF">

  <!-- Font Farms and CSS -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css?foo=r4ndomnumb3r5">

</head>