Enabling Hi-Res Favicons in the new Windows UI

App Tiles (Internet Explorer in the new Windows UI style UI)

  • No hi-res favicon : If your website does not have a favicon or its resolution is less than 64x64, a user that pins it will just see a small semi-opaque Internet Explorer logo.
  • IE9 hi-res favicon : If your website has already implemented favicons, a user that pins it will see your logo at its real size (64x64) leaving a lot of empty space.
  • Internet Explorer 10 Tile : If your website implements Internet Explorer 10 Internet Explorer in the new Windows UI tiles, a user that pins it will see your website's logo and will be able to easily identify your brand.

Favicon Checklist

  • Icon file (.ico format) with the logo in the following resolutions: 16x16, 32x32, 64x64
  • PNG file of 144x144pixels with the logo of the company
  • Hexadecimal color value of the tile
  • Permission to update the html content of the website
  • Permission to add image files to the web server
  • Name of the application
  • [Designer] Create an .ico image with your company logo with the following resolutions (resolutions here).
  • [Designer] Create a .png file of 144x144 with your company logo and a transparent background.
  • [Designer] Provide the assets to the developer.
  • [Developer] Put the assets the designer has given you (an .ico file and a .png file) in the web server. Those files have to be accessible from the Internet.
  • [Developer] Remember the URL to each of the files. It can be relative ("/favicon.ico") or absolute ("http://www.mydomain.com/favicon.ico").
  • [Developer] Edit the header section of the website.

Customizing the Site Icon