Apple Touchi ikoon määrab selgesõnaliselt pildi, mida kasutatakse siis, kui külastaja lisab sinu saidi iPhone'i avakuvale. See on eraldi nii brauseri vahekaardi faviconist kui ka veebirakenduse manifestis deklareeritud ikoonidest.
Ainult üks suurus: 180×180
180×180 pikslit kasutatakse tavaliselt suure eraldusvõimega lähtepildina. iOS saab seda väiksemate kuvamiskohtade jaoks vähendada, nii et enamikus projektides piisab ühest deklaratsioonist.
Vanemad soovitused loetlesid kaheksa faili mõõtmetest 57×57 kuni 152×152, igaühel oma sizes-atribuut. Neil variantidel pole enam otstarvet: need paisutavad HTML-i ja põhjustavad sama tulemuse saavutamiseks lisapäringuid.
Fail peab olema PNG. iOS ei loe selle ikooni jaoks SVG-d ega WebP-d ning JPEG rikub ühevärviliste kujundite teravad servad.
Eelista läbipaistmatut tausta
Läbipaistev taust võib versioonist ja kuvamiskohast olenevalt anda ootamatu tulemuse. Avakuva välimuse kontrollimiseks paku kujutist enda valitud läbipaistmatul taustal.
Lahendus on ühendada ikoon enne eksporti läbipaistmatu taustaga. Vali kaubamärgi värv või lihtsalt valge, kui sümbol on värvikas, ning jäta kujutise ümber umbes 10% veerist, et sellele jääks ruumi.
Ära siiski nurki ise ümarda: iOS rakendab oma ümardatud maski. Juba ümardatud fail annab topeltraadiuse ja inetud nurgad.
Lisatav silt
Piisab ühest reast lehtede head-osas: link rel="apple-touch-icon" href="/apple-touch-icon.png". Kui kasutad ühte faili, on sizes-atribuut valikuline.
Soovi korral lisa meta name="apple-mobile-web-app-title" content="Your brand", et määrata ikooni all kuvatav nimi. Selle sildita kasutab iOS lehe pealkirja, mis on tavaliselt liiga pikk ja lõigatakse lühemaks.
Paiguta faili koopia ka juurkausta nimega apple-touch-icon.png: nagu favicon.ico puhul, otsib iOS seda sildi puudumisel just sellest asukohast.
Miks ikoon ei taha uueneda
iOS hoiab ikooni püsivalt vahemälus ning juba avakuvale lisatud otsetee ise ei muutu. Uue versiooni katsetamiseks kustuta otsetee, tühjenda Safari andmed ja lisa sait uuesti.
Kui ikoon on endiselt puudu, kontrolli kolme asja: fail tagastab 200, mitte 404; selle sisutüüp on image/png; ning seda ei blokeeri robots.txt-reegel ega autentimine.
LFFaviconi kontrollija testib just neid olukordi iga avaliku URL-i puhul ja näitab ikooni, mille see tegelikult laadis.
Algallikad
Korduma kippuvad küsimused
Kas apple-touch-icon vajab mitut suurust?
Enamiku projektide puhul võimaldab üks suure eraldusvõimega 180×180 fail iOS-il luua väiksemaid kujutisi. Testi oma toetatavate seadmete loendisse kuuluvaid seadmeid.
Kas Android kasutab apple-touch-icon-ikooni?
Androidi Chrome võib seda varuvariandina kasutada, kuid loeb esmalt veebimanifesti ikoone. Deklareeri manifestis alati 192×192 ja 512×512 ikoonid: see on ametlik lahendus.
Kas Apple Touchi ikoonina saab kasutada SVG-d?
Ei, iOS ootab selle sildi jaoks rastervormingus PNG-d. Hoia SVG töölauabrauseri faviconi jaoks, kus see tagab teravuse ja tumeda režiimi toe.