Tuesday Tips: Favicons – Brandon Muramatsu

TL;DR: Create a favicon.ico file with images at: 16×16, 24×24, 29×29, 32×32, 57×57, 64×64, 72×72, 114×114, 128×128, 144×144.

As part of my updates for high pixel density displays, I’ve also taken a look at what I need to do to update my favicons.

Wikipedia has a good definition of favicons. Given that it’s 2012 and I’ve been making favicons for something like 17 years one would have hoped that modern web-browsers would have graduated to a more modern file format. While Safari, Chrome, and Firefox support the PNG file format, IE still doesn’t (and I don’t want to write a WordPress plugin to browser detect to load .png vs .ico).

According to Adam Bertram at Lessons Learned, for Internet Explorer 9, Microsoft recommends designing favicons at: 16×16, 24×24, 32×32, and 64×64. (In my TL;DR I add the next multiple up, to help future proof the design.)

And according to Wikipedia entry, for iOS devices, favicons should be designed at:

“The recommended basic size for this icon is 57×57 pixels, with 90 degree corners; for best display on the higher-resolution iPhone 4 screen, an icon size of 114×114 pixels is recommended.

For the iPad and iPad2, the basic size is 72×72 pixels with 90 degree corners. For the iPad3, the high-resolution size would be 144×144 pixels.”

So that adds a bunch more to the list, and thank heavens for scalable vector graphics. (See also Updating for iPad retina display by BiOM at iOS Tips and Tricks.)

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][aside title=”ConvertIcon.com”]I use this site and select all of the options to cover all the cases, it’s easier to remember to check them all.[/aside] In practice, I’ll create the original image at 600×600 when I can (this is somewhat arbitrary, but it’s also one of the sizes of the cover art icons in iTunes, so I figure that future proofs this for a bit). And then use web-based ConvertIcon.com to create a .ico file. Unfortunately this site is Flash-based, but it makes things really easy.[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

About