Wujek Google często radzi w odniesieniu do naszych stron internetowych:
Grafikami najłatwiej zachęcisz czytelnika do lektury.
Na podstawie własnych prób przedstawiam Wam na łamach AppleCenter łatwy sposób do udoskonalenia swojej strony. Mówię tu o Apple Touch Icon, czyli nic innego jak niestandardowej ikonce strony, gdy postanowimy takową „przypiąć” na SpringBoard.
Wstyd się przyznać, mimo, że na co dzień używam Maca, to wygodniej mi to wykonać na Windowsie. Trochę przyzwyczajenie a na poza tym systemowy TextEdit nie posiada podobnej funkcję co program Notepad++, którego używam na Windowsie w celu edycji kodu.
Kod ten jest krótki i łatwo go umieścić na stronie. Wygląda on następująco:
<link rel="apple-touch-icon" sizes="114x114" href="LINK_DO_GRAFIKI_NA_SERWERZE" />
Jednak ten kod należy powtórzyć trzy razy, zmieniając parametr sizes na 57×57 i 72×72, bo:
- 57×57 – ikona na iPhone i iPod touch bez ekranu retina
- 72×72 – dla iPadów bez ekranu retina
- 144×144 – dla iPhone’ów, iPodów Touch i iPadów z ekranem retina
UWAGA! Zanim przystąpisz do działania, zalecam wykonanie kopii zapasowej plików, które zamierzasz modyfikować.
Na silniku WordPress wpis wystarczy umieścić go w pliku wp-blog-header.php za zamknięciem wyższego kodu strony (prościej: umieść go po nawiasie klamrowym):
Plik należy zapisać i wysłać z powrotem na serwer. Podobnie postępujemy w innych silnikach opartych na języku PHP – kod wklejamy do pliku header.php. Co ciekawe, sposób działa również w języku HTML. Wystarczy że wkleimy wyżej pokazany kod w pliku index.html za znacznikiem </html>.
Efektem tej modyfikacji kodu strony jest to, że nasze iUrządzenie zamiast zrzutu strony pokaże grafikę zawartą we wcześniej modyfikowanym kodzie. Co ciekawe, podobnie działa to na urządzeniach z Androidem.
Dodatkowo warto dodać, że aby ikona wyświetlała się w ekranie ulubionych wirtyn w Safari na Mac lub iOS, należy zmodyfikować plik favicon.ico przykładowo nadając mu większą rozdzielczość (144×144 co najmniej).
