Blog

Amit a touch ikonokról tudni érdemes

Előző bejegyzésben kiveséztük a favikonokban rejlő lehetőségeket és azok felhasználási módjait. Most az úgynevezett „touch icon”-okról lesz szó, amelyek kísértetiesen hasonlítanak a faviconhoz, mint alkalmazásukban, mint funkciójukban, annyi különbséggel, hogy ezeket az okostelefonok és táblagépek (iPod, iPad, iPhone, Android…) számára fejlesztették ki.


Alkalmazásuk nem nagy ördöngösség, csupán egy rövidke <link> tagre van szükség:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Az Apple iOS operációs rendszere az 1.1.3-as verzió óta, míg az Android rendszerek a 2.1-es verzió óta támogatják a touch ikonokat
Azoknál az oldalaknál, ahol nem definiálunk touch ikont, ott a weboldalról fog egy kis kép ikonként megjelenni.

Ikon effektek

Az iOS automatikusan ad néhány vizuális elemet az ikonokra, amikor azokat a Home screen-en elhelyezzük (hasonlóvá téve azt mint az alkalmazás ikonok). Ezek az alábbi effektek:

  • Lekerekített sarkok
  • Árnyék hatás
  • Tükröződő fény

Az iOS 2.0 óta támogatott ezen effektek kikapcsolása a precomposed kulcsszó hozzáadásával:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Mióta a rel attribútum támogatja a szóközzel elválasztott értékek megadását, azóta lehetőségünk van a régi IOS 1 számára is használható touch ikont megadni anélkül, hogy külön kellene azt definiálnunk:

<link rel="apple-touch-icon-precomposed apple-touch-icon" 
      href="apple-touch-icon-precomposed.png">

