Jak utworzyć niestandardową ikonę Favicon w WordPressie

Jak utworzyć niestandardową ikonę Favicon w WordPressie

16 marca 2022 0 przez business-geek

Niezależnie od tego, czy tworzysz stronę internetową podcastu, czy osobistego bloga, stworzenie jej w taki sposób, aby zapadała w pamięć i była przyjazna dla użytkowników, może stanowić wyzwanie. Konfigurując ustawienia witryny, musisz określić tożsamość swojej marki i zacząć budować solidną reputację.

Prostym sposobem na stworzenie profesjonalnej obecności w sieci jest zaprojektowanie niestandardowej favicon. Dodając swoje logo do kart przeglądarki i wyników wyszukiwania, można zwiększyć rozpoznawalność marki i współczynnik klikalności (CTR).

W tym poście przedstawimy ogólny zarys faviconów oraz dlaczego warto rozważyć dodanie ich do swojej witryny WordPress. Następnie pokażemy, jak utworzyć własną favikonę. Zaczynajmy!

Wprowadzenie do faviconów

Favicon, czyli „ulubiona ikona”, to obrazek o wymiarach 16×16 pikseli, który pomaga oznaczyć zawartość Twojej witryny. Została stworzona w 1999 roku, aby pomóc w rozróżnianiu stron internetowych z zakładkami.

Obecnie favicony można zobaczyć w górnej części karty przeglądarki, nad paskiem adresu. W tym miejscu odwiedzający zobaczą małą ikonę marki:

Jeśli witryna nie ma przypisanej favicony, użytkownicy zobaczą ogólną ikonę przeglądarki. Dlatego wielu właścicieli stron internetowych stosuje favicony, aby ich zawartość była bardziej rozpoznawalna.

Ikony favicons można również zobaczyć w zakładkach, historii przeglądarki lub w wynikach wyszukiwania Google. Często ikona ta pokazuje użytkownikom, że mają kliknąć na wiarygodne i znane źródło.

Świetnie. Zapoznałeś się z faviconami. Teraz pokażemy Ci, jak stworzyć jedną z nich.

Jak utworzyć własną ikonę favicon WordPressa (4 metody)

Aby rozpocząć tworzenie swojej pierwszej favikony, musisz zaprojektować obraz, którego będziesz używać. Do tego celu zalecamy użycie programu Canva:

Canva to przyjazny dla początkujących program do edycji obrazów, który może stworzyć logo od podstaw. Możesz też przejrzeć szablony logo.

Niezależnie od tego, którą opcję wybierzesz, pamiętaj, aby zaprojektować kwadratowy obraz. Favicony zazwyczaj wyświetlają się w rozmiarze 16×16 pikseli, ale WordPress wymaga, aby wysokość i szerokość wynosiły co najmniej 512px.

Powiązane: Jak stworzyć przewodnik stylu marki dla swojej strony internetowej

Po zaprojektowaniu swojego logo jako favicon, nadszedł czas, aby dodać je do swojej strony internetowej! Oto kilka najlepszych metod.

1. Dodaj favikonę za pomocą Customizera WordPressa

Od wersji 4.3 WordPressa możesz użyć funkcji Ikony witryny, aby utworzyć niestandardowy favicon. Jest to jeden z najprostszych sposobów na przesłanie favicon, ponieważ nie będziesz musiał tworzyć pliku favicon .ico ani modyfikować pliku szablonu.

Znajdź obraz, którego chcesz użyć jako favicon. Następnie przejdź do Wygląd > Dostosuj w pulpicie nawigacyjnym WordPress:

Spowoduje to otwarcie Customizera WordPressa. Następnie przejdź do sekcji Ustawienia > Tożsamość witryny:

Zobaczysz tu sekcję zatytułowaną Ikona witryny. Kliknij na Wybierz ikonę witryny i prześlij obraz favicon:

Przycinaj obraz w razie potrzeby. Po prawej stronie możesz zobaczyć podgląd favicon:

Po zakończeniu kliknij przycisk Opublikuj.

Omiń kolejkę i otrzymuj wskazówki prosto do swojej skrzynki pocztowej

Kliknij poniżej, aby zapisać się na więcej poradników i tutoriali, takich jak ten, dostarczanych do Twojej skrzynki pocztowej.

2. Dodaj Favicon za pomocą kreatora stron WordPressa

Wiele popularnych kreatorów stron może dodać niestandardową favikonę w podobnym procesie. Na przykład Elementor ma funkcję niestandardowych ikon w ustawieniach globalnych.

Po pierwsze, musisz zarejestrować się w programie Elementor Pro. Umożliwia to aby przesłać własną favikonę.

Następnie należy otworzyć dowolny post lub stronę w edytorze Elementor:

Przejdź do Ustawienia witryny > Tożsamość witryny. Zobaczysz tam nazwę i opis swojej witryny. Znajdują się tam również opcje przesyłania logo i favicon witryny:

Najedź kursorem na szare pole pod napisem Favicon witryny i kliknij przycisk Wybierz obraz. Prześlij favicon i wybierz Insert Media:

