Jak poprawnie umieszczać logo na stronie internetowej i w wersji mobilnej

Logo firmy najczęściej umieszcza się w nagłówku, blisko głównej nawigacji, aby odbiorca mógł rozpoznać markę i wrócić do początku serwisu. Wybór lewej lub centralnej pozycji zależy od układu menu, szerokości nagłówka i celu strony; położenie powinno pozostać spójne na podstronach.

Tabela odpowiada na pytanie, gdzie umieścić logo w zależności od rodzaju strony i sposobu nawigacji.

Tabela pokazuje typowe ustawienia, które trzeba dopasować do konkretnej nawigacji. Priorytetem pozostaje łatwe rozpoznanie marki i znalezienie menu.

W serwisie z boczną nawigacją logo może znaleźć się nad menu, jeśli układ zachowuje jasną hierarchię. W sklepie warto odsunąć znak od wyszukiwarki, koszyka i przycisku konta, aby elementy nie zlewały się w jeden obszar. Landing page może mieć uproszczony nagłówek, ale odbiorca nadal powinien rozpoznać firmę bez przewijania.

Przy planowaniu całego układu strony pomagają zasady z poradnika jak założyć stronę internetową. Jeśli serwis firmowy wymaga zaprojektowania nagłówka razem z nawigacją, strony internetowe dla firm obejmują przygotowanie układu dopasowanego do treści i celów biznesowych.

Logo w nagłówku powinno prowadzić do strony głównej, jeśli użytkownik oczekuje prostego powrotu do początku serwisu. Link do strony głównej jest powszechnym wzorcem nawigacyjnym, więc nie należy zmieniać jego celu zależnie od podstrony.

Link powinien być dostępny klawiaturą i mieć widoczny stan fokusu, czyli oznaczenie elementu aktualnie wybranego klawiszem Tab. Osoba korzystająca z czytnika ekranu musi usłyszeć markę i cel przejścia. W3C wskazuje, że gdy klikalne logo jest jedyną zawartością linku, tekst alternatywny powinien opisać cel, na przykład "Nazwa firmy - strona główna".

Jeśli obok obrazu znajduje się tekst "Nazwa firmy - strona główna" w tym samym linku, ustaw pusty tekst alternatywny obrazu, aby czytnik ekranu nie powtarzał tej samej informacji. Nie otwieraj strony głównej w nowej karcie po kliknięciu logo bez konkretnego powodu, ponieważ użytkownik zwykle oczekuje nawigacji w bieżącej karcie. W3C opisuje oba przypadki w wytycznych dotyczących obrazów funkcjonalnych: Functional Images.

Logo na telefonie powinno zachować czytelność i nie spychać nawigacji poza szerokość nagłówka. Nie istnieje jeden uniwersalny wymiar dla każdego serwisu, ponieważ szerokość zależy od proporcji znaku, fontu, menu i sąsiednich przycisków.

Przygotuj wersję poziomą do szerokiego nagłówka oraz wariant uproszczony, jeśli pełny znak staje się nieczytelny przy wąskim ekranie. Wariant uproszczony powinien nadal zachowywać rozpoznawalny element identyfikacji, na przykład sam symbol, a nie przypadkowo ucięty fragment logotypu. Margines ochronny utrzymuje odstęp między logo a sąsiednimi elementami; przy braku księgi znaku określ go na podstawie proporcji symbolu i sprawdź, czy nawigacja nie narusza tej przestrzeni.

Testuj widok szeroki, tabletowy i wąski telefon. Sprawdź ekran o szerokości 320 px, bo przy takim układzie szybciej widać kolizję logo z menu, przyciskiem kontaktu lub koszykiem. Zweryfikuj też, czy menu mobilne nie pokazuje drugiej instancji znaku, czy logo nie jest przycięte przez kontener oraz czy zmiana orientacji telefonu nie psuje układu.

Wymiary źródła i rozmiar wyświetlania oznaczają różne rzeczy. Wymiary źródła to szerokość i wysokość pliku rastrowego w pikselach, natomiast rozmiar wyświetlania określa obszar zajęty przez logo na stronie. Zachowaj proporcje obrazu podczas skalowania i nie rozciągaj go osobno w pionie ani poziomie.

SVG sprawdza się przy logo przygotowanym jako grafika wektorowa, ponieważ można je skalować bez utraty ostrości. WebP i PNG są opcjami dla pliku rastrowego; PNG obsługuje przezroczystość, a WebP może zmniejszyć wagę pliku przy jakości odpowiedniej dla znaku.

Tabela porównuje formaty logo według zastosowania, ostrości, przezroczystości i uwag wdrożeniowych.

Tabela pomaga dopasować format do rodzaju pliku źródłowego i sposobu wdrożenia. Dla znaku wektorowego wybierz SVG, a gdy dostępny jest tylko raster, porównaj WebP i PNG na rzeczywistym tle nagłówka.

Dla rastra przygotuj źródło większe niż jego docelowy rozmiar wyświetlania, jeśli witryna pokazuje logo na ekranach o większej gęstości pikseli. Nie ustalaj jednej liczby pikseli dla wszystkich marek; proporcje i szczegółowość znaku wpływają na czytelność po zmniejszeniu. Google Search obsługuje między innymi formaty SVG, WebP i PNG w obrazach, ale sam format nie gwarantuje widoczności w wynikach. Aktualną listę formatów podaje dokumentacja Google Search Central - Image SEO Best Practices.