A gyakorlatban ez mégsem teljesen működő megoldás, mivel az iOS 4.2, és újabb verziók, ezt a deklarálási módot egyszerűen elvetik, így azok alatt már nem fog megjelenni az ikonunk. :-(

Tehát ajánlott a precomposed ikonok használata. Ezeket saját elképzelésünk szerint designolhatjuk, illetve ez az Android 2.1-től is támogatott deklaráció.

Különböző méretek

Mint a favikonok esetében, itt is több méretben lehet alkalmazni a touch ikonokat:

  • 114×114 pixel a nagy felbontású ‘Retina’ kijelzők számára
  • 72×72 pixel az iPad-ek számára
  • 57×57 pixel minden egyéb eszközhöz

Természetesen készíthetünk egy, nagy felbontású ikont minden eszköz számára. Még maga az Apple is ezt a módszert választotta weboldalához. Azok az eszközök, amelyek kis képernyővel, vagy kis felbontással rendelkeznek, automatikusan átméretezik a nagyobb ikont. Különböző méreteket igazából csak a letöltési idő mérséklésére ajánlatos használni, amely javítja a felhasználási élményt és kedvezően hat a mobilnetesek számára is.

Szerencsére az iOS 4.2 óta lehetőség van több méretben ikonokat rendelnünk az egyes eszközökhöz:

<!-- non-Retina iPhone, iPod Touch, és Android 2.1+ eszközökhöz: -->
<link rel="apple-touch-icon-precomposed" 
      href="apple-touch-icon-precomposed.png">

<!-- Első generácíós iPad-ekhez: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" 
      href="apple-touch-icon-72x72-precomposed.png">

<!-- iPhone 4 nagy felbontású kijelzőjéhez: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" 
      href="apple-touch-icon-114x114-precomposed.png">

Erre a megoldásra a következő szabályok érvényesek:

  • Ha az ajánlott méretnél nincs nagyobb ikon, akkor az elérhető legnagyobb méretű fog megjelenni.
  • Mindig a precomposed kulcsszóval ellátott ikont fogja használni az adott rendszer.

Viszont ez sem olyan egyszerű, mint amilyennek tűnik! A 4.2-es előtti iOS verziók még nem támogatják a sizes attribútumot. E verzió előtti eszközökön csak az alábbi kódok fognak működni:

<link rel="apple-touch-icon-precomposed" 
      href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" 
      href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" 
      href="apple-touch-icon-114x114-precomposed.png">

Ebben a megoldásban a gond csak annyi, hogy a legutoljára definiált ikont fogja letölteni a készülék és csak azt fogja használni. Ennek elkerülése végett, meg kell fordítanunk a listát az alábbi módon:

<!-- iPhone 4 nagy felbontású kijelzőjéhez: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" 
      href="apple-touch-icon-114x114-precomposed.png">

<!-- Első generácíós iPad-ekhez: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" 
      href="apple-touch-icon-72x72-precomposed.png">

<!-- non-Retina iPhone, iPod Touch, és Android 2.1+ eszközökhöz: -->
<link rel="apple-touch-icon-precomposed" 
      href="apple-touch-icon-precomposed.png">

Így már a régi iOS verziók a legkisebb ikont fogják letölteni a nagyobbak helyett, az újabb rendszerek pedig a maguknak megfelelő nagyobb ikonok egyikét fogják használni.

Akár HTML nélkül is

Ha nem akarunk ikonokat definiálni a weboldalunk fejlécében, akkor egyszerűen elhelyezhetjük azokat a gyökér könyvtárban is. Az iOS ugyanis ebben az esetben elkezd apple-touch-icon, vagy apple-touch-icon-precomposed előtagú fájlneveket keresni ott. Ekkor, szintén a fájlnévből megkapva, a megfelelő méretet tudja alkalmazni mint touch ikon:

  1. apple-touch-icon-57×57-precomposed.png
  2. apple-touch-icon-57×57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

Szóval, milyen fájlok is kellenek nekünk?

  • apple-touch-icon-57×57-precomposed.png, vagy apple-touch-icon-57×57.png a non-Retina iPhone és iPod Touch-hoz.
  • apple-touch-icon-72×72-precomposed.png, vagy apple-touch-icon-72×72.png az első generációs iPad-hez.
  • apple-touch-icon-114×114-precomposed.png, vagy apple-touch-icon-114×114.png az iPhone 4-hez.
  • apple-touch-icon-precomposed.png és apple-touch-icon.png a régi iOS-ekhez illetve egyéb eszközökhöz.

Tehát a legjobb ha készítünk egy apple-touch-icon.png, illetve apple-touch-icon-precomposed.png fájlt is a teljes kompatibilitás érdekében. Mivel az iOS 1 és a BlackBerry OS 6 nem támogatja a precomposed ikonokat, az Android 2.1 viszont csak azokat támogatja!
 

A szomorú igazság az, hogy az Android a jelenlegi verzióban (2.3), még nem támogatja a HTML nélküli ikon alkalmazást. Abban biztos vagyok, hogy egy későbbi kiadásban ez is orvoslása kerül, addig viszont, hogy ezt a rendszer is célba vegyük, szükséges HTML kódot is alkalmaznunk.

Összefoglalva

Tehát, melyik eljárást jobb alkalmazni? Az attól függ…

  • Ha fontos az Androidos rendszerek támogatása is, akkor mindenképp a HTML-ben való megvalósítást kell alkalmaznunk.
  • Ha mindenképpen csak az iOS rendszereket szeretnénk favorizálni, akkor tökéletes a HTML mentes megoldás.
  • Ha nem igazán fontosak a különböző méretek, illetve operációs rendszerek sajátosságai, akkor elegendő egy 114×144 pixel méretű, apple-touch-icon-precomposed.png névre keresztelt fájl a gyökér könyvtárban.

Én mindenképpen a HTML-re alapuló megoldást javaslom, mivel ezzel szinte minden rendszeren látható lesz az ikonunk.

Szóljon hozzá!

Új generációs játékok