İPad ve iPhone için apple-touch-icon.png'nin boyutu ne olmalıdır?

60x60'tan daha büyük Apple touch simgeleri destekleniyor mu ve destekleniyorsa iPad ve iPhone için hangi boyutları kullanmalıyım?

Aralık 2019 güncellendi listesi, iOS13 iOS 180x180 piksel için bir simge ve Android 192x192 piksel için bir simge (site.webmanifest'te açıklanmıştır).

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

#### site.webmanifest
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "display": "standalone"
}

Kullanımdan kaldırılan liste Ekim 2017, iOS11

Retinalı ve retinasız iPhone ve iPad listesi

<!-- 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">

Ekim 2017 Güncellemesi iOS 11: iOS 11 kontrol edildi, iPhone X ve iPhone 8 kullanıma sunuldu

Kasım 2016 Güncellemesi iOS 10: Yeni iOS sürümü iPhone 7 ve iPhone 7plus piyasaya sürüldü, iPhone 6s ve iPhone 7plus ile aynı ekran çözünürlüğüne, dpi'ye vb. Sahipler, şimdiye kadar 2015 güncellemesine ilişkin hiçbir değişiklik bulunamadı

2016 Ortası Android'i Güncelleyin: Apple dokunma bağlantıları Google tarafından kullanımdan kaldırıldı olarak işaretlendiğinden ve cihazlarında hiçbir zaman desteklenmeyeceğinden listeye Android Cihazları ekleyin

<!-- 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">

2015 iOS 9 Güncellemesi: iOS 9 ve iPad pro için

<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">

Yeni iPhone'lar (6s ve 6s Plus) iPhone (6 ve 6 Plus) ile aynı boyutları kullanıyor, yeni iPad pro 167x167 piksel boyutunda bir görüntü kullanıyor, diğer çözünürlükler hala aynı.

2014 iOS 8'i güncelleyin:

İOS 8 ve iPhone 6 plus için

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

Iphone 6, iphone 4 ve 5 ile aynı 120 x 120 piksel görüntüyü kullanır, geri kalanı iOS 7 ile aynıdır

2013 iOS7 güncellemesi:

İOS 7 için önerilen çözünürlükler değişti:

• iPhone Retina için 114 x 114 piksel ila 120 x 120 piksel arası
• iPad Retina için 144 x 144 piksel ila 152 x 152 piksel arası

Diğer çözünürlük hala aynı

• 57 x 57 piksel varsayılan
• Retinasız iPad'ler için 76 x 76 piksel

Kaynak: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Şu 57x57, 72x72, 114x114, 144x144 boyutları kullanın ve ardından bunu belgenizin başlığında yapın:

<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" />

Bu, tüm Apple cihazlarında iyi görünecek. ;)

İPad (3. nesil) ile artık 57x57, 72x72, 114x114, 144x144 olmak üzere dört simge boyutu vardır.

Retina simgeleri, standart simgelerin tam olarak iki katı büyüklükte olduğundan, gerçekten sadece 2 simge yapmamız gerekiyor : 114 x 114 ve 144 x 144. Retina boyutlu simgeyi karşılık gelen standart simgeye ayarlayarak, iOS bunları uygun şekilde ölçeklendirecektir.

<!-- 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" />

Apple'ın sitesindeki simge 152x152 pikseldir.
http://www.apple.com/apple-touch-icon.png

Umarım bu sorunuzu yanıtlar.

TL; DR: 180 x 180 piksel @ 150 ppi'de bir PNG simgesi kullanın ve ardından buna şu şekilde bağlantı verin:

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

Yaklaşımla İlgili Ayrıntılar

2020-04 itibariyle, Apple'dan gelen kanonik yanıt , iOS'taki belgelerinde yansıtılmaktadır .

Resmi olarak teknik özellikler şöyle diyor:

• iPhone 180px × 180px (60pt × 60pt @ 3x)
• iPhone 120px × 120px (60pt × 60pt @ 2x)
• iPad Pro 167px × 167px (83.5pt × 83.5pt @ 2x)
• iPad, iPad mini 152px × 152px (76pt × 76pt @ 2x)

Gerçekte, bu boyutlandırma farklılıkları çok küçüktür, bu nedenle performans tasarrufu gerçekten yalnızca çok yüksek trafikli sitelerde önemli olacaktır.

Daha düşük trafikli siteler için genellikle 180 x 180 piksel @ 150 ppi'de bir PNG simgesi kullanıyorum ve tüm cihazlarda, artı boyutlu olanlar da dahil olmak üzere çok iyi sonuçlar alıyorum .

Bir süredir iOS uygulamaları geliştiriyorum ve tasarlıyorum ve bu , oradaki en iyi iOS tasarım hile sayfası!

