Daj swojej stronie ikonę dla iUrządzeń
Ponieważ w dobie obecnej wiele osób przegląda strony www za pomocą swoich stron mobilnych, a dodatkowo najwięszky ruch generują urządzenia spod znaku jabłka, warto pamiętać o wyposażeniu swojej strony w unikalną ikonę, która będzie nas reprezentować na Springboardach użytkowników.
Oczywiście ikoną nie może być byle jaki plik graficzny. Musimy pamiętać o paru zasadach:
-
ikoną musi być plik png,
- dla najlepszej jakości ikona powinna być przygotowana w czterech rozmiarach:
- dla iPhone’a i iPoda z ekranem typu Retina – 114px
- dla iPhone’a i iPoda z ekranem zwykłym – 57px
- dla iPada z ekranem typu Retina – 144px
- dla iPada z ekranem zwykłym – 72px
-
domyślnie należy tworzyć ikony kwadratowe (iOS sam zaokrągla rogi)
-
należy również pamiętać, że iOS domyślnie dodaje efekt połysku i cienia do naszej ikony
-
jeśli chodzi o nazewnictwo, to przyjęło się, że każda ikona dla iUrządzeń nazywa się
apple-icon-i zawierać jej rozmiar, czyli:apple-icon-114x114px.png,apple-icon-57x57px.png, itd. -
ikony dodajemy na naszej stronie między znacznikami
<head>...</head>wg poniższego schematu:<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" />
Ikony precomposed
Jak już wcześniej napisałem, iOS domyślnie zaokrągla oraz dodaje efekty do naszych ikon. Istnieje jednak możliwość zablokowania tego zachowania. Należy wtedy przygotować ikony do postaci „ostatecznej”, a w znacznikach na nie wskazujących, jak atrybut rel należy użyć apple-touch-icon-precomposed. Całość dla poszczególnych ikon wyglądać będzie następująco:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-icon-144x144-precomposed.png" />
Dla czytelności do nazw ikon również można dodać nazwę precomposed.
Maciej Skrzypczak
Użytkownik sprzętu z nadgryzionym jabłkiem, grafik komputerowy, Redaktor iMagazine.pl. Mastodon: mcskrzypczak@c.im
Komentarze: 3
Takich samych ikon można użyć przy dodawaniu skrótów do kontaktów telefonicznych na springboard ;) Jak znajdę czas to może gdzieś to opiszę w następnym tygodniu.
A chętnie. :)
i chyba sie nie udalo opisac :)