Favicon – co to jest i jak dodać?

 

Favicon

W 2008 roku w Internecie znajdowało się około 170 mln witryn. Patrząc na aktualne statystyki, liczba ta zwiększyła się ponad 10-krotnie! Na ten moment możemy za pomocą naszej przeglądarki odwiedzić blisko 2 miliardy domen. Taka ilość zwiększa oczywiście konkurencję i sprawia, że – jako właściciele witryn – musimy szukać sposobów na wyróżnienie się z tłumu. Jedną z najprostszych możliwości jest dodanie favicon, czyli małej ikony strony internetowej reprezentującej naszą markę.

favicon

 

Przeglądając strony internetowe możemy zauważyć, że mają one ze sobą wiele wspólnych elementów, takich jak np. menu czy stópka. Rzadko kiedy spotyka się też strony, które nie posiadałby własnego logotypu. W przypadku favicon’u jest nieco inaczej, ponieważ nie każdy o nim wie – a przez to nie przykłada się do niego tak dużej wagi. To też jeden z najczęstszych błędów początkujących na WordPress.

Wstawienie favicon na własnej stronie internetowej jest o wiele lepszym pomysłem niż pozostawienie pustej ikony dokumentu. Dzięki własnej ikonie, strona wyróżnia się na tle pozostałych oraz wygląda na bardziej zaufaną i profesjonalną.

Ten artykuł został stworzony z myślą o początkujących, którzy nie tylko nie wiedzą, jak zrobić ikonę strony, ale często nie wiedzą też o jej istnieniu. W dzisiejszym poradniku odpowiemy więc, co to jest i jak dodać favicon (jeden ze sposobów wstawienia ikony poruszy kwestię favicon na WordPress).

 

 

Co to jest favicon?

Favicon jest małą ikoną, która wyświetla się obok tytułu witryny w przeglądarce. Służy jako element rozpoznawczy, budujący zaufanie wśród odbiorców, ponieważ pomaga im wizualnie zidentyfikować witrynę internetową.

ikona strony - favicon

 

Użytkownicy, którzy często odwiedzają daną witrynę internetową będą w stanie ją rozpoznać za pomocą faviconu, bez potrzeby czytania tytułu czy adresu strony. Jest to niezwykle pomocne w szczególności dla Internautów, którzy lubią otworzyć kilkanaście lub kilkadziesiąt kart w przeglądarce – wtedy na kartach nie wyświetla się nic innego niż mała ikona witryny.

Warto wiedzieć: Niektóre usługi sieciowe i wyszukiwarki wyświetlają favicon w swoich wynikach oraz listach. Najlepszym przykładem może być tutaj duckduckgo.com.

 

Czy moja strona potrzebuje favicon?

Tak, każda strona powinna dodać favicon. Określa ona tożsamość witryny oraz poprawia jej użyteczność i wygodę użytkownika. Im więcej otwartych kart w przeglądarce, tym mniej znaków jest na nich widocznych. Ikona strony sprawia, że o wiele łatwiej jest się w nich odnaleźć.

 

Czy moja strona posiada favicon?

Aby sprawdzić, czy nasza strona ma dodany favicon, wystarczy spojrzeć na kartę w przeglądarce. Jeżeli obok tytułu podstrony widnieje ikona, możemy być pewni, że wszystko jest ustawione poprawnie. Jeśli jednak jest inaczej, musimy jak najszybciej wstawić favicon.

 

Jaki rozmiar favicon wybrać?

Rozmiar favicon w przeglądarce to 16 x 16 px (pikseli), co czyni ją standardową, kwadratową ikoną. Aby jednak uzyskać najwyższą jakość obrazu i nie doświadczyć tzw. efektu rozmycia, zaleca się korzystanie z grafiki o wyższych rozdzielczościach, np. 512 x 512 px.

 

Czy favicon może być przezroczysty?

Tak, favicon może być przezroczysty. Wiele witryn korzysta i chwali takie rozwiązanie. Aby jednak dodać przezroczysty favicon, musimy być w posiadaniu obrazu bez tła. W tym przypadku, najlepszym sposobem będzie użycie obrazu w formacie .png.

 

 

