Jak dodać swój logotyp i faviconę do strony na WordPressie?

W dzisiejszym odcinku powiem Państwu jak dodać na stronę własne logo i tak zwaną favikonę. Przy okazji nauczymy się także jak w szybki sposób sprawdzić, jak strona będzie się prezentowała na telefonach i tabletach.

Partnerem medialnym tego odcinka jest oczywiście magazyn e-commerce & digital marketing.

Opcje personalizacji

Logo oraz fawikonę możemy dodać w opcjach personalizacji strony, z którymi mieliście już okazję się Państwo zapoznać przy okazji materiału poświęconego tworzeniu menu.

Dla tych jednak, którzy nie widzieli tamtego filmiku przypominam, że link do tych opcji znajduje się w menu głównym panelu administracyjnego WordPressa oraz w pasku górnym, kiedy mamy włączony podgląd strony właściwej.

Ustawienia pozwalające nam dodać logo i fawikonę znajdują się w sekcji „Tożsamość witryny”.

Jak dodać logotyp we właściwym rozmiarze

Otóż w filmiku o projektowaniu własnego logotypu wspominałem, że dobrą praktyką jest przygotowywanie grafiki, która jest dwukrotnie większa niż miejsce, które logotyp będzie zajmował na stronie internetowej. Robi się to z myślą o telefonach i ekranach o wysokiej rozdzielczości, na których logotypy wielkości 1:1 wyglądają na rozmazane. Na szczęście w prosty sposób można sprawdzić jakiej wielkości grafikę potrzebujemy.

Na początek klikamy „wybierz logo” i wgrywamy z dysku naszego komputera dowolną, w miarę dużą grafikę. Możemy także wybrać ją z biblioteki mediów już dodanych na stronę, jeśli jakieś już się tam znajdują.

W kolejnym etapie, przycinamy grafikę aby proporcjami była zbliżona do naszego logotypu i umieszczamy na stronie.

Teraz w podglądzie strony najeżdżamy na nią myszką, klikamy prawym przyciskiem myszy i wybieramy z menu podręcznego „zbadaj”. Ja akurat korzystam z przeglądarki Chrome więc w innych przeglądarkach ta opcja może się nazywać inaczej.

W pasku, który pojawił się na dole strony najeżdżamy myszką na podświetlony element a następnie odczytujemy szerokość obrazka, którą widać obok niego.

Ewentualnie możemy także kliknąć zakładkę „Computed” i odczytać wymiary stamtąd.

To jednak nie wszystko. Otóż wielkość obrazka może być inna kiedy strona będzie wyświetlana na telefonach komórkowych lub tabletach. Aby to sprawdzić klikamy ikonę w rogu ekranu i każdorazowo sprawdzamy wymiary obrazka dla każdego urządzenia.

Jak widać, największe logo jest na tabletach a jego szerokość wynosi 248 pikseli. Dlatego logo, które dodamy, powinno być dwukrotnie większe i mieć szerokość 496 pikseli.

Ja już mam takie przygotowane. Dodam je i za chwilę przejdziemy do kolejnego etapu.

Dodanie fawikony

Teraz musimy dodać fawikonę, czyli kwadratową ikonę, którą mogą Państwo kojarzyć z zakładek w przeglądarce internetowej. Nie jest to jednak jedyne zastosowanie fawikony. Otóż może ona jeszcze być użyta np. w ikonie skrótu do strony internetowej, zapisanej na pulpicie smartfona. Z tego też powodu, nasza fawikona powinna mieć ściśle określone i to całkiem spore wymiary 512 x 512 pikseli. W tym wypadku jest to więc więcej nawet niż ma samo logo.

Ja już mam przygotowany plik o takich wymiarach. Dodanie go do strony przebiega tak samo jak dodanie logotypu.

Na zakończenie ukryję tytuł i opis witryny i opublikuję zmiany.