Co to jest Favicon?
Favicony to ikony, piktogramy lub obrazki, które pojawiają się w przeglądarce jako charakterystyczny element rozpoznawania grafiki obok wpisanego adresu internetowego. W zakładce przeglądarki jest to wyświetlane obok tytułu lub np. na liście ulubionych. Favikona to mały kwadratowy obraz, który pojawia się u góry przeglądarki nad paskiem adresu i ozdabia każdą kartę. Termin favicon składa się z dwóch angielskich słów: „ Ulubiony ” i „ Ikona ”. Takie zestawienie słów tworzy favicon – czyli ulubiony symbol, ulubioną ikonę. Najczęściej w favicon możemy znaleźć logo używane na stronie, ale wiele witryn używa odmiennych elementów graficznych, aby szybko przywołać uwagę użytkownika.
- Favicon – informacje podstawowe
- Jaki rozmiar to favicon?
- Jakich obrazów użyć do favicon?
- Jak stworzyć favicon dla strony internetowej?
- Jak dodać favicon w CMS WordPress?
Favicon – informacje podstawowe
Ikona Ulubionych to mały obrazek wyświetlany w pasku adresu przeglądarki internetowej po lewej stronie tytułu strony. Może służyć jako funkcja rozpoznawania strony internetowej, a tym samym wpływać na przyjazność dla użytkownika strony internetowej. Favicon wyświetlany jest zwykle w rozmiarze 16×16 lub 32×32 pikseli.
Favicon jest wbudowany poprzez element linku w <head>
obszarze dokumentu HTML. W tym celu określa się:
- że jest to ikona (
rel=icon
), - określa się wielkość ikony (
size="16x16"
) - wskazujesz gdzie znajduje się ikona (
href=favicon.png
), - i jaki to typ treści (
type="image/png"
)
Favicony nie mają bezpośredniego wpływu na SEO witryny. Jednak ponieważ ułatwiają one przeglądarkom identyfikację i poprawiają ogólne wrażenia użytkownika, cechy favicon mogą organicznie poprawić pozycję witryny w wynikach wyszukiwania.
Jaki rozmiar ma favicon?
Ze względu na wiele lokalizacji wyświetlania, potrzebujesz różnych rozmiarów swojej witryny:
- Standardowy format wyświetlania favicon w przeglądarce internetowej to 16 x 16 pikseli,
- Favicon wyświetlany jako ikona skrótu na pasku zadań powinna mieć wymiary 32 x 32 piksele,
- W systemie iOS 10 favicon ma wymiary 152 x 152 piksele, a w przypadku iPhone’ów z wyświetlaczem Retina jest to 180 x 180 pikseli. Dotyczy to zapisywania stron jako skróty na ekranie głównym urządzenia,
- Windows 10 wyświetla również ikony aplikacji i używa obrazów o wymiarach 70×70, 270×270, 310×310 i 310×150 pikseli w zależności od lokalizacji.
Chociaż wydaje się, że favicona, z podstawowej definicji, to jedynie mała ikonka wyświetlana na pasku w przeglądarce, jest ona elementem charakterystycznym dla witryny internetowej. Sposób używania witryny w przeglądarce i na urządzeniu, np. poprzez generowanie skrótów, umieszcza favicon w różnych lokalizacjach.
Jakich obrazów możesz użyć do Favicon?
Możesz użyć obrazu ,dowolnego formatu, jako indywidualnej favicon, będziesz potrzebował przekonwertować go na format .ico. Podczas konwersji upewnij się, że format końcowy jest kwadratowy, np. 16×16.
Oprócz .ico obecne wersje przeglądarek zazwyczaj rozpoznają również formaty .gif lub .png. Ponieważ jednak może to prowadzić do problemów ze starszymi przeglądarkami, powinieneś używać klasycznego formatu .ico, aby być po bezpiecznej stronie.
Systemy CMS potrafią poradzić sobie z konwersją pliku.
Jak stworzyć faviconę dla swojej strony internetowej?
O ile nie korzystasz z kreatorów stron WWW czy popularnych systemów CMS, tworzenie favicony być może trzeba będzie przeprowadzić ręcznie.
Możesz zaprojektować obraz favicon za pomocą dowolnego edytora obrazu. Zacznij od przygotowania powierzchni roboczej, kwadratu o wymiarach 64 x 64 pikseli, abypóźniej go przeskalować do 16 x 16 pikseli. Następnie musisz zapisać plik w formacie .jpg, .png, .gif, .bmp lub .tif.
W kolejnym kroku obraz należy zapisać jako favicon.ico. Jest to zalecany format obsługiwany przez większość przeglądarek internetowych. Jeśli Twój program graficzny nie może zrobić tego na etapie zapisywania lub eksportu pliku, skorzystaj z narzędzi online, np. faviconer.com.
Prześlij swój obraz, wybierz rozmiar ikony, a następnie pobierz swój nowy plik .ico.
Plik .ico należy przesłać do katalogu głównego Twojej witryny na serwerze FTP. Powinien on być dostępny, gdy wejdziesz na www.nazwa_strony.pl/favicon.ico.
Większość nowoczesnych przeglądarek znajdzie plik favicon bez konieczności dodawania kodu, ale aby upewnić się, że wszystkie przeglądarki wyświetlają go poprawnie, dodaj następujące elementy do nagłówka, w obrębie tagów strony:
<link rel="icon" type="image/x-icon" href="http://nazwa-strony.pl/favicon.ico" />
Używanie favicon może mieć duży wpływ na wrażenia użytkownika i poprawić wizerunek Twojej firmy przy niewielkich lub żadnych dodatkowych kosztach.
Dodawanie favicon w WordPress
Jeśli korzystasz z popularnego systemu CMS WordPress, możesz dodać faviconę bezpośrednio w panelu administratora, korzystając z dowolnego pliku obrazu, który zostanie przeskalowany i zapisany we właściwym dla favicon formacie: