Kako dodamo iPhone/iPad ikono naši spletni strani

Kako dodamo iPhone/iPad ikono naši spletni strani

Apple v  svojih napravah, kot so iPhone in iPad  za zagon aplikacij uporablja ikone. Uporabniki iPhonov in iPadov pa si lahko na namizje svojih naprav shranijo tudi povezave do svojih priljubljenih strani, ki se pojavijo v enaki obliki, kot ostale aplikacije, in sicer z ikono. Zaradi tega nam je Apple omogočil specificiranje slednje s pomočjo kode, ki jo umestimo v našo spletno stran.

Kako ustvarimo ikono

Ikono lahko ustvarite z različnimi grafičnimi programi oziroma vam najbližjim. Prednost takšnih ikon je to, da ni potrebno skrbeti za »glossy« preliv in zaobljene robove, saj nam slednje iOS doda avtomatsko.

Edina skrb, ki jo imate je velikost ikone. Apple je namreč poleg iPhona in iPada izdal še iPhone z večjo resolucijo zaslona – »retina display«. Zaradi tega imamo na volje naslednje tri velikosti:

  • iPhone 57 x 57 px (apple-touch-icon-57×57.png ),
  • iPad 72 x 72 px (apple-touch-icon-72×72.png) in
  • iPhone 4 114 x 114 px (apple-touch-icon-114×114.png).

Vse datoteke se morajo nahajati v root direktoriju vaše spletne strani oziroma moramo pot do njih specificirati v HTML kodi.

Specificiranje ikon v HTML datoteki

Ob uporabi svojih imen, različnih lokacijah datotek ali celo različnih ikon posameznih strani pa je potrebno uporabiti HTML kodo.

Primer kode za eno ikono

Če želimo samo eno ikono na celotni strani oziroma vseh straneh ne glede na resolucijo iOS naprave potrebujemo naslednjo kodo:

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

Primer kode za več ikon (različne resolucije)

Z nekaj dodatnih vrstic HTML kode pa lahko dosežemo tudi podporo različnim resolucijam iOS naprav.

<link rel="apple-touch-icon" href="ikona-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="ikona-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="ikona-iphone4.png" />

Če atribut »sizes« ni definiran bo uporabljena standardna velikost 57x57px. Če želite, da iOS ne doda svojih stilov na ikono/e pa je potrebno zamenjati »apple-touch-icon« z »apple-touch-icon-precomposed«.

Dodatne informacije o ikonah: