O'Reilly logo

Instant Website Optimization for Retina Displays How-to by Kyle J. Larson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

High-resolution web apps (Should know)

When creating web apps you'll want to provide icons and startup images for users that save your app to their home screen. If you don't add these icons your site will just be represented by a screenshot, which is not ideal. When dealing with Retina device icons we can also upgrade our favicon, which is displayed in your browser tab next to the page title. This recipe will show you how to add Retina favicons, app icons, and startup images to your site.

Getting ready

To get started we'll need to create a few graphics. Within your graphics editor, create a 32 x 32 pixel image for your favicon. This is typically a logo or an image that you feel represents your site.

Next create an app icon that is square and at least ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required