Apple Touch -kuvake määrittää kuvan, jota käytetään, kun kävijä lisää sivustosi iPhonen aloitusnäytölle. Se on erillinen välilehden faviconista ja verkkomanifestissa määritetyistä kuvakkeista.
Yksi koko: 180×180
180×180 pikseliä on yleisesti käytetty tarkka lähdekoko. iOS osaa pienentää kuvan pienempiin näyttöpaikkoihin, joten useimmissa projekteissa riittää yksi määritys.
Vanhoissa suosituksissa oli kahdeksan tiedostoa koosta 57×57 kokoon 152×152, jokaiselle oma sizes-määritys. Näitä versioita ei enää tarvita: ne kasvattavat HTML:ää ja aiheuttavat lisäpyyntöjä tuottamatta erilaista tulosta.
Tiedoston on oltava PNG. iOS ei käytä tähän kuvakkeeseen SVG:tä tai WebP:tä, ja JPEG heikentää tasaisten väripintojen tarkkuutta.
Suosi peittävää taustaa
Läpinäkyvä tausta voi tuottaa odottamattoman tuloksen versiosta ja näyttötilanteesta riippuen. Kun haluat hallita aloitusnäytön kuvakkeen ulkoasua, käytä valitsemaasi peittävää taustaa.
Yhdistä kuvake peittävään taustaan ennen vientiä. Valitse brändiväri tai puhdas valkoinen, jos symboli on värikäs, ja jätä noin 10 % marginaalia piirroksen ympärille.
Kulmia ei tarvitse pyöristää itse: iOS lisää oman pyöristetyn maskinsa. Valmiiksi pyöristetty tiedosto tuottaa kaksinkertaisen pyöristyksen ja rumat kulmat.
Liitettävä tunniste
Yksi rivi sivujesi head-osassa riittää: link rel="apple-touch-icon" href="/apple-touch-icon.png". sizes-attribuutti on valinnainen, kun tarjoat vain yhden tiedoston.
Voit lisätä myös meta name="apple-mobile-web-app-title" content="Votre marque" hallitaksesi kuvakkeen alla näkyvää nimeä. Ilman tätä tunnistetta iOS käyttää sivun otsikkoa, joka on usein liian pitkä ja katkeaa.
Sijoita tiedostosta kopio myös juureen nimellä apple-touch-icon.png: favicon.ico-tiedoston tavoin iOS etsii sitä tästä osoitteesta, jos tunnistetta ei löydy.
Miksi kuvake ei päivity?
iOS välimuistittaa kuvakkeen tiukasti, eikä aloitusnäytölle lisätty pikakuvake muutu itsestään. Testaa uusi versio poistamalla pikakuvake, tyhjentämällä Safarin tiedot ja lisäämällä sivusto uudelleen.
Jos kuvake puuttuu yhä, tarkista kolme asiaa: tiedosto palauttaa tilan 200 eikä 404, sen tyyppi on image/png, eikä robots.txt-sääntö tai kirjautumisvaatimus estä sitä.
LFFaviconin favicon-tarkistin testaa nämä tilanteet mistä tahansa julkisesta URL-osoitteesta ja näyttää todella haetun kuvakkeen.
Alkuperäislähteet
Usein kysytyt kysymykset
Tarvitaanko Apple Touch -kuvakkeesta useita kokoja?
Useimmissa projekteissa tarkka 180×180-tiedosto riittää, ja iOS luo siitä pienemmät versiot. Testaa tukemiisi ympäristöihin kuuluvilla laitteilla.
Käyttääkö Android apple-touch-icon-kuvaketta?
Androidin Chrome voi käyttää sitä viimeisenä vaihtoehtona, mutta lukee ensin verkkomanifestin kuvakkeet. Määritä aina 192×192- ja 512×512-kuvakkeet manifestissa, sillä se on virallinen tapa.
Voiko Apple Touch -kuvake olla SVG?
Ei, iOS odottaa tämän tunnisteen yhteydessä rasterimuotoista PNG:tä. Käytä SVG:tä työpöytäselainten faviconina, jossa se tuo tarkkuutta ja tumman tilan tuen.