Favicon
Favicon (ang. favorites icon, ikona ulubionych, ikona witryny) – ikona, która pojawia się przed adresem w polu adresowym przeglądarki internetowej lub na karcie z otwartą stroną www. Ikona ta ma postać obrazka, według pierwotnych propozycji bitmapy ICO lub PNG w wymiarach 16×16 lub 32×32 pikseli[1], w późniejszym czasie przy braku zgodnej standaryzacji autorzy części przeglądarek samorzutnie wprowadzili obsługę innych wymiarów (np. bitmap 180×180 dla iOS[2]) i formatów (np. SVG[3]).
Przeglądarki wyświetlają ikonę favicon:
- zdefiniowaną w kodzie HTML znacznikiem „link”, np.
<link rel="icon" type="image/png" href="icon.png">
lub
<link rel="shortcut icon" href="icon.ico">
lub z użyciem data URI w postaci reprezentacji Base64:
<link href="data:image/x-icon;base64,AAABAAEAE.....qqAABVVQAA" rel="icon" type="image/x-icon">
- umieszczoną w głównym katalogu, w którym znajduje się strona internetowa, bez potrzeby definiowania adresu favicon w kodzie strony, np.
Obie metody (czyli definiowanie adresu favicon w kodzie oraz umieszczanie pliku favicon.ico w katalogu głównym) mogą być stosowane równocześnie.
Niektóre przeglądarki wyświetlają ikonę na pasku adresu tylko wtedy, gdy strona została dodana do folderu Ulubione/Łącza/Zakładki (np. Internet Explorer 6). Inne jak Safari nie wyświetlają obrazków favicon wcale.
Favicony można także animować, zmieniając je dynamicznie poprzez JavaScript[4], niektóre przeglądarki obsługują także format animacji GIF[5].
Projektowanie[edytuj | edytuj kod]
Ikona witryny może zostać zaprojektowana w dowolnym programie graficznym obsługującym formaty plików takie jak JPG, PNG, czy ICO[6]. Najpopularniejszym rozmiarem wyświetlanym w przeglądarkach jest 16x16px, jednak z uwagi na różnorodność miejsc, w której może ukazać się ikona, warto przygotować ją w większym rozmiarze, np. 512 pikseli na 512 pikseli. Rozmiar ikony musi być wielokrotnością kwadratu, przyjmując wartości takie jak 48x48 pikseli, 96x96 pikseli, 144x144 pikseli itd., co zapewnia jej poprawne wyświetlanie na różnych urządzeniach i w różnych kontekstach. Pliki SVG, ze względu na swoją skalowalność, nie podlegają ograniczeniom rozmiarowym. Wspierane są wszystkie poprawne formaty graficzne ikony, co pozwala na elastyczność w jej projektowaniu.
Przy tworzeniu favicon można ponadto wykorzystać popularne generatory, które automatycznie przygotują ikonę na podstawie projektu wykonanego przez użytkownika.
Wyświetlanie[edytuj | edytuj kod]
Pierwotnie ikona witryny wyświetlana była najczęściej na otwartej karcie w przeglądarce internetowej oraz obok paska do wpisywania adresu URL. Z czasem jednak favicon zaczęła pojawiać się również w innych miejscach, np. w widoku startowym przeglądarki - na liście ulubionych strono odwiedzanych przez użytkownika. Dodatkowo grafika widnieje też często obok wyniku wyszukiwania w popularnych wyszukiwarkach internetowych, takich jak Google[7].
W tej kwestii w dokumentacji Google znajdziemy szereg wytycznych odnośnie wyświetlania i pobierania favicon przez roboty indeksujące. Favicon musi być dostępna dla robota Googlebot-Image, podczas gdy strona główna witryny powinna być dostępna dla Googlebota. Jest to niezbędne, aby umożliwić indeksowanie tych elementów przez wyszukiwarkę Google.
Istotne jest także, aby favicon posiadała stały adres URL, co oznacza unikanie częstych zmian lokalizacji pliku, co mogłoby wpłynąć na jej indeksowanie przez wyszukiwarkę. Google zastrzega sobie prawo do niewyświetlania ikon, które uznaje za nieodpowiednie. W takich przypadkach, Google może zastąpić nieodpowiednią ikonę domyślną grafiką.[8]
Zobacz też[edytuj | edytuj kod]
Przypisy[edytuj | edytuj kod]
- ↑ How to Add a Favicon to your Site - QA @ W3C [online], www.w3.org [dostęp 2019-06-23] (ang.).
- ↑ Configuring Web Applications [online], developer.apple.com [dostęp 2019-06-23].
- ↑ Can I use... Support tables for HTML5, CSS3, etc [online], caniuse.com [dostęp 2019-06-23].
- ↑ Vanilla JavaScript library for loading animation in favicon (favicon loader). GitHub.
- ↑ Favicon - MDN Web Docs Glossary: Definitions of Web-related terms. developer.mozilla.org. [dostęp 2021-09-27]. (ang.).
- ↑ HTML Favicon [online], www.w3schools.com [dostęp 2024-02-28] (ang.).
- ↑ Dominik Krawiec, Jak ustawić ikonę witryny (favicon) w WordPress? [online], WooCado, 15 lutego 2024 [dostęp 2024-02-28] (pol.).
- ↑ Definiowanie favikony strony internetowej na potrzeby wyników wyszukiwania | Centrum wyszukiwarki Google | Documentation [online], Google for Developers [dostęp 2024-02-28].