какого размера должен быть apple-touch-icon.png для ipad и iphone?

<p>поддерживаются ли apple сенсорные значки размером более 60x60, и если да, то какие размеры я должен использовать для ipad и iphone?</p>

<p><strong> обновлен список октябрь 2017, ios11 </strong></p><p>список для iphone и ipad с и без сетчатки</p><pre><code><!-- iphone(first generation or 2g), iphone 3g, iphone 3gs --> <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png"> <!-- ipad and ipad mini @1x --> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <!-- iphone 4, iphone 4s, iphone 5, iphone 5c, iphone 5s, iphone 6, iphone 6s, iphone 7, iphone 7s, iphone8 --> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <!-- ipad and ipad mini @2x --> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> <!-- ipad pro --> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png"> <!-- iphone x, iphone 8 plus, iphone 7 plus, iphone 6s plus, iphone 6 plus --> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> <!-- android devices high resolution --> <link rel="icon" sizes="192x192" href="icon-hd.png"> <!-- android devices normal resolution --> <link rel="icon" sizes="128x128" href="icon.png"> </code></pre><p><strong> обновление, октябрь 2017 г. ios 11: </strong> ios 11 проверена, iphone x и iphone 8 представлены</p><p><strong> обновление от ноября 2016 г. ios 10: </strong> представлены новые версии ios для iphone 7 и iphone 7plus, с таким же разрешением экрана, dpi и т.д., как у iphone 6s и iphone 7plus , до сих пор не найдено никаких изменений относительно обновления 2015</p><p><strong> обновление середины 2016 года для android: </strong> добавить android устройства в список, так как ссылки apple-touch помечены google как устаревшие и будут не поддерживается в любое время для своих устройств</p><pre><code><!-- android devices high resolution --> <link rel="icon" sizes="192x192" href="icon-hd.png"> <!-- android devices high resolution --> <link rel="icon" sizes="128x128" href="icon.png"> </code></pre><p><strong> обновление 2015 ios 9: </strong> для ios 9 и ipad pro</p><pre><code><link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png"> </code></pre><p>новые iphone (6s и 6s plus) используют те же размеры, что и iphone (6 и 6 plus), новый ipad pro использует изображение размером 167x167 px, остальные разрешения остаются такими же.</p><p><strong> обновление 2014 года ios 8: </strong></p><p>для ios 8 и iphone 6 плюс</p><pre><code><link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> </code></pre><p>iphone 6 использует то же изображение размером 120 x 120 px, что и iphone 4, а 5 остальное такое же, как для ios 7</p><p><strong> обновление ios7 2013: </strong></p><p>для ios 7 рекомендуемые разрешения изменены:</p><ul> <li>для iphone retina от 114 х 114 пикселей до 120 х 120 пикселей</li> <li>для ipad retina от 144 х 144 пикселей до 152 х 152 пикселей</li> </ul><p>другое разрешение остается прежним</p><ul> <li>57 x 57 px по умолчанию</li> <li>76 х 76 пикселей для ipad без сетчатки</li> </ul><p>источник: <a href="https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/">https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/</a> </p>

<p>используйте эти размеры 57x57, 72x72, 114x114, 144x144 и сделайте это в заголовке документа:</p><pre><code><link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" /> </code></pre><p></p><p>это будет хорошо смотреться на всех apple устройствах. ;)</p>

<p>с ipad (3-го поколения) теперь есть четыре размера иконок 57x57, 72x72, 114x114, 144x144.</p><p>поскольку значки на сетчатке ровно в два раза больше стандартных значков, нам нужно только сделать <strong>2 иконки</strong>: 114 x 114 и 144 x 144. при установке иконки размером с сетчатку на соответствующий стандартный значок ios будет масштабироваться их соответственно.</p><pre><code><!-- standard iphone --> <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" /> <!-- retina iphone --> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" /> <!-- standard ipad --> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" /> <!-- retina ipad --> <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" /> </code></pre>

<p>значок на сайте apple составляет 152х152 пикселей.<br> <a href="http://www.apple.com/apple-touch-icon.png">http://www.apple.com/apple-touch-icon.png</a> </p><p>надеюсь это ответит на твой вопрос.</p>

<p>я уже некоторое время занимаюсь разработкой и дизайном приложений для ios, и <a href="http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/">this</a> - это лучшая шпаргалка для ios!</p><p>повеселись :)!</p><p><img src="https://i.stack.imgur.com/tcqsu.png" alt="this image is from that article :)"></p><p><strong> обновление: </strong> для ios 8+ и новых устройств (iphone 6, 6 plus, ipad air) см. <a href="http://iosdesign.ivomynttinen.com">эта обновленная ссылка</a> ,.</p><p><strong> мета-обновление: </strong> iphone 6s/6s plus имеют те же разрешения, что и iphone 6/6 plus соответственно</p><p>это изображение из новой версии статьи:</p><p><img src="https://i.stack.imgur.com/54bqw.png" alt="ios 8 and mid 2014 devices info"></p>

<p>tl; dr: <strong> использовать один значок png с разрешением 180 x 180 px @ 150 ppi </strong> и затем добавить ссылку на него следующим образом:</p><pre><code><link rel="apple-touch-icon" href="path/to/apple-touch-icon.png"> </code></pre><h2>подробности о подходе</h2><p>по состоянию на 2018-10-02 канонический ответ apple отражен в <a href="https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/">их документация на ios</a> .</p><p>официально в спецификации говорится:</p><ul> <li>iphone 180px × 180px (60pt × 60pt @ 3x)</li> <li>iphone 120px × 120px (60pt × 60pt @ 2x)</li> <li>ipad pro 167 пикселей × 167 пикселей (83,5 пикс., 83,5 пикс., 2x)</li> <li>ipad, ipad mini 152px × 152px (76pt × 76pt @ 2x)</li> </ul><p>на самом деле эти различия в размерах незначительны, поэтому экономия производительности будет иметь значение только на участках с очень высоким трафиком.</p><p>для сайтов с низким трафиком я обычно использую <strong> одну иконку png с разрешением 180 x 180 px @ 150 ppi </strong> и получаю очень хорошие результаты на всех устройствах, даже на плюс размер из них.</p>

<p>соответствующая документация на сайте apple, <a href="http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/configuringwebapplications/configuringwebapplications.html">указание значка веб-страницы для web clip</a> .</p><p>нет необходимости помещать что-либо в заголовок вашего документа. если для элемента ссылки не указаны значки, в корневом каталоге веб-сайта выполняется поиск значков с <strong> apple-touch-icon </strong> или <strong> префикс apple-touch-icon-precomposed </strong>.</p><p>например, если соответствующий размер значка для устройства составляет 57 x 57, система выполняет поиск имен файлов в следующем порядке:</p><ul> <li>яблочно-сенсорный значок-57x57-precomposed.png</li> <li>яблочно-сенсорный значок-57x57.png</li> <li>яблочно-сенсорный значок-precomposed.png</li> <li>яблочно-сенсорный icon.png</li> </ul>

<p>да, более 60x60 поддерживаются. для простоты создайте иконки этих 4 размеров:</p><pre><code>1) 60x60 <= default 2) 76x76 3) 120x120 4) 152x152 </code></pre><p>теперь желательно добавить их в виде ссылок в html-код:</p><pre><code><link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> </code></pre><p>вы можете не объявлять 4 вышеуказанные ссылки, а просто объявить одну ссылку, в этом случае задайте максимальный размер <code>152x152</code> или даже размер, превышающий этот, скажем <code>196x196</code>. он всегда будет уменьшать размер для повторного использования. убедитесь, что вы упомянули <code>size</code>.</p><p>вы также можете не объявлять даже одну ссылку. apple упоминает, что в этом сценарии он сначала ищет корневой каталог сервера, размер которого сразу превышает размер, который ему нужен (формат имен: <code>apple-touch-icon-<size>.png</code>), и если он не найден, то в следующий раз он ищет <code>default file:</code> <code>apple-touch-icon.png</code>. желательно, чтобы вы указали ссылку (и), так как это сведет к минимуму количество запросов браузера к вашему серверу.</p><p>необходимые иконки:</p><pre><code>- use png, avoid interlaced - use 24-bit png - not necessary to use web-safe colors </code></pre><p>в версиях, предшествующих ios 7, если вы не хотите добавлять эффекты к значкам, просто добавьте суффикс <code>-precomposed.png</code> к имени файла. (ios 7 не добавляет эффектов даже без него).</p>

<p>я думаю, что этот вопрос о веб-иконы. я попытался дать значок 512x512, и на симуляторе iphone 4 он выглядит великолепно (в превью), однако при добавлении на домашний экран он плохо пикселируется.</p><p>с другой стороны, если вы используете значок большего размера на ipad (все еще с моим тестом 512x512), он выглядит лучше на ipad. надеюсь, рендеринг iphone 4 - это ошибка.</p><p>я открыл ошибку об этом на радаре.</p><p>правка:</p><p>в настоящее время я использую значок 114x114 в надежде, что он будет хорошо выглядеть на iphone 4 после его выпуска. если iphone 4 все еще имеет ошибку, когда он выйдет, я собираюсь оптимизировать значок для ipad (четкое и без изменения размера при 72x72), а затем уменьшу его для старых iphone.</p>

<p>для <strong>iphone</strong> и <strong>ipod touch</strong> создайте значки, которые измеряют:</p><pre><code> 57 x 57 pixels 114 x 114 pixels (high resolution @2x) </code></pre><p>для <strong>ipad</strong> создайте значок, который измеряет:</p><pre><code> 72 x 72 pixels 144 x 144 pixels (high resolution @2x) </code></pre>