Apple Touch piktograma aiškiai nurodo vaizdą, kuris naudojamas lankytojui pridėjus svetainę į iPhone pradžios ekraną. Ji atskirta nuo naršyklės kortelės piktogramos ir žiniatinklio programos manifeste nurodytų piktogramų.
Vienas dydis: 180×180
180×180 pikselių dažnai naudojamas kaip didelės raiškos šaltinis. iOS gali jį sumažinti mažesnėms rodymo vietoms, todėl daugumai projektų pakanka vienos deklaracijos.
Senesnės rekomendacijos išvardydavo aštuonis failus nuo 57×57 iki 152×152, kiekvieną su atskiru sizes atributu. Šios versijos nebereikalingos: jos išpučia HTML ir sukelia papildomas užklausas tam pačiam rezultatui gauti.
Failas turi būti PNG. Šiai piktogramai iOS neskaito nei SVG, nei WebP, o JPEG sugadina aiškius plokščios grafikos kraštus.
Rinkitės neskaidrų foną
Skaidrus fonas, priklausomai nuo versijos ir rodymo aplinkos, gali duoti netikėtą rezultatą. Norėdami valdyti išvaizdą pradžios ekrane, pateikite piešinį ant pasirinkto neskaidraus fono.
Prieš eksportuodami sujunkite piktogramą su neskaidriu fonu. Rinkitės prekės ženklo spalvą arba baltą, jei simbolis spalvingas, ir palikite maždaug 10 % paraštę aplink piešinį, kad jam netrūktų erdvės.
Tačiau kampų patys neapvalinkite: iOS pritaiko savo užapvalintą kaukę. Jau užapvalintas failas sukuria dvigubą spindulį ir negražius kampus.
Įklijuojama žyma
Pakanka vienos eilutės puslapių head dalyje: link rel="apple-touch-icon" href="/apple-touch-icon.png". Kai pateikiate vieną failą, sizes atributas neprivalomas.
Jei norite valdyti užrašą po piktograma, papildomai pridėkite meta name="apple-mobile-web-app-title" content="Jūsų prekės ženklas". Be šios žymos iOS naudoja puslapio pavadinimą, kuris paprastai būna per ilgas ir sutrumpinamas.
Taip pat įkelkite failo kopiją į šakninį katalogą kaip apple-touch-icon.png: kaip ir favicon.ico atveju, neradusi žymos iOS ieško jo būtent šiuo adresu.
Kodėl piktograma neatsinaujina
iOS labai aktyviai saugo piktogramą podėlyje, o pradžios ekrane jau esanti nuoroda pati nepasikeičia. Norėdami patikrinti naują versiją, ištrinkite nuorodą, išvalykite Safari duomenis ir vėl pridėkite svetainę.
Jei piktogramos vis dar nėra, patikrinkite tris dalykus: failas grąžina 200, o ne 404, pateikiamas su image/png turinio tipu ir nėra blokuojamas robots.txt taisykle ar autentifikavimu.
LFFavicon tikrintuvas būtent šiuos atvejus tikrina bet kuriame viešame URL ir parodo iš tikrųjų gautą piktogramą.
Pirminiai šaltiniai
Dažniausi klausimai
Ar reikia kelių apple-touch-icon dydžių?
Daugumai projektų pakanka vieno didelės raiškos 180×180 failo, iš kurio iOS sukuria mažesnes versijas. Patikrinkite savo palaikomų įrenginių sąrašą.
Ar Android naudoja apple-touch-icon?
Chrome sistemoje Android gali ją naudoti kaip atsarginę, tačiau pirmiausia skaito manifesto piktogramas. Visada manifeste nurodykite 192×192 ir 512×512 piktogramas – tai oficialus būdas.
Ar SVG galima naudoti kaip Apple Touch piktogramą?
Ne, šiai žymai iOS tikisi rastrinio PNG. SVG palikite kompiuterio naršyklės piktogramai, kur jis suteikia ryškumą ir tamsiojo režimo palaikymą.