Jak dodać favicon – 3 proste sposoby

Teraz, gdy już wiemy, czym jest i jakie korzyści płyną z wstawienia własnej ikony na stronie, przyszedł czas na praktykę! Zależnie od tego, ile mamy czasu i jaki rodzaj strony prowadzimy (np. WordPress), mamy kilka możliwości, aby umieścić favicon we własnej witrynie.

Warto wiedzieć: Jeżeli jesteś klientem JCHost.pl, bardzo chętnie pomożemy Ci dodać favicon zupełnie za darmo. Wystarczy, że do nas zadzwonisz lub wyślesz wiadomość e-mail.

 

Oto 3 sposoby, jak dodać favicon:

 

Sposób 1: Dodanie favicon w folderze public_html

Pierwszym sposobem dodania favicon jest umieszczenie go w public_html.

jak dodac favicon - public html

 

Zdecydowana większość przeglądarek wykrywa plik favicon.ico znajdujący się w głównym katalogu witryny i wybiera go, jako podstawową ikonę strony. Jest to więc najprostszy sposób na dodanie faviconu.

 

1. Wybierz swoją ikonę

Na samym początku musimy znaleźć lub stworzyć kwadratowy obraz w dowolnym formacie (.jpg, .bmp, .png, …). Oczywiście możemy skorzystać z niekwadratowego obrazka, jednakże wtedy ikona będzie rozmazana i tym samym – nieprofesjonalna.

dodanie favicon - krok 1

 

2. Przejdź do konwertora

Po stworzeniu naszej własnej grafiki, musimy ją przekonwertować do formatu .ico. W tym celu możemy skorzystać z wielu darmowych narzędzi online. Jednym z najpopularniejszych jest convertico.com.

dodanie favicon - krok 2

 

3. Wykonaj konwersję do formatu .ico

Po otwarciu narzędzia do konwersji, wystarczy, że wgramy nasz plik i klikniemy na czerwony przycisk „GO”, w celu przekonwertowania.

dodanie favicon - krok 3

 

4. Pobierz wygenerowany plik

Konwersja do formatu .ico potrwa kilkanaście sekund. Następnie po prawej stronie ujrzymy favicon do pobrania. Klikamy więc na przycisk strzałki „Download” i zapisujemy ikonę w formacie .ico w dowolnym miejscu na komputerze.

dodanie favicon - krok 4

 

5. Zmień nazwę pliku

Po pobraniu, musimy zmienić nazwę pliku na „favicon.ico”.

dodanie favicon - krok 5

 

6. Wrzuć plik do folderu public_html

Ostatnim krokiem jest przesłanie wygenerowanego pliku do katalogu naszej witryny (/public_html/). W tym celu możemy użyć albo menadżera plików w panelu hostingowym albo aplikacji FTP, takiej jak Filezilla.

dodanie favicon - krok 6

 

7. Dodaj kod w części < head > (nieobowiązkowo)

Gdy dodamy plik do folderu public_html, ikona powinna się już wyświetlać poprawnie. Jeśli jest inaczej i nie widzimy naszej ikony, musimy dodać poniższy kod pomiędzy tagami < head >.

<link rel="shortcut icon" href="/favicon.ico"/>

 

Warto wiedzieć: Jeżeli na swoim koncie hostingowym posiadasz więcej niż jedną domenę, lokalizacja głównego katalogu będzie wyglądała następująco: /domains/twojadomena.pl/public_html

Sprawdź najszybszy na rynku hosting WordPress oraz hosting Ecommerce.

 

 

 

Sposób 2: Dodanie favicon w formie zwykłego obrazu

Drugim sposobem na zrobienie favicon jest użycie zwykłego zdjęcia.

jak zrobic favicon - obrazek

 

Czasami konwersja może pójść nie po naszej myśli, co zmusi nas do wykorzystania obrazka w standardowym formacie, zamiast w formacie .ico. W takim wypadku najlepszym sposobem będzie manualne dodanie ikony w kodzie strony.

 