Po załadowaniu favicon, przejdź na dół ekranu i kliknij Update. 3.

3. Zainstaluj wtyczkę favicon

Jednym z najprostszych sposobów na dodanie favicon do swojej strony internetowej jest wtyczka favicon. Ta opcja może być najlepsza dla osób, które nie mają dostępu do Customizera lub chcą skorzystać z prostszej opcji niż kodowanie.

Do tego procesu zalecamy użycie Favicon Rotator. Ta darmowa wtyczka WordPress umożliwia dodanie obrazu favicon w ciągu kilku minut:

Zainstaluj i aktywuj wtyczkę. Teraz przejdź do Wygląd > Favicon:

Zauważysz dwie różne opcje tworzenia niestandardowych ikon. Ikona przeglądarki umieszcza favicon w kartach przeglądarki. Ikona dotykowa dostosowuje favicony do urządzeń mobilnych:

Kliknij przycisk Dodaj ikonę obok ikony przeglądarki. Prześlij swój obraz favicon:

Jeśli chcesz przyciąć, obrócić lub odwrócić obraz, kliknij przycisk Edytuj obraz. W tym miejscu możesz zmienić wymiary i ustawienia miniatur zgodnie z potrzebami:

Gdy skończysz, wybierz Dodaj ikonę przeglądarki. Następnie kliknij przycisk Zapisz zmiany.

4. Ręczne generowanie ikony favicon

Jeśli Twoja witryna ma starszą wersję WordPressa lub motyw, może być konieczne ręczne dodanie favicon za pomocą kodu. Ta metoda może być również korzystna, gdy chcesz ograniczyć liczbę wtyczek innych firm w swojej witrynie.

Najpierw prześlij swój plik obrazu do narzędzia takiego jak Real Favicon Generator. Korzystając z tego oprogramowania, możesz wygenerować niestandardowy kod favicon:

Zacznij od kliknięcia przycisku Wybierz swój obraz Favicon. Po przesłaniu pliku obrazu program Real Favicon Generator utworzy podgląd Twojej favikony:

Na tej stronie możesz zaznaczyć pole z napisem Użyj oryginalnego obrazu w takiej postaci, jeśli podoba Ci się jego wygląd. Możesz także kontynuować edycję rozmiaru obrazu, koloru tła i promienia tła, zależnie od potrzeb.

Po dostosowaniu obrazu przewiń stronę do dołu i kliknij przycisk Generuj Favicony i kod HTML:

Zostanie wyświetlony kod dla favicon. Pobierz pakiet Favicon i skopiuj kod HTML:

Zanim zaczniesz edytować swój kod, zalecamy wykonanie kopii zapasowej witryny. Dzięki temu nie stracisz żadnych ważnych informacji z powodu błędów w kodowaniu.

Następnie otwórz panel administracyjny cPanel. Chociaż każdy dostawca usług hostingowych ma swój własny pulpit, musisz znaleźć przycisk Prześlij pliki.

W DreamHost, przycisk ten znajduje się w lewym dolnym rogu:

Następnie, prześlij swój plik favicon. W niektórych przypadkach pozwoli to przeglądarkom na aktualizację favicon bez konieczności dodawania kodu. Może się jednak okazać, że będziesz musiał zaktualizować swój plik header.php.

Aby to zrobić, otwórz wp_content i kliknij plik header.php. Następnie wybierz opcję Edytuj:

Wklej kod favicon z Generatora Favicon. Następnie może być konieczne wyczyszczenie pamięci podręcznej przeglądarki lub ponowne uruchomienie przeglądarki, aby zobaczyć nową favikonę na swojej stronie internetowej.

Elementy silnej marki

Dobre logo może być kluczem do sukcesu Twojej firmy.

niepowtarzalne i zapadające w pamięć. Gdy przekształcisz to logo w favicon, sprawisz, że odwiedzający stronę będą rozpoznawać treści oznaczone Twoją marką.

Podsumowując, oto najlepsze metody dodawania favicon do witryny WordPress

:

  1. Dodaj favicon za pomocą Customizera WordPressa.
  2. Użyj kreatora stron, takiego jak Elementor.
  3. Zainstaluj wtyczkę favicon, taką jak Favicon Rotator.
  4. Ręcznie zakoduj favicon.

Potrzebujesz pomocy przy tworzeniu strony internetowej od podstaw? W DreamHost oferujemy usługi Pro, które obejmują projektowanie stron internetowych na zamówienie. Nasi profesjonalni projektanci pomogą Ci stworzyć oryginalną stronę internetową, więc nie musisz się martwić o takie drobiazgi jak favicony!

DreamHost sprawia, że projektowanie stron internetowych jest prosteNasi

projektanci

mogą stworzyć wspaniałą stronę internetową od podstaw, aby idealnie pasowała do twojej marki i wizji – wszystko zakodowane w WordPressie, abyś mógł zarządzać swoją treścią w przyszłości.


Czytaj dalej: https://www.dreamhost.com/blog/create-custom-favicon-wordpress/