Jeśli zależy Wam, aby użytkownicy systemu iOS częściej wchodzili na Waszą stronę, warto zadbać o to, aby chcieli dodać ją do ekranu startowego. Warto stworzyć małą ikonkę, jaką można przypiąć do ekranu startowego w systemie. Stamtąd już tylko jedno dotknięcie palcem, a zostaje się przeniesionym do przeglądarki z ładującą się Waszą stroną WWW!

Aby ikonka była zgodna ze wszystkimi urządzeniami z iOS należy przygotować ją w rozmiarze dla każdego urządzenia osobno:

iPhone i iPod touch (z wyświetlaczem Retina)
wielkość ikony: 114px x 114px, nazwa pliku: “apple-icon-114×114.png”

iPhone i iPod touch (bez wyświetlacza Retina)
wielkość ikony: 57 x 57 nazwa pliku: “apple-icon-57×57.png”

iPad (z wyświetlaczem Retina)
wielkość ikony: 144px x 144px nazwa pliku: apple-icon-144×144.png

iPad (bez wyświetlacza Retina)
wielkość ikony: 72px x 72px nazwa pliku: apple-icon-72×72.png

Rozdzielczość to minimum 72 dpi. Gdy już taką przygotowujemy, umieszczamy ją w katalogu głównym naszej strony. Tam gdzie znajduje się plik index.php/html.

Ostatnim krokiem jest umieszczenie w sekcji <head> następującego kodu:

<link rel=”apple-touch-icon” sizes=”57×57″ href=”apple-icon-57×57.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”apple-icon-72×72.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”apple-icon-114×114.png” />
<link rel=”apple-touch-icon” sizes=”144×144″ href=”apple-icon-144×144.png” />

Po tej operacji, Waszą stronę, będzie można podpiąć do ekranu głównego. To jak to zrobić zaprezentowałem już w tej instrukcji.