Własne ikony strony WWW dla iOS

System iOS daje użytkownikowi możliwość zapisania łącza do strony internetowej w formie ikonki na ekranie początkowym. Standardowo ikona generowana jest jak podgląd witryny. Możemy jednak w sekcji <head> dokumentu odwołać się do własnych ikon, dzięki czemu zapisywane łącze będzie reprezentowane przez np. logo naszej marki.

Rozmiary ikon

Jak wiemy urządzenia z iOS mają różne rozmiary ekranów. Aby nasza ikona wyglądała jak najlepiej na każdym urządzeniu, musimy przygotować 4 sztuki dla każdej rozdzielczości.

  • iPhone i iPod touch (z wyświetlaczem Retina)
    wielkość ikony: 114px x 114px
  • iPhone i iPod touch (bez wyświetlacza Retina)
    wielkość ikony: 57 x 57
  • iPad (z wyświetlaczem Retina)
    wielkość ikony: 144px x 144px
  • iPad (bez wyświetlacza Retina)
    wielkość ikony: 72px x 72px

System iOS sam rozpozna której ikony użyć na danym urządzeniu.

Projektowanie ikony

Aby zaprojektować ikonę zgodną z iOS 7 polecam użyć szablonu przygotowanego przez Andrew (www.andexdesign.com). Szablon dostępny do ściągnięcia w formacie Adobe Illustrator -> iOS 7 app icons template

Podpinanie ikon do strony

Aby podlinkować ikony na stronie, w sekcji <head> należy dodać następujące linijki kodu:

<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />

Źródło wpisu: WebdesignTuts