Our favicon / site tile cheat sheet for WordPress themes

README.md

Files

• favicon.ico -- multi-image file built from favicon-*.png files
• favicon-32.png -- 32x32 for basic favicon in browser tabs and bookmarks
• favicon-128.png -- 128x128 for Windows square70x70logo and large favicon in favicon.ico
• tile-180.png -- 180x180 for Apple touch icons by Apple iOS new iPhone 6 plus (bigger phones)
• tile-192.png -- 192x192 for Android devices
• tile-270.png -- 270x270 for Windows square150x150logo tile
• tile-512.png -- 512x512 for Android hi-res devices
• browserconfig.xml -- used by Windows 10 and IE11/Edge to load tile images
• site.manifest -- used by Android devices

Building the favicon.ico file

We use grunt to optimise the png files and then collate any named favicon-*.png into the favicon.ico file.

• open this file or the browserconfig.xml file in Geany
• show message window (alt-M)
• go to the Terminal tab
• right-click and select Set Path From Document
• grunt favicon

References

• Real Favicon Generator
• Obsessive cheat sheet to favicon sizes/types
• Creating custom tiles for IE11 websites

browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- https://msdn.microsoft.com/en-us/library/dn455106%28v=vs.85%29.aspx -->
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="favicon-128.png" />
      <square150x150logo src="tile-270.png" />
      <TileImage src="tile-270.png" />
      <TileColor>#000000</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Gruntfile.js

// add task to Gruntfile.js
shell: {
	// @link https://github.com/sindresorhus/grunt-shell
	favicon: {
		options: {
			execOptions: {
				cwd: "./images/favicons"
			}
		},
		command: [
			"optipng -o7 *.png",
			"convert favicon*.png favicon.ico"
		].join("&&")
	}
}

// load dependency
grunt.loadNpmTasks("grunt-shell");

// register task
grunt.registerTask("favicon", ["shell:favicon"]);

head.php

<link rel="icon" sizes="32x32 128x128" href="<?= get_stylesheet_directory_uri(); ?>/images/favicons/favicon.ico" />
<link rel="icon" sizes="32x32" href="<?= get_stylesheet_directory_uri(); ?>/images/favicons/favicon-32.png" /><?php /* because ff chooses the wrong png from the .ico */ ?>
<link rel="apple-touch-icon" sizes="180x180" href="<?= get_stylesheet_directory_uri(); ?>/images/favicons/tile-180.png" />
<link rel="manifest" href="<?= get_stylesheet_directory_uri(); ?>/images/favicons/site.webmanifest">
<meta name="msapplication-config" content="<?= get_stylesheet_directory_uri(); ?>/images/favicons/browserconfig.xml" />
<meta name="application-name" content="<?php bloginfo('name'); ?>" <?php /* Windows 8 title for tile */ ?>/>

site.manifest

{
    "name": "Example Name",
    "short_name": "Example",
    "icons": [
        {
            "src": "tile-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "tile-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}