With great difficult I’ve finally got my sites favicon showing up with IE 10 (Metro and Desktop) and thus showing when you pin a site to the metro home screen. For whatever reason Firefox and Chrome are far less fussy than IE about getting an icon to work, perhaps time for Microsoft to improve the code around the use of favicons to make it more user friendly.
So how did I do it.
- I used Greenfish Icon Editor Pro (Freeware) available from snapfiles here http://www.snapfiles.com/downloads/gficoneditor/dlgficoneditor.html none of the online converters were creating a file that would work with IE (note they would work with Firefox/Chrome).
- Uploaded the finished favicon.ico to the root directory of my website.
- Edited the header.php file for my theme, this file can be found in the following directory /wp-content/themes/themename/
- Added the following line of code to the aforementioned header.php file; <link rel=”shortcut icon” href=”http://www.alistairbeasley.com/favicon.ico” type=”image/x-icon” /> , this needs to go in between <head></head> but before <title /> prefrably as the first line after the opening <head> tag.
- After that if you’ve already viewed your page in IE you’ll need to completely delete your browsing history, a ctrl-f5 refresh won’t work.
- You should be done and when pinning the page to your Metro start screen you should see something like this.
Note that Metro will pull the dominant colour from your icon and use that as the tile colour, I assumed this would be white, however I suspect it must take an average of all the colours used.