iyi eğlenceler :)!

Güncelleme: iOS 8+ ve yeni cihazlar (iPhone 6, 6 Plus, iPad Air) için bu güncellenmiş bağlantıya bakın .

Meta güncelleme: Iphone 6s / 6s Plus, sırasıyla iPhone 6/6 Plus ile aynı çözünürlüklere sahiptir

Bu, makalenin yeni sürümünden bir resimdir:

Apple'ın sitesinde, Web Klibi için Web Sayfası Simgesi Belirtme başlıklı ilgili belgeler .

Belgenizin başına herhangi bir şey koymanıza gerek yoktur. Bir bağlantı öğesi kullanılarak hiçbir simge belirtilmezse, web sitesi kök dizini elma dokunma simgesi veya elma dokunma simgesi önceden oluşturulmuş öneki olan simgeler aranır .

Örneğin, aygıt için uygun simge boyutu 57 x 57 ise, sistem aşağıdaki sırayla dosya adlarını arar:

• elma-touch-icon-57x57-precomposed.png
• elma-touch-icon-57x57.png
• elma-touch-icon-precomposed.png
• elma-touch-icon.png

Evet. Boyut eşleşmezse, sistem yeniden ölçeklendirir . Ancak simgelerin 2 versiyonunu yapmak daha iyidir.

• iPad - 72x72.
• iPhone (≥4) - 114x114.
• iPhone ≤3GS - 57x57 - Mümkünse.

Sen olabilir kullanıcı aracısı tarafından iPad ve iPhone ayırt Sunucunuzda. Sunucuya komut dosyası yazmak istemiyorsanız, Javascript ile simgeyi şu şekilde de değiştirebilirsiniz:

<link ref="apple-touch-icon" href="iPhone_version.png" />
...

if (... iPad test ...) {
  $('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}

Bu işe yarar çünkü simge yalnızca web klibini eklediğinizde sorgulanır.

(Henüz Javascript'te iPhone ≥4'ü iPhone ≤3GS'den ayırmanın genel bir yolu yoktur.)

Evet, 60x60'tan büyük olanlar desteklenmektedir. Basit olması için şu 4 boyutta simgeler oluşturun:

1) 60x60  <= default
2) 76x76
3) 120x120
4) 152x152

Şimdi, bunları aşağıdaki gibi HTML'nize bağlantılar olarak eklemek tercih edilir:

<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">

Yukarıdaki 4 bağlantıyı bildirmemeyi seçebilir, ancak tek bir bağlantı bildirebilirsiniz, bu durumda en yüksek boyutu 152x152veya hatta bundan daha büyük bir boyutu verin 196x196. Yeniden amaca yönelik olarak her zaman boyutu küçültecektir. 'Den bahsettiğinizden emin olun size.

Tek bir bağlantı bile bildirmemeyi de seçebilirsiniz. Apple, bu senaryoda, istediği boyuttan hemen daha yüksek bir boyut için önce sunucu kökünü apple-touch-icon-<size>.pngarayacağından (adlandırma biçimi:) ve bu bulunmazsa, daha sonra default file: apple-touch-icon.png. Tarayıcının sunucunuzu sorgulamasını en aza indirecek şekilde bağlantı (lar) ı tanımlamanız tercih edilir.

Simge gereksinimleri:

- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors

İOS 7'den daha eski sürümlerde, simgelerinize efekt eklemesini istemiyorsanız -precomposed.png, dosya adına soneki eklemeniz yeterlidir . (iOS 7, onsuz bile efekt eklemez).

Sanırım bu soru web ikonları ile ilgili. 512x512'de bir simge vermeye çalıştım ve iPhone 4 simülatöründe harika görünüyor (önizlemede) ancak ana ekrana eklendiğinde kötü bir şekilde pikselleşiyor.

İyi tarafı, iPad'de daha büyük bir simge kullanırsanız (hala 512x512 testimle), iPad'de daha iyi kalitede çıkıyor gibi görünüyor. Umarım iPhone 4 görüntülemesi bir hatadır.

Radarda bununla ilgili bir hata açtım.

DÜZENLE:

Şu anda iPhone 4 piyasaya çıktığında iyi görüneceğini ümit ederek 114x114 simge kullanıyorum. İPhone 4 çıktığında hala bir hata varsa, iPad için simgeyi optimize edeceğim (72x72'de net ve yeniden boyutlandırma yok) ve ardından eski iPhone'lar için ölçeğini küçülteceğim.

For iPhone ve iPod touch , bu tedbiri simgeler oluşturun:

    57 X 57 pixels
    114 X 114 pixels (high resolution @2X)

For iPad , bir simge tedbirler olduğunu oluşturun:

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)