Search code examples
iphoneipadfaviconretina-display

differentiate web favicon for iPad and iPhone


Is there a way to say to use 1 icon for an iPad and another for an iPhone? The only fav icon code I know of is <link rel="apple-touch-icon" href="icon.jpg"> but that is just generic Apple and doesn't specify device. And I presume since newer iPhones and iPads have the retina display, I would need a diff webapp icon for those, too, right??


Solution

  • Sure thing, from the excellent Icon Handbook:

    <!-- For iPhone 4 Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">
    
    <!-- For iPad: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">
    
    <!-- For iPhone: -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">