Logo należy sprawdzić na jasnym, ciemnym i fotograficznym tle, jeśli takie warianty występują w nagłówku. Znak powinien zachować rozpoznawalny kształt, gdy nagłówek jest przezroczysty, przykleja się do górnej krawędzi albo zmienia kolor podczas przewijania.

Przygotuj warianty znaku na jasne i ciemne tło, jeśli podstawowe kolory zlewają się z otoczeniem. Na zdjęciu umieść logo na spokojnym fragmencie obrazu lub zastosuj jednolite pole pod znakiem. Obrys albo cień wykorzystuj tylko wtedy, gdy nie zmieniają proporcji i pozostają zgodne z identyfikacją marki.

W3C opisuje wyjątek od części wymagań kontrastu dotyczących tekstu i obrazów tekstowych dla logo. Wyjątek nie poprawia czytelności menu, przycisków ani wskaźnika fokusu. Przetestuj każdy z tych elementów osobno, zwłaszcza gdy nagłówek leży na fotografii lub zmienia tło po przewinięciu.

W motywie blokowym WordPress ustawisz logo przez Wygląd > Edytor, a następnie w sekcji Tożsamość albo w bloku Logo witryny. Dokumentacja WordPress potwierdza, że sekcja Tożsamość jest dostępna w Edytorze witryny po aktywowaniu motywu blokowego; nazwy i dostępne ustawienia zależą od motywu.

Po zaznaczeniu bloku Logo witryny otwórz panel ustawień, wybierz obraz z biblioteki mediów lub prześlij plik i sprawdź ustawienie linku do strony głównej. Dokumentacja bloku opisuje również opcję użycia obrazu logo jako ikony witryny, ale favicon i logo w nagłówku pełnią różne funkcje. Ścieżkę i dostępne opcje opisują instrukcje Site Editor Identity oraz Site Logo block.

W klasycznym motywie sprawdź Wygląd > Dostosuj > Tożsamość witryny; ta ścieżka może nie występować w motywie blokowym. Elementor i inne kreatory stron mogą przechowywać logo w szablonie nagłówka, dlatego po zmianie sprawdź szablon przypisany do całej witryny, a nie tylko stronę startową. Opublikuj zmianę po sprawdzeniu strony głównej, typowej podstrony i widoku mobilnego.

Jeśli obraz jest jedyną zawartością linku, ustaw dostępną nazwę opisującą markę i cel. Jeśli tekst obok już przekazuje tę informację, pusty tekst alternatywny obrazu może zapobiec powtórzeniu przez czytnik ekranu.

Najczęstsze błędy to zbyt duże logo, rozmycie po powiększeniu, brak odstępu od sąsiednich elementów i nieczytelny wariant na telefonie. Każdy z tych problemów utrudnia orientację w nagłówku albo obniża jakość identyfikacji marki.

Sprawdź, czy w nagłówku nie pojawia się znak z szablonu oraz druga kopia dodana ręcznie w treści. Zweryfikuj, czy odnośnik prowadzi do strony głównej, a logo nie jest tylko obrazem bez działania. Przy jedynym linku logo pusty tekst alternatywny pozbawia użytkownika czytnika ekranu informacji o celu przejścia.

Nie rozwiązuj problemu szerokości przez przypadkowe zmniejszenie logo do rozmiaru, w którym nazwa firmy przestaje być czytelna. Jeśli nagłówek nie mieści pełnego wariantu, użyj przygotowanej wersji uproszczonej i sprawdź, czy menu oraz główna akcja pozostają widoczne. Unikaj osobnych plików mobilnych i desktopowych, które różnią się kolorem lub proporcjami bez uzasadnienia w księdze znaku.

Przed publikacją sprawdź logo na kilku szerokościach, tłach i podstronach, a następnie przejdź nagłówek klawiaturą. Link musi prowadzić do właściwej strony, a jego dostępna nazwa powinna wyjaśniać cel.

Checklista odbioru logo:

• Porównaj widok szeroki, tabletowy i telefon o szerokości 320 px.
• Otwórz stronę główną oraz typową podstronę z tym samym nagłówkiem.
• Sprawdź jasne, ciemne i fotograficzne tło, jeśli występują w projekcie.
• Przejdź do logo klawiszem Tab i sprawdź widoczny fokus.
• Odczytaj nazwę linku czytnikiem ekranu.
• Zweryfikuj ostrość pliku, proporcje i czas ładowania nagłówka.
• Upewnij się, że logo nie powiela się w menu mobilnym.

Jeśli przebudowujesz nawigację, przeczytaj poradnik o projektowaniu nawigacji strony. Przed zleceniem serwisu sprawdź też, na co uważać przy zamawianiu strony internetowej. Jeśli potrzebujesz wdrożenia projektu firmowego z responsywnym nagłówkiem, projekt strony internetowej dla firmy może objąć także kontrolę logo na podstronach i urządzeniach mobilnych.

• Jak dobrać kolorystykę strony internetowej do marki i klientów
• Jak powinna wyglądać atrakcyjna i funkcjonalna strona internetowa?
• Makieta strony internetowej: jak zaprojektować ją krok po kroku
• Jak zaprojektować nawigację na stronie internetowej, by ułatwić klientom dotarcie do oferty