Każdy detal ma znaczenie dla wyróżnienia się w sieci Internet i w przeglądarkach internetowych. Jednym z tych małych, ale istotnych elementów jest favicon. Może wydawać się niepozorną ikonką, ale ma duże znaczenie dla rozpoznawalności marki i ułatwienia nawigacji dla użytkowników. Ale czym dokładnie jest favicon i jak można samodzielnie utworzyć taką ikonę?

• Co to jest favicon?
• Jak samodzielnie utworzyć ikonę favicon?
• Informacje o ikonie favicon w WordPress
• Jak dodać favicon w WordPress?
• Jak dodać favicon w WordPress za pomocą wtyczki?
• Jak ręcznie dodać favicon przez FTP do WordPress?

Favicon, zwane również ikoną strony, to mały graficzny symbol, który wyświetla się obok nazwy strony w pasku adresu przeglądarki oraz w zakładkach. To taki mały znak rozpoznawczy, który pomaga użytkownikom zidentyfikować i odróżnić stronę internetową wśród wielu innych. Dzięki faviconowi, nawet gdy użytkownik otworzy wiele kart w przeglądarce, będzie mógł szybko zlokalizować właściwą stronę, po prostu po jej charakterystycznym logo.

Co to jest favicon?

Favicona to niewielki obrazek, który związany jest z Twoją marką. Własna favicona bloga lub innego prowadzonego przez Ciebie serwisu internetowego to ważny element budowania rozpoznawalności Twojej marki i wizerunku.

Ikona favicon służy głównie do identyfikacji wizualnej strony WWW w zakładce przeglądarki internetowej (oraz w innych miejscach). Poniżej zaprezentowane rozwiązania przedstawiają jak w WordPress zmienić ikonę favicon na trzy sposoby: po zalogowaniu do panelu administracyjnego (wp-admin), za pomocą popularnej bezpłatnej wtyczki oraz ręcznie za pomocą FTP i edycji plików szablonu.

• Uproszczona procedura zmiany favicon w WordPress

Ikona favicon używana jest w wielu miejscach, np. zakładki przeglądarki, pasek adresu w przeglądarce czy nawet przyciski ekranu głównego w systemie iOS i nie tylko. Oznacza to, że favicon może być zauważony przez wielu użytkowników korzystających z Twojej witryny i dlatego uznawane są jako ważna część Twojej identyfikacji wizualnej.

Dodanie własnej ikony favicon w WordPress powoduje również, że Twoja strona WWW będzie sprawiać wrażenie wiarygodnej i bardziej profesjonalnej, co może przełożyć się na zwiększone zaufanie użytkowników czy potencjalnych klientów. Powinieneś też wiedzieć, że jeśli użytkownik zapisze skrót do Twojej strony WWW na ekranie głównym swojego urządzenia mobilnego, to ikona favicon pojawi się jako ikona.

Jak samodzielnie utworzyć ikonę favicon?

Większość firm przy tworzeniu favicon korzysta ze swojego logo lub jego odmiany. W przeszłości wymagane było, aby do favicony używane były tylko pliki z rozszerzeniem ICO, jednak obecnie wszystkie popularne przeglądarki internetowe wspierają zarówno pliki ICO, PNG, JPEG oraz GIF.

• Jakie są zalecane formaty favicon?

Jeśli znasz obsługę programów graficznych możesz samodzielnie utworzyć faviconę, jednak często o wiele łatwiej skorzystać z dostępnych narzędzi online, które w szybki sposób utworzą zestaw favicon z wybranego przez Ciebie obrazu (np. plik graficzny logo).

Popularne kreatory on-line do tworzenia favicon:

• RealFaviconGenerator – kreator tworzy dodatkowo ikony dla aplikacji, generuje favicon w formatach PNG i ICO, kreator po przesłaniu obrazu umożliwia łatwe dostosowanie favicony).
• Favicon.cc – kreator umożliwia stworzenie favicony „od zera” lub na podstawie przesłanego obrazu.
• Favicon Generator – kreator online do tworzenia favicon, który działa podobnie do RealFaviconGenerator.

Informacje o ikonie favicon w WordPress

Do dodania ikonki favicon w WordPress nie potrzebujesz dodatkowych wtyczek (chociaż takie też istnieją – o czym więcej informacji znajdziesz w dalszej części artykułu). Dodawanie favicon jest domyślną opcją dostępną w ustawieniach wyglądu strony internetowej (szablonu). Favicon według zaleceń WordPressa to obraz o wielkości co najmniej 512 × 512 pikseli. WordPress podczas dodawania obrazu sam dokona pozostałych zmian w procesie przekształcenia grafiki na favicon.

• Rozmiary dla favicon – jaki powinna mieć wymiar?

W Internecie znaleźć można poradniki sugerujące, iż favicona powinna posiadać odpowiednie rozszerzenie .ico, lecz WordPress jest w tej kwestii nieco bardziej liberalny i rolę ikonki może pełnić plik z innym popularnym rozszerzeniem, np. .jpg czy .png. Ponadto w przypadku użycia pliku o innych wymiarach niż zalecane, WordPress wykona odpowiednie kadrowanie i przekształcenie wskazanej grafiki.

