Apple Ghid pentru pictograme atingeți

apple-touch-icon este un material complet separat de favicon.ico. Filele browserului folosesc favicon.ico (sau PNG/SVG conectat). Instalările pe ecranul de pornire iOS folosesc apple-touch-icon. Fără un apple-touch-icon, Safari face o captură de ecran cu rezoluție joasă a feței de vizualizare a paginii dvs. și o folosește ca pictogramă pe ecranul de pornire - un rezultat neclar, fără marcă, care pare neprofesional lângă aplicațiile native.

Apple a introdus apple-touch-icon în iOS 1.1.3 în 2007 și de atunci a evoluat dimensiunile acceptate pe măsură ce densitățile ecranelor iPhone și iPad au crescut. Recomandarea actuală pentru un singur fișier pentru toate dispozitivele este de 180×180 pixeli. Această dimensiune este afișată la o densitate de 60 pt @ 3x pe iPhone 6 Plus, iPhone X și toate modelele de iPhone ulterioare. Modelele mai vechi (iPhone SE prima generație, iPhone-uri pre-Plus) utilizează 120×120 la 2x — iOS reduce automat fișierul de 180×180 pentru a se potrivi.

Pentru acoperirea iPad, Apple recomandă 167×167 pentru iPad Pro (3x) și 152×152 pentru iPad-uri standard. În practică, un singur fișier de 180×180 servit ca apple-touch-icon acoperă toate aceste cazuri în mod acceptabil, deoarece iOS reduce la scară cu filtrare biliniară de înaltă calitate. Dacă claritatea perfectă a pixelilor pe iPad Pro este o prioritate, adăugați o etichetă suplimentară `<link rel='apple-touch-icon' sizes='167x167' href='/apple-touch-icon-167x167.png'>`.

Formatul PNG este obligatoriu pentru apple-touch-icon. iOS ignoră .ico, JPEG, SVG și GIF pentru pictogramele de pe ecranul de pornire. Exportați întotdeauna un PNG-32 (cu canal alfa) sau un PNG-24 (fără transparență, dacă pictograma dvs. are un fundal solid). Transparența este acceptată și recomandată — o pictogramă cu fundal transparent îi permite lui iOS să aplice efectele standard de colț rotunjit și luciu pe versiunile mai vechi iOS.

Marjele sigure contează pentru apple-touch-icon. Deși iOS nu mai aplică vechea suprapunere lucioasă (eliminată în iOS 7), decupează pictograma într-o formă dreptunghiulară rotunjită. Păstrați-vă logo-ul de bază cu aproximativ 10% pe toate părțile pentru a vă asigura că nimic important nu este tăiat de colțurile rotunjite. Zona sigură este de aproximativ 162×162 pixeli într-o pânză de 180×180.

Plasarea fișierului apple-touch-icon la rădăcina domeniului dvs. este importantă. Deși puteți utiliza orice adresă URL prin intermediul etichetei de link href, unele versiuni ale iOS Safari și unele crawler-uri Apple (pentru integrarea motorului de căutare Spotlight) vor încerca să preia /apple-touch-icon.png sau /apple-touch-icon-precomposed.png direct de la rădăcină fără a citi eticheta de link HTML. Plasarea fișierului la rădăcină oferă cea mai bună compatibilitate.

Varianta `precomposed` a etichetei — `<link rel='apple-touch-icon-precomposed'>` — le spune versiunilor mai vechi iOS să nu aplice niciun efect vizual suplimentar (luciu, colțuri rotunjite, umbră) pictogramei dvs. Apple a eliminat aceste efecte în iOS 7, așa că în 2026 distincția dintre `apple-touch-icon` și `apple-touch-icon-precompus` este irelevantă pentru iOS modern. Utilizați valoarea rel simplă `apple-touch-icon`.

Declarațiile de dimensiuni multiple sunt acceptate folosind mai multe etichete de link. Pentru precizie maximă pe toate dispozitivele Apple, puteți declara: `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon-180x180.png'>` pentru iPhone 6 Plus și versiuni ulterioare, `<link rel='apple-touch-icon' sizes='167'167x href='/apple-touch-icon-167x167.png'>` pentru iPad Pro și `<link rel='apple-touch-icon' sizes='152x152' href='/apple-touch-icon-152x152.png'>` pentru iPad-uri mai vechi. iOS alege cea mai apropiată potrivire.

Apple Watch nu folosește apple-touch-icon pentru pictogramele aplicațiilor pentru ceasuri – acestea provin din pachetul de aplicații nativ. Cu toate acestea, dacă un utilizator navighează la site-ul dvs. din browserul Apple Watch, Safari Watch afișează apple-touch-icon în lista de marcaje. Același 180×180 PNG funcționează aici fără nicio modificare.

macOS Safari pe Mac utilizează, de asemenea, apple-touch-icon atunci când adăugați un site web la Dock ca aplicație web (macOS Sonoma și mai târziu permite fixarea site-urilor web ca aplicații web de la Safari). apple-touch-icon este folosit ca pictogramă Dock. Acest lucru face ca apple-touch-icon să fie important nu doar pentru mobil, ci și pentru utilizatorii de Mac pe macOS modern.

Când actualizează apple-touch-icon, iOS memorează în cache pictograma veche de pe dispozitivul utilizatorului și nu verifică actualizări decât dacă utilizatorul elimină pictograma de pe ecranul de pornire și o adaugă din nou sau șterge memoria cache a lui Safari. Nu există niciun control la nivel de server asupra acestui cache - este un comportament iOS de partea clientului. Comunicarea acestui lucru către părțile interesate ajută la stabilirea așteptărilor cu privire la cât de repede se propagă o rebrand la salvările existente pe ecranul de pornire.

Testarea corectă a apple-touch-icon necesită un dispozitiv fizic iOS sau un simulator Xcode iOS. Pe dispozitiv, deschideți Safari, navigați la site-ul dvs., atingeți butonul Partajare și selectați „Adăugați la ecranul de pornire”. Previzualizarea din caseta de dialog ar trebui să arate apple-touch-icon-ul dvs. Dacă afișează o captură de ecran, fie fișierul nu este accesibil la adresa URL declarată, fie eticheta de link lipsește din HTML.

favicon generator scoate 180×180 apple-touch-icon.png ca parte a pachetului standard de favicon. După generare, plasați fișierul la rădăcina site-ului dvs. și adăugați eticheta de link la HTML `<head>`. Pentru un ghid complet al tuturor dimensiunilor pictogramelor care merg alături de apple-touch-icon, consultați referința favicon sizes explained.