Decided to add favicons and touch icons to the site. I’ve got no design skills, so used Jdenticon to generate icons based on my name. RealFaviconGenerator will automatically generate favicons with comprehensive browser and OS support, but I only really care about up to date browsers and operating systems, so I used their FAQ to piece together the requirements for that.

I used Jdenticon to generated large (3200x3200) icon. Then using GIMP, I autocropped edges and scaled to required various sizes as detailed below, each from fullsize and exported as PNG or ICO. PNGs were then compressed with ImageOptim.

Images

iOS: 180x180
Browsers: 32x32
favicon.ico: 32x32
Android: 192x192
Windows Tiles: 95x95 icon with 128x128 canvas, 127x127 icon with 270x270 canvas

Code

HTML
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="manifest" href="/manifest.json">
manifest.json (for Android)
{
    "name": "elimarshal.com",
    "icons": [
        {
            "src": "\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}
browserconfig.xml (for IE)
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <TileColor>#603CBA</TileColor>
    </tile>
  </msapplication>
</browserconfig>