Jak zmienić favikonę w WordPress?

Promocja na hosting WordPres za 1 zł na 6 miesięcy

Co to jest favicon?

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

Wgrana ikonka zostanie wyświetlona w górnej części ekranu (w zakładce przeglądarki)

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.

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.

Prawidłowe i umiejętne używanie favicony może zwiększać rozpoznawalność marki, a nawet poprawić doświadczenia użytkowników z przeglądania witryny (tzw. UX).

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.

Używanie logo marki lub innych ikon kojarzących się z Twoim biznesem podczas tworzenia favicony jest bardzo zasadne przy tworzeniu estetycznej oraz spójnej identyfikacji wizualnej.

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.

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.

Domenomania.pl to jedna z czołowych i największych firm w Polsce, która nieprzerwanie od roku 2004 dostarcza usługi związane z hostingiem, domenami, pozycjonowaniem stron internetowych oraz kreacją stron WWW.

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.

W Internecie znaleźć można poradniki sugerujące, iż favikona 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.

Dodana ikona favicon w zakładkach przeglądarki będzie wyświetlana w postaci kwadratu o wielkości 16 x 16 pikseli. Zwróć na to uwagę podczas projektowania grafiki, którą chcesz używać jako favicona. Po przeskalowaniu grafiki z wielkości 512 x 512 pikseli do 16 x 16 pikseli favicona powinna być wyraźna.

Jak ustawić własną ikonę 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)
  2. Z lewego menu wybierz opcję: Wygląd, a następnie Dostosuj.Aby zmienić favicon w wp-admin przejdź do Wygląd - Dostosuj
  3. W kolejnym oknie po lewej stronie kliknij na Tożsamość witryny.WordPress - wp-admin - Wygląd - Dostosuj - Tożsamość witryny
  4. Teraz w sekcji Ikona witryny kliknij przycisk Wybierz obrazek.WordPress - wp-admin - Wygląd - Dostosuj - Tożsamość witryny - Ikona witryny
  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ć.W oknie systemowym wybierz plik graficzny, który zostanie Twoją ikoną favicon w WordPress
  6. Po wczytaniu pliku do Biblioteki multimediów, kliknij przycisk Wybierz, w prawej dolnej części ekranu.Po wczytaniu pliku do WordPress, kliknij przycisk: Wybierz, aby wybrać plik jak favicona
  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.WordPress - kadrowanie grafiki - wybierz jak będzie wyglądać ikona favicon w WordPress
  8. W kolejnym oknie kliknij przycisk Opublikuj. To wszystko! Twoja witryna ma teraz nową favikonę.Wgrana ikonka zostanie wyświetlona w górnej części ekranu (w zakładce przeglądarki)

Jeśli posiadasz hosting w Domenomania.pl możesz na nim umieścić swoją stronę WWW lub przechowywać pliki.

Jak ustawić favicon 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)
  2. Zainstaluj i aktywuj bezpłatną wtyczkę: Favicon by RealFaviconGenerator.
  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).

Podczas ręcznego dodawania favicony musisz wcześniej utworzyć ikonę favicon oraz posiadać kod HTML (oba te niezbędne elementy możesz wygenerować za pomocą wcześniej opisanego kreatora on-line: RealFaviconGenerator).

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:
  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.
  • Czy ten artykuł był pomocny?
  • TakNie
Promocja na hosting WordPres za 1 zł na 6 miesięcy

Najpopularniejsze frameworki PHP

Język PHP służy przede wszystkim do tworzenia stron internetowych, a także rozmaitych aplikacji. Mając do dyspozycji framework PHP otrzymujesz...

Co to jest Core Web Vitals?

Wskaźniki internetowe to gorący temat w społeczności zajmującej się szeroko pojętym SEO. Jednym z popularnych tematów powiązanych z SEO jest...

Popularne wtyczki do optymalizowania obrazów w WordPress

Obrazy wstawione na stronie internetowej mogą poprawić wrażenia użytkowników odwiedzających Twoją witrynę - wzbudzić zainteresowanie,...

Domeny, hosting, serwery VPS i poczta e-mail

Nie znalazłeś odpowiedzi na swoje pytanie?

Nasze Biuro Obsługi Klienta jest do Twojej dyspozycji.

Telefon

Kontakt w sprawie usług i zamówień

Czynne:
poniedziałek - piątek
8.00 - 16.00
Infolinia:
+48 71 715 27 24

Poczta

Kontakt mailowy w sprawie usług i zamówień

Czynne:
poniedziałek - niedziela
24h na dobę
Email:
bok@domenomania.pl