Favicon to ikona reprezentująca stronę internetową, widoczna przed adresem w polu adresowym przeglądarki internetowej lub na karcie z otwartą stroną www, wprowadzona w 1999 roku wraz z przeglądarką Inernet Explorer 5 😉

Obecnie większość stron internetowych dodaje takie ikony – jest to bardzo proste (dodajemy mały obrazek, najczęściej o rozmiarze 16×16 lub 32×32 px). Jednak przez zróżnicowanie urządzeń na jakich możemy dziś przeglądać strony internetowe nie jest to wcale takie proste, aby ikonka ta prezentowała się dobrze na wszystkich możliwych urządzeniach.

Obecnie ikony te powinniśmy dodawać w formacie png, ponieważ dawny format z rozszerzeniem .ico jest przestarzały i chociaż prawdopodobnie będzie nadal działać poprawnie, powinniśmy z niego zrezygnować. Ponadto powinna być to ikona png w kilku rozmiarach, ponieważ urządzenia mobilne, tablety wyświetlają ikonę w dużo większym formacie niż np. zakładki w Twojej desktopowej przeglądarce internetowej. (Do tego dochodzą ikony Apple Touch z systemu iOS – również z wyświetlaczami Retina, kafelki w Windows 8 i niestety ale nasz favicon w formacie .ico, lub png ale bardzo małego rozmiaru będzie wyglądał fatalnie na wyświetlaczach tych urządzeń.

Jak to wszystko ogarnąć i przygotować odpowiednie ikony dla wszystkich urządzeń? Na szczęście nie musimy tego robić ręcznie, bo z pomocą przychodzi nam serwis http://realfavicongenerator.net/

Jedyne co musimy zrobić to przygotować nasz obrazek np. w formacie png i rozmiarze co najmniej 256 x 256 px dla uzyskania optymalnych efektów. Po wejściu na wspomniany serwis i przesłaniu naszego obrazka, możemy sprawdzić jak favicon będzie wyglądał na konkretnych urządzeniach oraz zmienić opcje np. tło dla kafelka w Windows8 lub użyć całkowicie innej ikony dla urządzeń z system iOS.

Favicon w iOS – ikona wp-info.

Następnie możemy też wybrać stopień kompresji naszych ikonek. Po kliknięciu w przycisk "Generate your Favicons and HTML code" mamy do pobrania gotową paczkę z naszymi ikonami oraz kod html do wklejenia na naszej stronie:

Favicon – wygenerowany kod HTML

Najlepiej zawartość paczki wysłać do głównego katalogu naszej witryny. (tam gdzie znajdują się katalogi wp-content,wp-themes, wp-admin) a następnie w nagłówku naszej witryny (najczęściej w pliku header.php) powinniśmy w sekcji head dodać wygenerowany kod HTML i to wszystko.

Serwis umożliwia również sprawdzenie, czy nasz favicon został dodany poprawnie, wystarczy podać adres www naszej strony internetowej a uzyskamy dokładne informacje, czy nasze ikony wyświetlają się poprawnie wraz z podglądem na kilku urządzeniach:

Favicon generator – sprawdzenie poprawności ikon