Favicon (z ang. „favorite icon”) to mała ikona graficzna, która reprezentuje stronę internetową lub aplikację w przeglądarce i jest widoczna na pasku zakładek, w kartach przeglądarki oraz w historii przeglądania. Zazwyczaj favicony mają rozmiar 16×16 lub 32×32 pikseli i są jednym z ważnych elementów wizualnych identyfikujących stronę. Dzięki nim użytkownicy mogą łatwo odnaleźć stronę wśród wielu otwartych kart lub w zakładkach przeglądarki.
Gdzie pojawia się favicon?
Favicon wyświetla się w kilku miejscach, m.in.:
- Na pasku kart przeglądarki – pomaga szybko zidentyfikować otwartą stronę po samej ikonie, co jest szczególnie przydatne przy dużej liczbie kart.
- Na pasku zakładek – gdy użytkownik dodaje stronę do zakładek, favicon jest wyświetlany obok jej nazwy, ułatwiając późniejsze znalezienie zapisanej strony.
- W historii przeglądania – favicon jest wyświetlany obok nazwy odwiedzanej strony w historii przeglądarki.
- Na ekranach urządzeń mobilnych – favicon pojawia się jako ikona skrótu, gdy użytkownik dodaje stronę do ekranu głównego telefonu lub tabletu.
Jak stworzyć favicon?
Favicon to zwykle kwadratowy obrazek o formacie ICO, PNG, SVG lub JPG, którego wymiary wynoszą 16×16, 32×32 lub 48×48 pikseli. Aby stworzyć favicon, należy zaprojektować ikonę, która będzie prostym, rozpoznawalnym symbolem marki, takim jak logo lub charakterystyczna litera.
Kroki tworzenia favicon:
- Wybierz obrazek – najlepsze favicony są proste, ale jednocześnie unikalne. Najczęściej wykorzystuje się logo marki lub symbol charakterystyczny dla strony.
- Dostosuj rozmiar – dostosuj obraz do rozmiaru 16×16, 32×32 lub 48×48 pikseli, aby był dobrze widoczny w przeglądarce.
- Wybierz format – najczęściej stosowane formaty favicon to ICO (klasyczny format favicona) oraz nowoczesne formaty PNG, SVG dla skalowalności na różnych urządzeniach.
Dlaczego favicon jest ważny?
Favicon pełni rolę wizytówki strony w przeglądarce i ma wpływ na:
- Rozpoznawalność – favicon pozwala użytkownikom łatwo zidentyfikować stronę na pasku kart i w zakładkach.
- Profesjonalny wizerunek – strony z własnym faviconem wyglądają bardziej profesjonalnie, co buduje zaufanie użytkowników.
- Estetykę – favicony stanowią spójny element wizualny strony i często są częścią większej strategii identyfikacji wizualnej marki.
Dodawanie favicon do strony
Aby dodać favicon do strony, należy w kodzie HTML umieścić odpowiedni znacznik w sekcji <head>
:
<link rel="icon" href="ścieżka_do_pliku/favicon.ico" type="image/x-icon">
Favicon może być zapisany w katalogu głównym strony jako favicon.ico
, aby niektóre przeglądarki automatycznie ją wykryły.
Favicon to niepozorny, ale istotny element każdej strony internetowej, który poprawia jej rozpoznawalność i profesjonalizm. Dzięki faviconom użytkownicy mogą łatwiej nawigować po stronach, a marki zyskują dodatkową przestrzeń do budowania spójnej tożsamości wizualnej.