Jak poprawnie dodać do strony własną ikonę favicon dla przeglądarek oraz systemów iOS, Androida i Windows 8

turn on 2944067 1920 Jak poprawnie dodać do strony własną ikonę favicon dla przeglądarek oraz systemów iOS, Androida i Windows 8
4.6/5 - (9 votes)

Co to takiego favicon? Pewnie każdy już wie. To taka ikonka, która pojawia się na zakładce otwartej strony w przeglądarce lub na liście ulubionych stron. Nie wszyscy natomiast wiedzą, że najczęściej używany sposób ich dodawania do strony jest niepoprawny i nieoptymalny. Nowoczesne przeglądarki i systemy operacyjne iOS, Android czy Windows 8 szukają przy otwieraniu strony ikon, które są przez te systemy preferowane. Szukają ich w innym miejscu niż najczęściej stosowany favicon.ico i w różnych rozmiarach. Jeśli chcesz mieć pełną kontrolę nad ikonami swoich stron na urządzeniach mobilnych i w różnych przeglądarkach, to dobrze trafiłeś. W tym artykule wyjaśniamy wszystkie kwestie z tym związane.

Nie będziemy w tym artykule zajmować się tworzeniem plików graficznych *.ico i *.png. Do tworzenia plików favicon’ek dostępnych jest w sieci mnóstwo generatorów działających online. Najlepszy wg nas wskazany zostanie pod koniec artykułu. Jeśli posiadasz odpowiednie umiejętności, to pliki ICO i PNG możesz stworzyć za pomocą programu graficznego typu Gimp, Photoshop czy PaintShop Pro oraz edytorów ikon (np. IcoFX). Do edycji kodu HTML strony wykorzystamy oczywiście Pajączka 🙂 W artykule zajmiemy się przede wszystkim kwestiami technicznymi związanymi z tym:

  • jakie są wymagania poszczególnych systemów operacyjnych
  • jakie nadać nazwy plikom z ikonami oraz gdzie je umieścić
  • jak zmodyfikować kod strony www, aby systemy i przeglądarki odnajdywały pożądane obrazki

Jakie są wymagania przeglądarek i systemów operacyjnych iOS, Android i Windows 8 w kwestii favicon

Zakładki z favicon

Favicon kojarzy się z jednym tylko plikiem o nazwie favicon.ico (czasem favicon.png), który większość osób po prostu umieszcza w katalogu głównym serwisu WWW. Tam szukają go przeglądarki (np. MSIE) i niektóre systemy. Jednakże i ten plik może zawierać kilka różnych rozmiarów ikon, które są stosowane przez przeglądarki do wyświetlania w różnych miejscach. Niektórzy webmasterzy dodają też link do pliku ikony strony w sekcji HEAD za pomocą kodu, np.:

<link rel="shortcut icon" href="favicon.ico" />

Nie jest to do końca poprawne, gdyż po pierwsze nie jest zalecane przez W3C, a po drugie może w związku z tym powodować nieprzewidziane zachowanie przeglądarek. Rozwiązanie w dalszej części artykułu.

Mamy też dalsze złe wieści… Umieszczenie jednego pliku favicon.ico nie wystarczy, aby mieć kontrolę nad tym, jak prezentuje się skrót do strony wykonany np. na ekranie urządzenia przenośnego Apple czy smartfonie z Androidem, a nawet na kafelkach Windows 8. W praktyce konieczne jest stworzenie prawie tuzina obrazków i umieszczenie ich w swoim serwisie oraz dopisanie trochę większej liczby linii kodu do nagłówka swojej strony. Czego zatem spodziewają się poszczególne przeglądarki?

MSIE szuka favicon.ico. Z kolei inne przeglądarki oczekują raczej plików PNG w rozmiarze 16×16, ale też nie wszystkie, bo np. Safari na MacOS potrzebuje pliku 32×32, a Google TV 96×96. Chrome Android M31+ potrzebuje 196×196, a Windows 8 w zależności od wersji IE rozmiarów 70×70, 144×144, 150×150, 310×310 i 310×350. Czy w Microsoft przesadzili? Niekoniecznie, bo co potrzeba do kontroli wyglądu skrótów do własnych stron na systemach Apple? Więcej rozmiarów! Takich jak: 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152 oraz jeszcze dwóch plików domyślnych w tym jeden z nich nie powinien posiadać cienia lub połysku, lecz zaokrąglone narożniki…

Jakie nadać nazwy plikom z ikonami oraz gdzie je umieścić

Usystematyzujmy więc te informacje, aby w tym wszystkim nie zginąć. Po przygotowaniu plików w odpowiednich rozmiarach, należy nazwać je tak, aby łatwo rozpoznać ich zawartość i przeznaczenie, a także na dalszym etapie zastosować odpowiedni kod HTML do ich udostępnienia. W tym celu można użyć nazwy urządzenia oraz wymiarów obrazków, choć niektóre systemy mają ścisłe wymagania i szukają określonym plików bez analizowania kodu strony (np. MSIE czy Apple iOS w niektórych przypadkach). Oto przykłady:

favicon.ico
Ten plik jest używany przez starsze wersje MSIE, a także niektóre inne przeglądarki.

favicon-16×16.png
Wyświetlany na zakładkach w oknie różnych przeglądarek.

favicon-32×32.png
Wykorzystywany przez przeglądarkę Safari na systemie MacOS.

favicon-96×96.png
Używany przez Google TV.

favicon-196×196.png
Dla przeglądarki Android Chrome M31+.

mstile-70×70.png
Dla Windows 8 i MSIE 11.

mstile-144×144.png
Dla Windows 8 i MSIE 10.

mstile-150×150.png
Dla Windows 8 i MSIE 11.

mstile-310×310.png
Dla Windows 8 i MSIE 11.

mstile-310×150.png
Dla Windows 8 i MSIE 11.

apple-touch-icon-57×57.png
Użytkownicy iPhone i iPad mogą tworzyć skróty do strony na ekranach swoich urządzeń. Skrót taki wygląda jak każda inna aplikacja natywna w systemie. Kiedy użytkownik dodaje taki skrót, system poszukuje określonego obrazu, a rozmiar 57×57 pikseli jest typowym dla ekranów iPhone z iOE6 nieposiadających wyświetlaczy Retina lub wcześniejszych wersji.

apple-touch-icon-60×60.png
Jak wyżej, ale dla urządzeń iPhone iOS7 bez obsługi Retina.

apple-touch-icon-72×72.png
Jak wyżej, ale dla urządzeń iPad iOS6 bez obsługi Retina lub wcześniejszych.

apple-touch-icon-76×76.png
Jak wyżej, ale dla urządzeń iPad iOS7 bez obsługi Retina lub wcześniejszych.

apple-touch-icon-114×114.png
Jak wyżej, ale dla urządzeń iPhone iOS6 z ekranami Retina lub wcześniejszych.

apple-touch-icon-120×120.png
Jak wyżej, ale dla urządzeń iPhone iOS7 z ekranami Retina.

apple-touch-icon-144×144.png
Jak wyżej, ale dla urządzeń iPad iOS6 z ekranami Retina lub wcześniejszych.

apple-touch-icon-152×152.png
Jak wyżej, ale dla urządzeń iPad iOS7 z ekranami Retina.

apple-touch-icon.png
Domyślna ikona. Niektóre urządzenia mogą poszukiwać tego konkretnego pliku. Umieszczenie tego pliku w serwisie pozwala uniknąć niektórych błędó4 404.

apple-touch-icon-precomposed.png
Jak powyższy z tym wyjątkiem, że posiada zaokrąglone narożniki
Same as apple-touch-icon.png, expect that is already have rounded corners (ale bez cienia lub połysku).

Wszystkie pliki można umieścić w podkatalogu z obrazami, ale lepszym pomysłem jest umieszczenie ich na głównej ścieżce dostępu. Dlaczego? Jest kilka powodów. Przykładowo iOS poszukuje plików apple-touch-icon-144×144.png w katalogu głównym strony. Podobnie MSIE będzie szukał favicon.ico w katalogu głównym, gdy nie jest zdefiniowana wartość „shortcut link” w sekcji HEAD (co, jak wspomniano wyżej jest nie do końca poprawne). Dodatkowo MSIE 11 poszukuje w katalogu głównym pliku browserconfig.xml, gdzie znajduje się definicja ikon dla kafelek Windows 8.

jak zmodyfikować kod strony www, aby systemy i przeglądarki odnajdywały pożądane obrazki