Jak dodać favicon w WordPress?

Aby dodać własną grafikę i przekształcić ją na faviconę w panelu administracyjnym WordPress:

1. Zaloguj się do WordPress (wp-admin)
   • Jak zalogować się do WordPressa (wp-admin)?
2. Z lewego menu wybierz opcję: Wygląd, a następnie Dostosuj.
3. W kolejnym oknie po lewej stronie kliknij na Tożsamość witryny.
4. Teraz w sekcji Ikona witryny kliknij przycisk Wybierz obrazek.
5. Jeśli plik, który ma posłużyć za ikonę witryny nie znajduje się w Twojej Bibliotece mediów przejdź do zakładki Dodaj pliki,w oknie które się wyświetli, a następnie kliknij przycisk Wybierz pliki. Teraz wskaż na komputerze plik, który chcesz użyć.
6. Po wczytaniu pliku do Biblioteki multimediów, kliknij przycisk Wybierz, w prawej dolnej części ekranu.
7. Teraz Wodpress poprosi nas o wykadrowanie przesłanej grafiki, aby wyświetlała się poprawnie i czytelnie. Po odpowiednim wykadrowaniu kliknij przycisk Przytnij obrazek.
8. W kolejnym oknie kliknij przycisk Opublikuj. To wszystko! Twoja witryna ma teraz nową faviconę.

Jak dodać w WordPress za pomocą wtyczki?

Podczas dodawania favicony w WordPress możesz też skorzystać z popularnej bezpłatnej wtyczki: Favicon by RealFaviconGenerator. Obsługa wtyczki jest bardzo prosta i umożliwia łatwe dodanie favicony oraz jej skonfigurowanie w WordPress (np. posiada opcje zgodności dla wielu urządzeń i ikon aplikacji). Wtyczki do dodawania favicon mogą posiadać również rozbudowane narzędzia edycji grafiki.[/alert]

1. Zaloguj się do WordPress (wp-admin)
   • Jak zalogować się do WordPressa (wp-admin)?
2. Zainstaluj i aktywuj bezpłatną wtyczkę: Favicon by RealFaviconGenerator.
   • Jak zainstalować wtyczkę w WordPress?
     
3. Po zainstalowaniu i aktywowaniu wtyczki przejdź do sekcji: Wygląd -> Favicon.
4. Wybierz obraz lub prześlij przygotowany plik graficzny, który chcesz użyć jako favicona w WordPress. Pliku graficzny powinien mieć wymiary co najmniej 70 x 70 pikseli (sugerujemy przesłanie pliku o wielkości 260 x 260 pikseli).
   
5. Po wybraniu grafiki, kliknij przycisk: Generate favicon. Spowoduje to przekierowanie do witryny: RealFaviconGenerator, gdzie będziesz kontynuować tworzenie swojej favicony.
6. Na stronie wybierz opcję: Generate your Favicons and HTML code. Po wykonaniu tej operacji zostaniesz przekierowany z powrotem do panelu administracyjnego WordPress.
   
7. Twoja favicona została skonfigurowana i jest gotowa do wyświetlania użytkownikom odwiedzającym Twoją stronę WWW. Możesz sprawdzić podgląd jak favicona będzie się prezentować na różnych urządzeniach.

Jak ręcznie dodać favicon przez FTP do WordPress?

Dodanie favicony możesz wykonać też ręcznie przez FTP lub po uruchomieniu menadżera plików (np. w cPanel).

Aby ręcznie dodać favicon WordPress przez FTP lub menadżer plików:

1. Uzyskaj dostęp do plików swojej strony WWW opartej na WordPress:
   • Jak połączyć się z serwerem FTP?
   • Jak uruchomić Menadżer plików w cPanel?
2. Przejdź do katalogów głównego, w którym opublikowana jest strona WWW i prześlij zawartość favicony do tego katalogu. Pliki powinny znajdować się w tym samym folderze, co foldery /wp-admin oraz /wp-content.
3. Następnie skopiuj kod HTML, który został wygenerowany w kreatorze online RealFaviconGenerator podczas tworzenia ikony i:
   • użyj wtyczki o nazwie: Insert Headers and Footers, aby dodać kod HTML do nagłówka używanego szablonu. Użycie tej wtyczki jest zasadny, ponieważ gwarantuje, że nie stracisz favicon, jeśli zmienisz motyw WordPress w przyszłości.
   • lub wklej kod HTML do sekcji <head> używanego motywu. Możesz to zrobić edytując plik header.php dla używanego motywu. Pamiętaj, że jeśli będziesz w przyszłości zmieniać szablon na inny, to kod favicony będziesz musiał dodać ponownie ręcznie do pliku header.php nowego motywu.
4. Jeśli skorzystasz z wtyczki: Insert Headers and Footers to po jej zainstalowaniu i aktywowaniu przejdź do sekcji: Ustawienia -> Insert Headers and Footers i wklej kod HTML do sekcji: Scripts in Header.
5. Po zapisaniu zmian, favicona powinna być już używana na Twojej stronie WWW opartej o system WordPress.

• Jak dodać newsletter w WordPress?
• Jak dodać pliki SVG do WordPress?