Favicon to mała ikona strony wyświetlana na karcie przeglądarki, w zakładkach i w wynikach wyszukiwania na urządzeniach mobilnych. Buduje rozpoznawalność marki i pomaga użytkownikowi odnaleźć Twoją stronę wśród wielu otwartych kart. Standardowo przygotowuje się ją w kilku rozmiarach (od 16×16 do 512×512) i podpina w sekcji <head>.
Co to jest i czym jest favicon
Favicon to doskonały sposób by wyróżnić się wśród rosnącej konkurencji w wynikach wyszukiwania i na pasku przeglądarki. To promocja marki oraz budowanie jej świadomości u użytkownika przeglądającego codziennie strony internetowe w poszukiwaniu informacji, usługi lub produktów.
Co to jest favicon?
Jest to ikona pojawiająca się na pasku przeglądarki oraz przy nazwie domeny w wynikach wyszukiwania zarówno na telefonach jak i urządzeniach mobilnych. Dzięki niej użytkownik może skojarzyć firmę którą już doskonale zna. Pozwala na budowanie świadomości marki.
| Rozmiar | Gdzie używany |
|---|---|
| 16×16, 32×32 | karta przeglądarki, zakładki, pasek zadań (favicon.ico) |
| 180×180 | apple-touch-icon — ekran główny iOS |
| 192×192 | Android, skrót na ekranie głównym |
| 512×512 | manifest PWA, splash screen |
Czy strona potrzebuje favicon?
Tak zdecydowanie każda strona powinna być wyposażona w tą małą ikonkę. Określa ona tożsamość i wśród wielu kart otwartych pozwala wyróżnić się lub przypomnieć o sobie użytkownikowi.
Jak powinien wyglądać favicon?
Przygotowując ikonę powinniśmy pamiętać że nie jest to logo i nie musi być to dokładnie odwzorowany znak. Ikona ma dobrze prezentować się w małym rozmiarze na pasku przeglądarki dlatego warto uprościć znak tak by był on czytelny w takich rozmiarach.
Cechą podstawową favicon jest prostota i czytelność z zachowaniem znaczenia marki i logo. Powinno być uproszczoną formą logo przedstawioną w taki sposób by użytkownik mógł łatwo skojarzyć ikonę z logo. Duże znaczenie ma tutaj kolor i warto stosować w tle favicon główne tło marki gdyż będzie poprawiało jej rozpoznawalność.
Jakie są rozmiary favicon?
Standardowo stosuje się formaty kwadratowe tj: 16x16 lub 32x32 px. Formatem graficznym wgranym docelowo na serwer powinno być rozszerzenie .ico. Favicon może być również przeźroczysty tj: bez tła co lepiej komponuje się z tłem paska przeglądarki.
Generatory
Poza programami graficznymi w których możemy przygotować naszą ikonę możemy skorzystać z programów typu generatory favicon jak : favicon.io czy favicon.cc
Jak przygotować favicon?
Ikonę swojej strony wystarczy przygotować w programie graficznym w zadanych rozmiarach i eksportować do pliku png lub jpg. Następnie należy przekonwertować plik do formatu .ico. Popularnym programem do konwersji ico jest convertico.com. Drugim sposobem jest zmiana nazwy np w programie Total Commander na .ico
Jak dodać favicon do strony?
Istnieje kilka sposobów na dodanie ikony do strony.
Sposób 1:
Plik graficzny w postaci nazwa.ico należy umieścić w katalogu głównym domeny w folderze public_html. Następnie w kodzie strony w sekcji <head> należy umieścić odwołanie do pliku w postaci :
< link rel="shortcut icon" type="image/png" href="sciezka-do-pliku-favicon.png" >
Jak dodać favicon do wordpress?
W przypadku wordpressa w edycji motywu w ustawieniach powinniśmy mieć możliwość wgrania pliku graficznego do odpowiedniego pola. Wystarczy sprawdzić ustawienia lub tożsamość witryny, wgrać ikonę i zapisać zmiany.
Najczęściej zadawane pytania
Czy strona potrzebuje favicon?
Tak. Favicon to element wizerunku i wygody - pomaga użytkownikowi rozpoznać stronę wśród otwartych kart i zakładek, a jego brak wygląda nieprofesjonalnie. Przeglądarki i tak szukają favikony, więc lepiej ją dostarczyć.
Jakie rozmiary favicon są potrzebne?
Minimum 16x16 i 32x32 (karta przeglądarki), 180x180 dla urządzeń Apple oraz 192x192 i 512x512 dla Androida i PWA. Najlepiej przygotować komplet i podpiąć go w sekcji head.
W jakim formacie zrobić favicon?
Klasycznie ICO (zawiera kilka rozmiarów naraz) plus PNG dla ikon Apple i Androida. Coraz częściej używa się też SVG, który skaluje się bez utraty jakości - dobrze mieć wersję ICO/PNG jako fallback.
Jak dodać favicon do strony?
Wgraj pliki na serwer i dodaj w sekcji <head> odnośniki: link rel icon dla favicon.ico i PNG, link rel apple-touch-icon dla iOS oraz wpis w manifeście dla PWA. W WordPressie zrobisz to przez ustawienia motywu (ikona witryny).