Wiemy już, że nie jest zalecane umieszczanie w sekcji HEAD kodu tak często używanego przez wszystkich, który definiuje zasób o nazwie „shortcut icon”. Lepiej przygotować odpowiednie ikony dla każdej z przeglądarek i systemów osobno wg powyższego schematu nazewnictwa oraz rozmiarów i mieć pełną kontrolę nad tym, co jest wyświetlane dla stron czy webaplikacji, które się projektuje. Oprócz utworzenia, nazwania i umieszczenia plików w odpowiednim miejscu struktury katalogów, konieczna jest modyfikacja kody strony, a w szczególności dodanie kilku tagów do sekcji HEAD (nagłówka) plików. Podanie przykładowego kodu powinno wszystko wyjaśnić. Oto on:

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160" />
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.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" />

<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Pierwsza grupa dotyczy ikon domyślnych oraz ikon dla Androida, który wymaga wpisów w sekcji HEAD. Środkowa część to definicja ikon dla urządzeń Apple, a ostatnia określa kafelki dla Windows 8, czyli kolor tła kafelka oraz ikonę, która ma być na nim wyświetlana. Dodatkowo w katalogu głównym systemu można umieścić plik browserconfig.xml, z którego korzysta MS Internet Explorer 11 na systemach Windows 8, gdy poszukiwane są obrazy dla kafelek, co pozwoli uniknąć błędów 404 i zapewni kontrolę nad kafelkami własnych projektów w tym systemie. Plik taki może wyglądać następująco:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <TileColor>#da532c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Jak najszybciej utworzyć cały wymagany zestaw plików dla favicon?

Favicon Generator

Wprawa w obsłudze programu graficznego była by konieczna, gdyby nie ludzka inwencja, za sprawą której powstało narzędzie online, pozwalające na szybkie poradzenie sobie z problemem favicon, którym uraczyli nas twórcy przeglądarek i systemów operacyjnych. Polecamy odwiedzić stronę http://realfavicongenerator.net/. Trafiliśmy na to narzędzie poszukując informacji o wymaganiach iOS, dotyczących favicon, a efekty pracy tego programu działającego w przeglądarce, skłoniły nas do napisania tego artykułu i powiadomienia naszych czytelników o tym świetnym rozwiązaniu. Jedyne czego potrzeba do stworzenia kompletu wymaganych ikon, to jeden obraz o rozmiarze 260×260 px, najlepiej PNG z przezroczystością na kanale Alpha, co pozwoli na uzyskanie najlepszych efektów. Korzystanie z aplikacji jest bardzo proste. Wystarczy wgrać swój plik PNG, a w kolejnym kroku określić kilka parametrów dotyczących wyglądu ikonek dla iOS oraz Windows 8, a także preferowanej kompresji, algorytmu skalowania i to w zasadzie wszystko. W ostatnim kroku możemy pobrać zestaw pliku w formie paczki .zip oraz kod HTML do wstawienia na swoją stronę. Polecamy gorąco!

6 komentarzy

  1. Arek

    Rany, przeraża mnie kod htmla… Niby nic trudnego ale jednak ma coś takiego, że od razu ciary mi idą;)

  2. Żywy magik

    Dzięki za artykuł, pomógł mi bardzo:)

  3. Programowanie stron

    Dzięki. Przyda się tak konkretna rozpiska.
    Można się w tym pogubić.

  4. Olga33

    Możesz stworzyć swój favicon online i za darmo w onlinefavicon.com, stworzyć favicon z PNG, JPEG lub GIF do 16×16 lub 32×32 plików ICO, również można zobaczyć galerię z favicons utworzone przez innych użytkowników i pobierz to samo , Z narzędzia rysowania można stworzyć swój własny favicon. Na koniec można przeczytać opis jak skonfigurować favicon na stronie.

  5. Mike

    myślę, że brak stosowania tylu rozdzielczości ikony nie jest żadnym błędem negatywnie wpływającym na wyniki, a format .ico jest w pełni obsługiwany przez przeglądarki niezależnie od systemu – dodajmy, że jakieś 80% użytkowników pewnie i tak nie zwraca na to uwagi więc wszystko kwestią estetyki 😉

  6. AGEL-ELEKTRYKA

    Działa, dziękuję. 🙂

Skomentujesz?

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Administratorem Twoich danych osobowych będzie Rafał Płatek, prowadzący działalność gospodarczą pod firmą CREAM.SOFTWARE RAFAŁ PŁATEK, wpisaną do rejestru ewidencji gospodarczej CEiDG pod numerem NIP 681-112-89-55. Szczegóły związane z przetwarzaniem danych osobowych znajdziesz w polityce prywatności.