1. Dopasuj ikonę

Przede wszystkim musimy zadbać oto, by nasz obrazek był kwadratowy, o czym wspomnieliśmy wyżej. Format obrazka może być dowolny (.jpg, .png, …).

zrobienie favicon - krok 1

 

2. Wrzuć plik do folderu public_html

Tak jak w poprzednim sposobie, musimy umieścić obrazek w głównym katalogu naszej witryny. Wgrywamy go więc do folderu /public_html/.

zrobienie favicon - krok 2

 

3. Dodaj kod w części < head >

Teraz musimy dać witrynie do zrozumienia, że przesłany plik powinien być uznawany za ikonę strony. Robimy to poprzez dodanie krótkiego kodu na wszystkich podstronach obecnych w witrynie pomiędzy tagami < head >.

<link rel="shortcut icon" type="image/png" href="/obrazek.png"/>

 

Zależnie od tego, w jakim formacie dodajemy naszą ikonę, powinniśmy dopasować część type=” “.  W przypadku zdjęcia w formacie .jpg, będzie to type=”image/jpeg”.

Warto wiedzieć: W przypadku niektórych witryn nie musimy dodawać kodu na każdej podstronie. Jeżeli w głównym katalogu znajduje się plik header.php, możemy dodać wspomniany kod właśnie w nim. Nowa ikona pojawi się wtedy w obrębie całej witryny.

 

 

 

Sposób 3: Dodanie favicon na WordPress

Trzecim sposobem na wstawienie favicon jest skorzystanie z WordPressowego narzędzia.

jak wstawic favicon - wordpress

 

Użytkownicy korzystający z systemu WordPress mają (prawie) zawsze najłatwiej. Dodanie favicon na WordPressie jest banalnie proste i nie wymaga od nas żadnej wiedzy programistycznej, ani manualnej konwersji obrazków.

 

1. Zaloguj się do panelu admina

Zaloguj się do panelu administracyjnego WordPress (/wp-admin/), przejdź do zakładki „Wygląd” i kliknij „Dostosuj”.

wstawienie favicon wordpress - krok 1

 

2. Otwórz zakładkę “Tożsamość witryny”

Zostaniesz przekierowany do modułu dostosowywania WordPress. Z listy wybierz zakładkę „Tożsamość witryny”.

wstawienie favicon wordpress - krok 2

 

3. Wgraj swoją ikonę

W tym miejscu, oprócz wybrania tytułu i opisu witryny, możesz też ustawić favicon. Prześlij kwadratową grafikę o wymiarach co najmniej 512 x 512 px, a następnie kliknij „Zapisz i opublikuj”.

wstawienie favicon wordpress - krok 3

 

 

Warto wiedzieć: Jeżeli przesyłany obraz nie jest kwadratowy lub przekracza zalecany rozmiar, WordPress uruchomi narzędzie umożliwiające przycinanie obrazu.

 

Brawo! Ikona strony jest kolejną rzeczą, którą możesz odhaczyć jako ‘wykonaną’. Od teraz Twoja witryna będzie się wyróżniać na pasku przeglądarki.

Jeśli ten artykuł Cię zainteresował, gorąco zachęcamy do przeczytania wpisu o jednej z ostatnich nowinek na naszych serwerach  – HTTP/3.

 

 

 

 

Odbieramy telefony, odpisujemy na maile, nie ukrywamy kosztów, a dodatkowo oferujemy najszybsze pakiety hostingowe na rynku. Uważasz, że to zwroty marketingowe? Sprawdź sam/a!

Jeśli nie będziesz zadowolony/a, zwrócimy Ci pieniądze.
Twoje strony i sklepy przeniesiemy za darmo!

Hosting WordPressHosting Magento

Jeżeli masz jakiekolwiek pytania, skontaktuj się z nami! Kliknij tutaj.

Chcesz dowiedzieć się o nas trochę więcej? Przejdź na stronę JCHost.pl.

Daj znać znajomym!