Rozmiar logo na stronę: wszystkie potrzebne wymiary
Rozmiar logo na stronę
Rozmiar logo na stronę: nagłówek, favicona, social media i Google | We.Inc
Jaki rozmiar logo na stronę: wysokość w nagłówku w pikselach CSS, pliki 2x dla retina, SVG czy PNG, a także favicona, Apple touch icon, obraz udostępniania i logo Google.
Nie ma jednego wymaganego rozmiaru logo. W większości nagłówków logo ma na komputerze około 32 do 60 pikseli CSS wysokości, a na telefonach nieco mniej, przy czym szerokość wynika z kształtu logo. Jeśli możesz, użyj SVG; w przeciwnym razie wyeksportuj PNG w dwukrotności rozmiaru wyświetlania, aby pozostało ostre na ekranach o dużej gęstości pikseli.
Rozmiary logo i ikon w skrócie (stan na październik 2026)
Gdzie
Rozmiar
Źródło
Nagłówek strony
Około 32 do 60 px wysokości na komputerze (nasza praktyczna zasada)
Konwencja projektowa, nie standard
Favicona
Kwadrat, co najmniej 8x8 px; zalecana większa niż 48x48 px
Google Search Central
Apple touch icon
180x180 px dla iPhone'a z ekranem retina w przykładzie Apple
Przewodnik Apple po treściach internetowych w Safari
Obraz udostępniania linku (og:image)
Zalecane co najmniej 1200 x 630 px
Meta for Developers
Logo w danych strukturalnych Google
Co najmniej 112x112 px
Google Search Central
Zdjęcia w Profilu Firmy w Google
Zalecane 720 x 720 px, minimum 250 x 250 px, JPG lub PNG
Pomoc Profilu Firmy w Google
Pytania o rozmiar logo zwykle pojawiają się, gdy po uruchomieniu strony logo jest rozmyte albo malutkie. Rozwiązaniem jest myślenie dwiema liczbami: rozmiarem wyświetlania, mierzonym w pikselach CSS, oraz rozmiarem pliku, który powinien być większy. Wgraj poniżej swoje logo, aby zobaczyć oba w nagłówku na komputerze i na telefonie, a nic nie opuści Twojego komputera.
Wybierz plik logo (SVG, PNG, JPG lub WebP). Odczytuje go tylko Twoja przeglądarka.
Przesuń suwak wysokości do rozmiaru, w jakim logo ma się wyświetlać w nagłówku.
Porównaj podgląd na komputerze i telefonie i sprawdź, czy logo jest czytelne w obu.
Przeczytaj raport: pokazuje rozmiar pliku w pikselach i rozmiar potrzebny do ostrego obrazu na ekranach 2x.
Wyeksportuj logo w tym rozmiarze albo jako SVG i ustaw tę samą wysokość w CSS swojej strony.
Ustaw wysokość w CSS, a szerokość zostaw na auto, aby zarówno szerokie, jak i kwadratowe logo zachowało swój kształt.
Dodaj atrybuty width i height do znacznika img, aby przeglądarka zarezerwowała miejsce i strona nie przeskakiwała.
Przytnij puste miejsce wokół logo w pliku; margines wewnątrz obrazu sprawia, że logo wygląda na mniejsze, niż jest.
Trzymaj osobną kwadratową wersję (ikonę lub monogram) na favicony, ikony aplikacji i profile w mediach społecznościowych.
Sprawdź logo także na ciemnym tle, jeśli Twój nagłówek, stopka lub tryb ciemny z niego korzysta.
Najczęściej zadawane pytania
Jaki rozmiar powinno mieć logo w nagłówku strony?
Żaden standard tego nie określa. Orientacyjnie większość nagłówków pokazuje logo o wysokości około 32 do 60 pikseli CSS na komputerze i około 28 do 44 na telefonach. Długi logotyp może być niższy niż zwarty kwadratowy znak. Oceń swoje logo w podglądzie powyżej.
SVG czy PNG na logo strony?
SVG to format wektorowy, więc pozostaje ostry w każdym rozmiarze, a plik często jest bardzo mały. Użyj PNG, gdy logo zawiera fotograficzne detale albo Twoja platforma nie przyjmuje SVG, i wyeksportuj je w dwukrotności rozmiaru wyświetlania.
Czym jest logo 2x albo retina?
Ekrany o dużej gęstości używają więcej niż jednego piksela urządzenia na piksel CSS. Logo wyświetlane w wysokości 40 px wygląda ostro na ekranie 2x, gdy plik ma co najmniej 80 px wysokości. Atrybut srcset znacznika img pozwala podać plik 1x i plik 2x, a wybór zostawić przeglądarce.
Jaki rozmiar ma favicona?
Google podaje, że favicona musi być kwadratowa i mieć co najmniej 8x8 px, a zaleca większą niż 48x48 px. Nasz przewodnik po rozmiarach favicony wymienia popularne pliki i kod HTML do ich podlinkowania.
Jakiego rozmiaru logo używa Profil Firmy w Google?
Wytyczne Google dotyczące zdjęć w Profilu Firmy podają JPG lub PNG, od 10 KB do 5 MB, zalecane 720 x 720 px i minimum 250 x 250 px. Strona pomocy nie podaje osobnych wymiarów logo, więc kwadratowe logo 720 x 720 px to bezpieczny wybór.
Piksele CSS a piksele pliku
Piksel CSS to jednostka, którą wpisujesz w arkuszu stylów. Na standardowym ekranie odpowiada jednemu fizycznemu pikselowi; na telefonie albo laptopie o dużej gęstości może obejmować dwa lub trzy. Dlatego plik logo o wysokości 40 px wygląda miękko na nowoczesnym telefonie: jest rozciągany.
Najpierw ustal więc wysokość wyświetlania, a potem wyeksportuj plik w dwukrotności tej wysokości (albo trzykrotności dla bardzo ostrych ekranów telefonów) lub użyj SVG i pomiń obliczenia.
Szerokie i kwadratowe logo
Szeroki logotyp może wyglądać na duży już przy umiarkowanej wysokości, więc ogranicz jego szerokość na telefonach za pomocą max-width, aby nie wypychał przycisku menu poza ekran.
Kwadratowy lub okrągły znak potrzebuje nieco większej wysokości, by był czytelny, ale zostawia obok miejsce na nazwę firmy w formie tekstu, który łatwiej odczytują też wyszukiwarki i czytniki ekranu.
Znaczniki i CSS logo do skopiowania
Logo w nagłówku ze stałą wysokością i automatyczną szerokością
Wysokość pochodzi z CSS; szerokość wynika z kształtu logo. Atrybuty width i height rezerwują miejsce podczas ładowania.
Logo PNG z plikiem 2x
logo.png ma 44 px wysokości, [email protected] ma 88 px wysokości. Na ekranach o dużej gęstości przeglądarka wybiera plik 2x.
Kwadratowe ikony w sekcji head
Favicona, Apple touch icon i obraz udostępniania, każdy wykonany z kwadratowej wersji Twojego logo.
Podgląd rozmiaru logo
Twój plik logo
Pokazujemy przykładowe logo, dopóki nie wybierzesz pliku.
Wysokość logo w nagłówku: {v} px
Nagłówek na komputerze
Menu
Raport
Rozmiar pliku: {w} x {h} px.
SVG skaluje się bez rozmycia w każdej wysokości.
Aby uzyskać ostry obraz na ekranach 2x przy tej wysokości, plik powinien mieć co najmniej {v} px wysokości.
Twój plik jest wystarczająco duży dla tej wysokości na ekranach 2x.
Twój plik jest mniejszy, więc może wyglądać miękko na ekranach o dużej gęstości.
CSS dla tej wysokości
Twój plik odczytuje tylko Twoja przeglądarka i nigdy nie jest przesyłany.