Şimdiye kadar kafamdaki Apple Touch simgesi satırını şu şekilde ekledim:
<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png">
Bununla birlikte, Soru-Cevap bölümünde "Apple dokunmalı simge için doğru piksel boyutları nelerdir?" Kabul edilen cevapta, Apple'ın yönergelerine göre artık üç görüntüye ihtiyaç duyulduğu belirtiliyor.
Peki bunları kodun baş kısmına eklemek nasıl olur?
Yanıtlar:
Minimalist çözüm - Önerilen
Yaygın bir uygulama, beklenen en yüksek çözünürlük olan tek bir 180x180 simge oluşturmak ve iOS cihazlarının bunu gerektiği gibi küçültmesine izin vermektir. Şu şekilde beyan edilir:
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
Kapsamlı çözüm - Değil tavsiye
Apple özellikleri , iOS7 için yeni boyutlar belirler:
Ek olarak, önceden oluşturulmuş simgeler kullanımdan kaldırılmıştır.
Sonuç olarak, hem yeni cihazları (iOS7 çalıştıran) hem de daha eski (iOS6 ve önceki sürümleri) desteklemek için genel kod:
<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">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
Ayrıca apple-touch-icon.png adlı 180x180 boyutunda bir resim oluşturmalısınız .
İOS'un /apple-touch-icon-76x76.png, HTML kodunda ilginç şeyler bulamaması gibi bir URL aradığını unutmayın (biraz IE'nin yaptığı gibi /favicon.ico). Bu yüzden dosya isimlerini yukarıda tutmanız önemlidir. Ayrıca Android / Chrome'un da bu resimleri kullandığını dikkate almak önemlidir .
Bu favicon oluşturucunun tüm bu resimleri aynı anda oluşturabileceğini bilmek isteyebilirsiniz . Tam açıklama: Bu sitenin yazarıyım.
<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" type="image/png" />olmak yeterlidir. Ve farklı boyutlarda resimler oluştursanız bile, söyleyebileceğim kadarıyla tüm apple-touch-icon bağlantılarını kaldırabilirsiniz ve iOS, tercih edilen boyuttan başlayarak (apple-touch-icon-180x180 gibi) dosyaların kendisini arayacaktır. png) ve başka dosya bulunamazsa apple-touch-icon.png kullanarak.
apple-touch-icon).
İşte al, umarım bu yardımcı olur.
Apple'ın sizin için estetik kısmı yapmasını istiyorsanız (parlaklığı ekleyin), o zaman bunları <head>etiketlere ekleyin:
<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />
Eğer isterseniz precompose görüntüyü, bu yüzden Apple parlak olmadan görüntüler, o zaman bu yönde olur:
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
Birden fazla eklemeniz koşuluyla, iOS cihazı doğru boyutu arayacak ve bu görüntüyü otomatik olarak kullanacaktır. Örnekteki resimlerin adlarından da görebileceğiniz gibi, retina ekranlı iPad'in 144x144 piksellik bir simgeye, iPhone 4 / 4S / 5'in 114x114 piksellik bir simgeye, orijinal iPad'e (ve iPad 2'ye de ekran çözünürlüğü farklı değildir) 72x72px'lik bir simgeye ihtiyaç duyar ve orijinal iPhone'un bir boyut spesifikasyonuna ihtiyacı yoktur, ancak referansınız için 57x57px'dir.
Bu yanıtlardan birkaçı zaten güncel olmadığı için, tüm görüntüleri ve işaretlemeyi oluşturmak için http://realfavicongenerator.net/ kullanmanızı tavsiye ederim - her kullandığımda birkaç euro bağışta bulunuyorum. iOS, Android ve Windows'ta neyin geçerli olduğu konusunda güncel, bu yüzden buna gerek yok.
2018 itibariyle, Apple Developers Web Sitesi , iOS cihazlar için aşağıdakileri önermektedir:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="/launch.png">
<meta name="apple-mobile-web-app-title" content="AppTitle">
Uygulama Başlığı, web sitenizin başlığının yerini alacaktır. Genellikle bunu istersiniz. Uygulama başlatılırken görünecek olan başlangıç görüntüsüdür.
Web Klibi için Web Sayfası Simgesi Belirtme
Kullanıcıların web uygulamanızı veya web sayfası bağlantınızı Ana ekrana ekleyebilmelerini isteyebilirsiniz. Bir simgeyle gösterilen bu bağlantılara Web Klipleri adı verilir. İOS'ta web uygulamanızı veya web sayfanızı temsil edecek bir simge belirtmek için bu basit adımları izleyin.
Tüm web sitesi (web sitesindeki her sayfa) için bir simge belirtmek için apple-touch-icon.png adlı kök belge klasörüne PNG formatında bir simge dosyası yerleştirin
Tek bir web sayfası için bir simge belirtmek veya web sitesi simgesini web sayfasına özgü bir simgeyle değiştirmek için, web sayfasına aşağıdaki gibi bir bağlantı öğesi ekleyin:
<link rel="apple-touch-icon" href="/custom_icon.png">
Yukarıdaki örnekte, custom_icon.png'yi simge dosya adınızla değiştirin. Farklı aygıt çözünürlükleri için birden çok simge belirtmek için (örneğin, hem iPhone hem de iPad aygıtlarını desteklemek) her bağlantı öğesine aşağıdaki gibi bir boyut özelliği ekleyin:
<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">
Cihaz için en uygun boyutta ikon kullanılır. Boyut özelliği ayarlanmadıysa, öğenin boyutu varsayılan olarak 60 x 60'tır. Aygıt için önerilen boyutla eşleşen bir simge yoksa, önerilen boyuttan daha büyük en küçük simge kullanılır. Önerilen boyuttan daha büyük simge yoksa en büyük simge kullanılır.
Bir bağlantı öğesi kullanılarak herhangi bir simge belirtilmezse, web sitesinin kök dizininde apple-touch-icon ... önekine sahip simgeler aranır. Örneğin, aygıt için uygun simge boyutu 60 x 60 ise, sistem aşağıdaki sırayla dosya adlarını arar:
apple-touch-icon-76x76.png
apple-touch-icon.png
Web sayfası simge ölçümleri için Simge ve Resim Boyutlarına bakın.
Not : iOS 7'deki Safari, simgelere efekt eklemez. Safari'nin eski sürümleri, -precomposed.png sonekiyle adlandırılan simge dosyalarına efekt eklemeyecektir. Ayrıntılar için İlk Adımlar: Uygulamanızı iTunes Connect'te Tanımlama konusuna bakın.
Hiç bir elma spesifikasyonunu okumadım, itiraf etmeliyim, ancak sitemdeki günlüklere göre, bu resimler kökte gerekli
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png
Çekme isteğimden https://github.com/h5bp/mobile-boilerplate'e (iPhone 6 simgeleriyle):
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!--
Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
<link>İstemcinin önbelleğinde değilse , her bir etiketteki tüm dosyalar indirildi mi? Sayfanın nerede istendiğine bakılmaksızın (telefon, tablet, pc, windows, android ...)? Performansın etkileri konusunda biraz endişeliyim ...