Egyedi iPhone webclip ikon készítése

A napokban készítettem egy saját iPhone ikont a CIB internet bankjának mobil felületéhez, amivel kapcsolatban többen kérdezték, hogyan lehet azt ténylegesen ikonként beállítani. Íme.
Arról, hogy az iPhone és iPad ikonoknak milyen paraméterekkel és méretekkel kell rendelkezniük, nem írok, az Apple idevágó dokumentációja ugyanis tökéletes olvasmány a témában.
Miután elkészültünk az ikonnal, mentsük ki PNG formátumba és nevezzük el. A neve legyen
- apple-touch-icon.png, ha szeretnénk, hogy a telefon rátegye az iPhone ikonokra jellemző csillogós színátmenetet,
- apple-touch-icon-precomposed.png, ha nem szeretnénk ilyet.
A CIB ikon esetében ez utóbbi lesz a nyerő.
Következő lépésként töltsük fel valahová (például saját szerverre) az ikonfájlt. A CIB ikon esetében ez a lépés ugyebár elhanyagolható, használhatjuk a Dribbble szerverein lévőt.
Ezután mentsük el Drew McLellan könyvjelzőjét a böngészőnkbe. Ez lesz az, ami majd hozzárendeli az ikonunkat a kiszemelt weblaphoz. Amennyiben az ikonfájlunk a -precomposed végződést viseli, ügyeljünk arra, hogy a könyvjelzőt módosítanunk kell, s az apple-touch-icon szövegrészt annak minden előfordulásánál apple-touch-icon-precomposed-ra kell cserélnünk.
Ha ezzel megvagyunk, szinkronizáljuk rá a telefonunkra a könyvjelzőt, majd a kiszemelt weblapot meglátogatva nyissuk meg azt. Miután megadtuk neki az ikonunk webes elérhetőségét, mentsük el az oldalt a telefon képernyőjére, s élvezzük új ikonját.