[HTML] Jak dodać favicony tak, aby działały na urządzeniach mobilnych?

Tworząc strony internetowe czy aplikacje internetowe warto pamiętać o tym aby utworzyć ich ikony, które będą wyświetlane na urządzeniach mobilnych gdy użytkownik przypnie sobie stronę jako ikonę w aplikacjach. Dzięki temu, Twoja strona czy aplikacja internetowa zyska dodatkową identyfikację wizualną.

Dodanie informacji o faviconach do kodu HTML

Założenie jest takie, że ikona strony internetowej/aplikacji internetowej ma się pojawiać na urządzeniach mobilnych opartych na systemach iOS, Android i Windows Phone w momencie gdy użytkownik będzie chciał sobie przypiąć odnośnik do strony na liście aplikacji lub do kafelka. Kod, który dodaje niestandardową ikonę wygląda następująco:

<!-- standardowa ikona strony/aplikacji do wyświetlenia w desktopowej przeglądarce -->
<link rel="shortcut icon" href="/favicon.ico" />
<!-- urządzenia z systemem iOS -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<!-- urządzenia z systemem Android -->
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-196x196.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160x160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- urządzenia ze starszym systemem Android -->
<link rel="apple-touch-icon-precomposed" sizes="114×114" href="/apple-touch-icon-114×114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72×72" href="/apple-touch-icon-72×72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="/touch-icon-iphone-precomposed.png" />
<!-- urządzenia z systemem Windows Phone -->
<meta name="msapplication-TileColor" content="#bb3300">
<meta name="msapplication-TileImage" content="/mstile-144-144.png">

Jak można zauważyć w powyższym kodzie zapewniliśmy wsparcie dla normalnej przeglądarki internetowej oraz urządzeń mobilnych opartych na systemach iOS, Android i Windows Phone. Ze względu na wspieranie szerokiej gamy tych urządzeń trzeba wcześniej przygotować ikony zapisane w formacie obrazka jako *.png lub *.ico oraz należy je przygotować w różnych rozmiarach, dzięki temu ikona zawsze będzie dobrze wyglądała niezależnie od urządzenia i jego ekranu.

Podsumowanie

Jedyne co może się nie podobać w powyższym kodzie to fakt, że wsparcie wielu różnych urządzeń wymaga tak wielu linijek dodatkowego kodu HTML definiującego favicony dla każdego z urządzeń. Warto dla pewności przetestować ikony na możliwie jak najszerszej palecie urządzeń aby być pewnym że ścieżki są poprawne i ikona dobrze wygląda na wybranych urządzeniach.