[HTML] Jak dodać favicony tak, aby działały na urządzeniach mobilnych?
This post is 12 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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ą.
Section 1Dodanie 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!-- 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.
Section 2Podsumowanie
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.
About the author
