Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Our favicon / site tile cheat sheet for WordPress themes

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

<?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>
// 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"]);
<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 */ ?>/>
{
"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"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment