发表新帖
发表新帖

What are the correct pixel dimensions for an apple-touch-icon?

后端 未结
关注
11 744
感情败类
感情败类 2020-12-12 20:05

I\'m not sure what the correct size should be.

Many sites seem to repeat that the apple-touch-icon should be 57x57 pixels but cite a broken link as their source.

相关标签:
11条回答
  • 孤城傲影
    2020-12-12 20:57

    Depends on how much detail you want it to have, it needs to have the aspect ratio of 1:1 (basically - it needs to be square)

    I would go with the Apple's own 129*129

    0 讨论(0)
  • 我在风中等你
    2020-12-12 21:00

    NilObject's link led me to the great blog post Catchup on your Icon at makentosh.com

    ... Of course all of this inconsistency had to be dealt with eventually, right? Well 2.0 dealt with it in fine fashion! Finally 57x57 actually meant 57x57.

    ...each and every pixel ... rendered perfectly.

    0 讨论(0)
  • 無奈伤痛
    2020-12-12 21:03

    Apple specs specify new sizes for iOS7:

    • 60x60
    • 76x76
    • 120x120
    • 152x152

    Whereas old sizes for iOS6 and prior are:

    • 57x57
    • 72x72
    • 114x114
    • 144x144

    By the way, precomposed icons are deprecated.

    As a consequence, to support but new devices (running iOS7) and older (iOS6 and prior), these 8 pictures must be present and the generic code is:

    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

    In addition, you should create a 152x152 picture named apple-touch-icon.png.

    You might want to know that this favicon generator can generate all these pictures at once. Full disclosure: I'm the author of this site.

    0 讨论(0)
  • 既然无缘
    2020-12-12 21:06

    From the Google cache of Apple Developer Connection - Web Apps Dev Center - Designing Content...

    Create a Web Clip Bookmark Icon

    iPhone and iPod touch allow a user to save a Web Clip bookmark to your site on their Home Screen.

    To specify a bookmark icon for all pages of a web site, place a PNG image named "apple-touch-icon.png" at the root directory of your web server - similar to the "favicon.ico" for site icons.

    To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.

    The bookmark icon dimensions should be 57x57 pixels. If the icon is a different size it will be scaled and cropped to fit.

    Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application.

    0 讨论(0)
  • 暗喜
    2020-12-12 21:07

    It seems that Apple guidelines as of August 3, 2010 now include the "High resolution" images (for iPhone 4) in their "required" icon sizes.

    Looks like we need to provide both a 57x57 and a 114x114 image now, as well as a 640x960 title image.

    See Custom Icon and Image Creation Guidelines (Javascript required) which is part of a whole document:

    • iOS Human Interface Guidelines (2013; by Apple Inc; PDF; 26,3 MB)
    0 讨论(0)
 看不清?
提交回复
热议问题