Favicon Sizes

At one time favicon sizes were simple. Create a 16×16 pixel ico image and place it in the root of your web server with the name favicon.ico and the browsers picked it up as the websites favicon. Then came 32×32 pixel sized favicons. That was easy enough but things change and we got Apple touch icons, Android icons and now Windows Metro tile icons. It gets confusing really quickly.

  • 16×16 – Still the default for a favicon. Should be included in the favicon.ico file.
  • 32×32 – The next size up for favicons. Both 16×16 and 32×32 pixel sized icons can be included in the favicon.ico file. This is something our current favicon generator does not actually do. The next generation of our icon creator will provide this.
  • 57×57 – Standard iOS home screen. iPhone, iPod Touch, and Android 2.1+ devices.
  • 72×72 – For first and second generation iPad.
  • 96×96 – GoogleTV icon.
  • 114×114 – For iPhone with high resolution retina displays running iOS 6.
  • 120×120 – For iPhone with high-resolution retina display running iOS 7.
  • 128×128 – Chrome Web Store icon.
  • 144×144 – For iPad with high-resolution retina display running iOS 6. Also IE10 Metro tile for pinned site.
  • 152×152 – For iPad with high-resolution retina display running iOS 7.
  • 195×195 – Opera Speed Dial icon.

As you can see the number of favicons that you could create has grown considerably. If you want to save time we recommend you make at the very least three favicons. A 16×16, 32×32 and a 152×152 icon for use with iOS/Android devices. The larger sized icon will be automatically downscaled by the devices.

Currently our generator will only produce a 16×16 ico file from your image. Our second generation creator that we are testing now will allow you to produce an ico file with both 16×16 and 32×32 pixel icons included as well as png formats for 16×16, 24×24, 32×32, 48×48, 57×57, 64×64, 72×72, 114×114, 120×120, 144×144, and 152×152 sized icons.

Look for our announcement soon about the new icon creator we have been working on and more information of how to add all of the different sizes on your website.

Leave a Comment