search

opengovernment / askthem

Monitor and interact with local governments in the United States
GNU Affero General Public License v3.0
41 stars 15 forks source link

Add mobile friendly icons #346

Closed walter closed 10 years ago

walter commented 10 years ago

Mobile users need to have touch versions of icons or it will cause 404s on our site.

Probably best based on this:

http://www.askthem.io/assets/mark.png

Alternatively, could use:

http://askthem-tmp.dev/assets/logo.png

Technical details here:

http://mathiasbynens.be/notes/touch-icons

TL;DR

Look ma, no HTML! If no icons are specified in the HTML, iOS Safari will search the website’s root directory for icons with the apple-touch-icon or apple-touch-icon-precomposed prefix. For example, if the appropriate icon size for the device is 57 × 57 pixels, iOS searches for filenames in the following order.

apple-touch-icon-57x57-precomposed.png apple-touch-icon-57x57.png apple-touch-icon-precomposed.png apple-touch-icon.png

So, what do we need?

  • apple-touch-icon-57x57-precomposed.png or apple-touch-icon-57x57.png for non Retina iPhone and iPod Touch;
  • apple-touch-icon-76x76-precomposed.png or apple-touch-icon-76x76.png for the iPad mini and the first- and second-generation iPad on iOS ≥ 7;
  • apple-touch-icon-120x120-precomposed.png or apple-touch-icon-120x120.png for iPhone 4+ (with Retina Display) on iOS ≥ 7;
  • apple-touch-icon-152x152-precomposed.png or apple-touch-icon-152x152.png for iPad 3+ (with Retina Display);
  • apple-touch-icon-precomposed.png and apple-touch-icon.png as a fallback for everything else (possibly including non-Apple devices).

cc @davidmooreppf

davidmooreppf commented 10 years ago

Amanda, just assigning this to you in case you have time to pick it up, resizing in Photoshop per the above for our mobile users. Realize we need to book more of your time.