Az Apple Touch ikon kifejezetten azt a képet adja meg, amelyet az iPhone kezdőképernyőjéhez hozzáadott webhely használ. Ez különbözik a böngészőfül faviconjától és a webalkalmazás-jegyzékben megadott ikonoktól.
Egyetlen méret: 180×180
A 180×180 képpontos kép elterjedt nagy felbontású forrás. Az iOS lekicsinyítheti a kisebb megjelenítésekhez, így a legtöbb projektben egyetlen deklaráció megtartható.
A régi ajánlások nyolc fájlt soroltak fel 57×57-től 152×152-ig, mindegyiket saját sizes attribútummal. Ezeknek a változatoknak már nincs haszna: azonos eredmény mellett növelik a HTML-t és újabb kéréseket indítanak.
A fájl PNG legyen. Az iOS ennél az ikonnál sem SVG-t, sem WebP-t nem olvas, a JPEG pedig rontja a sík grafikák éles széleit.
Válassz nem átlátszó hátteret
Az átlátszó háttér a rendszerverziótól és a megjelenítés helyétől függően váratlan eredményt adhat. A kezdőképernyő megjelenésének kézben tartásához tedd a grafikát általad választott, nem átlátszó háttérre.
Exportálás előtt olvaszd össze az ikont a fedő háttérrel. Válassz márkaszínt vagy színes jelképhez egyszerű fehéret, és hagyj körülbelül 10% térközt a grafika körül, hogy legyen helye érvényesülni.
A sarkokat viszont ne kerekítsd le: az iOS saját lekerekített maszkot alkalmaz. Az eleve lekerekített fájl kettős lekerekítést és csúnya sarkokat eredményez.
A beillesztendő címke
Egyetlen sor elég az oldalak head részében: link rel="apple-touch-icon" href="/apple-touch-icon.png". Egyetlen fájl esetén a sizes attribútum elhagyható.
Az ikon alatti feliratot opcionálisan a meta name="apple-mobile-web-app-title" content="Your brand" elemmel szabályozhatod. Enélkül az iOS az oldal címét használja, amely általában túl hosszú, ezért csonkolódik.
A fájl másolatát apple-touch-icon.png néven tedd a gyökérkönyvtárba is: a favicon.ico fájlhoz hasonlóan az iOS itt keresi, ha nincs megadva címke.
Miért nem frissül az ikon?
Az iOS erősen gyorsítótárazza az ikont, a már kihelyezett kezdőképernyős parancsikon pedig magától nem változik. Új változat teszteléséhez töröld a parancsikont, ürítsd a Safari adatait, majd add hozzá újra a webhelyet.
Ha az ikon továbbra is hiányzik, három dolgot ellenőrizz: a fájl 200-as, ne 404-es választ adjon, image/png tartalomtípussal érkezzen, és ne tiltsa robots.txt-szabály vagy hitelesítés.
Az LFFavicon ellenőrzője pontosan ezeket vizsgálja bármely nyilvános URL-en, és megmutatja a ténylegesen letöltött ikont.
Elsődleges források
Gyakori kérdések
Több apple-touch-icon méretre van szükség?
A legtöbb projektnél egyetlen nagy felbontású 180×180-as fájlból az iOS elkészíti a kisebb változatokat. Teszteld a támogatott eszközeidet.
Az Android használja az apple-touch-icon ikont?
Az androidos Chrome tartalékként használhatja, de először a webes jegyzék ikonjait olvassa. Mindig add meg a 192×192-es és 512×512-es ikonokat a jegyzékben: ez a hivatalos út.
Használható SVG Apple Touch ikonként?
Nem, ennél a címkénél az iOS raszteres PNG-t vár. Az SVG maradjon az asztali böngésző faviconja, ahol éles megjelenítést és sötétmód-támogatást nyújt.