Generator favicon
Wrzuć logo do generatora favicon, a dostaniesz komplet plików: od ikony 16 px w karcie przeglądarki po ikonę aplikacji 512 px, razem z kodem HTML do wklejenia. Wszystko dzieje się w twojej przeglądarce, więc obraz nigdy nie trafia na serwer.
Qwyzzle
Summit Roasters
Fox EsportsUpuść tutaj swoje logo
PNG, JPG, WebP albo SVG. Najlepiej kwadratowy obraz, 512 px lub większy.
Wszystko powstaje w twojej przeglądarce. Obraz nigdy nie jest wysyłany.
Czym jest favicon i gdzie go widać
Favicon to mała kwadratowa ikona, która reprezentuje twoją stronę. Nazwa to skrót od angielskiego „favorite icon”, czyli „ulubiona ikona”: pierwsza przeglądarka, która pokazywała takie ikony, umieszczała je obok zakładek, nazywanych w niej Ulubionymi.
Widać go w kartach przeglądarki, obok tytułu strony: ma 16 pikseli szerokości, a na ostrzejszym ekranie 32. Oznacza też twoją stronę w zakładkach i historii przeglądania. Gdy ktoś zapisze twoją stronę na ekranie głównym telefonu, favicon staje się ikoną aplikacji. A Google pokazuje go obok nazwy twojej strony w wynikach wyszukiwania.
Wszędzie ma to samo zadanie: dać się rozpoznać na pierwszy rzut oka wśród innych ikon.
Dlaczego jeden favicon to cały zestaw plików
Każde z tych miejsc pojawiło się w innym czasie i wymaga własnego pliku. Generator favicon powyżej robi je wszystkie z jednego obrazu.
Karty przeglądarki, zakładki i historia korzystają z favicon.ico: jednego pliku, w którym są wersje 16, 32 i 48 pikseli. To najstarszy format: gdy strona nie wskazuje żadnej ikony, przeglądarki nadal szukają favicon.ico w głównym folderze witryny.
Jeśli zaczniesz od SVG, dostaniesz też favicon.svg. Przeglądarki, które potrafią wyświetlać ikony SVG, używają go zamiast favicon.ico. Plik SVG składa się z kształtów, a nie z pikseli, więc jest ostry na każdym ekranie.
iPhone’y i iPady korzystają z apple-touch-icon.png, kwadratu 180 na 180 pikseli, gdy ktoś dodaje twoją stronę do ekranu głównego. iPhone wypełnia przezroczyste miejsca czernią, więc ta ikona zawsze dostaje jednolite tło: w twoim kolorze albo białe, jeśli wybierzesz przezroczyste.
Telefony z Androidem i strony zainstalowane z przeglądarki jako aplikacje korzystają z icon-192.png i icon-512.png. Znajdują je dzięki site.webmanifest, małemu plikowi tekstowemu, który podaje przeglądarkom nazwę twojej strony (jeśli wpiszesz ją w narzędziu) i miejsce, w którym leżą większe ikony.
Osobne pliki PNG od 16 do 48 pikseli to zapas dla usług, które chcą dostać PNG. Do wyników wyszukiwania Google odczytuje linki do ikon z kodu HTML twojej strony głównej.
Jak dodać favicon do strony
Jeśli edytujesz pliki strony albo robi to twój programista, wystarczą dwa kroki.
Najpierw rozpakuj pobrane archiwum zip i umieść pliki w głównym folderze strony, czyli tym najwyższym, w którym leży strona główna. Żeby to sprawdzić, dopisz /favicon.ico do adresu swojej strony: powinna się otworzyć ikona.
Potem wklej linie HTML z pliku README (narzędzie też je pokazuje) do sekcji head swoich stron, czyli części na początku kodu HTML, w której jest tytuł strony. Jest tam po jednej linii dla pliku ICO, ikony Apple Touch i manifestu, a jeśli masz SVG, także dla niego.
Zwykle wszystkie strony korzystają z jednego szablonu, więc wklejasz je tylko raz. Najpierw usuń starsze linie z ikonami, bo inaczej przeglądarki mogą dalej wybierać starą ikonę.
W kreatorze stron oba kroki możesz pominąć: prześlij icon-512.png w ustawieniach ikony witryny, a kreator sam doda kod HTML.
Jak sprawić, żeby logo działało w 16 pikselach
W rozmiarze 16 na 16 cała twoja ikona to 256 malutkich kwadracików koloru. Większość logo nie powstała z myślą o takim rozmiarze.
Zacznij od symbolu, nie od nazwy: wciśnij ośmioliterową nazwę w 16 pikseli, a każda litera dostanie dwa piksele szerokości. Nie masz symbolu? Użyj pierwszej litery, dużej i grubej. Grube litery znoszą pomniejszanie dużo dłużej niż cienkie.
Potem usuń szczegóły. Bardzo cienkie linie i małe prześwity zlewają się z otoczeniem, a slogan zamienia się w smugę.
Liczy się kontrast jasnego z ciemnym, a nie same kolory. Karty są jasne albo ciemne zależnie od motywu, a granatowa ikona znika na ciemnym pasku kart. Jeśli twój znak jest ciemny, daj mu w narzędziu jasne tło, a jeśli jasny, to ciemne.
Margines, czyli odstęp między logo a krawędzią kwadratu, to kompromis. Za duży, a logo w karcie się kurczy. Za mały, a iPhone, który zaokrągla ikony na ekranie głównym, przytnie rogi logo.
Na koniec obejrzyj powyżej podglądy jasnej i ciemnej karty w prawdziwym rozmiarze, bez powiększania. Nasz darmowy test logo idzie dalej: zmniejsza logo do 32 pikseli i mierzy, ile szczegółów przetrwało.
Kiedy narysować znak od nowa, zamiast go zmniejszać
Czasem nic go nie uratuje. W szczegółowej ilustracji albo w efekcie 3D opartym na cieniowaniu to właśnie szczegóły są projektem, a w 16 pikselach znikają. To narzędzie zmieni rozmiar logo, ale nie narysuje go od nowa.
To nie znaczy, że logo jest złe, tylko że powstało z myślą o większych miejscach. Narysuj celowo małą wersję: uproszczony symbol albo inicjał w czcionce twojej marki. Zachowaj kolory i coś z kształtu, a ludzie skojarzą jedno z drugim. Naszym zdaniem wyraźny inicjał zawsze wygrywa z rozmytą miniaturą.
Potrzebujesz nowego znaku? Nasz generator logo AI zaprojektuje go na podstawie nazwy twojej marki i, jeśli chcesz, krótkiego opisu. Loga z naszych szablonów logo mają symbol w osobnym pliku, jeśli projekt go zawiera, a każde logo kupione u nas ma w zestawie favicony.
Pytania o favicony
Jest darmowy, bez rejestracji i bez znaku wodnego. Twój obraz też zostaje u ciebie. Narzędzie działa w całości w twojej przeglądarce: tworzy wszystkie rozmiary i plik zip bezpośrednio na twoim urządzeniu, a obraz nigdy nie trafia na nasze serwery. Możesz więc spokojnie użyć go z logo, którego jeszcze nikt nie widział.
Kwadratowy, o boku co najmniej 512 pikseli. Największa ikona w zestawie ma 512 pikseli, więc mniejszy PNG, JPG albo WebP trzeba do niej rozciągnąć, a duże ikony wychodzą nieostre. Narzędzie powie ci, kiedy tak się dzieje. SVG nie ma tego ograniczenia: składa się z kształtów, a nie z pikseli, więc jest ostry w każdym rozmiarze. Szerokie logo wypełnia tylko wąski pasek kwadratu, więc zacznij od symbolu albo inicjału.
Wszystkie naraz, bo różne przeglądarki i telefony proszą o różne pliki, a kod HTML z narzędzia mówi każdemu z nich, którego pliku użyć. Plik ICO rozumie każda przeglądarka. Pliki PNG są dla telefonów i zainstalowanych aplikacji, z zapasem w małych rozmiarach. SVG, który dostajesz, gdy zaczynasz od SVG, jest ostry na każdym ekranie w przeglądarkach, które go obsługują.
Najpewniej przeglądarka pokazuje zapisaną kopię. Przeglądarki trzymają favicony dużo dłużej niż resztę strony, więc stara ikona może zostać, nawet gdy nowe pliki są już online. Spróbuj twardego odświeżenia, które wczytuje stronę bez zapisanych plików: Ctrl+Shift+R w Windows, Cmd+Shift+R na Macu (Option+Cmd+R w Safari). Jeśli to nie pomoże, otwórz adres swojej strony z /favicon.ico na końcu i odśwież go albo zajrzyj na stronę w oknie prywatnym. U innych osób nowa ikona też pojawi się z czasem.
Do ustawień kreatora, a nie do folderu. Większość kreatorów stron i platform sklepów internetowych ma w ustawieniach miejsce na ikonę witryny albo favicon, do którego przesyłasz jeden kwadratowy plik PNG. Wybierz icon-512.png, największy plik w archiwum zip, żeby kreator miał z czego robić mniejsze rozmiary. Jeśli ustawienie wymaga konkretnego rozmiaru, użyj pasującego pliku. Kreatory same dodają kod HTML, więc README możesz pominąć.
Google zauważa nowy favicon, gdy jego robot, czyli program, który czyta strony internetowe dla Google, znowu odwiedzi twoją stronę główną. Nie ma na to stałego terminu. Google potrzebuje kwadratowego obrazu i linku do ikony w kodzie HTML strony głównej, więc sprawdź, czy oba są na miejscu. Potem to, co i kiedy pokaże, zależy już od Google, więc daj mu trochę czasu.
Nie masz jeszcze logo? Zacznij od niego.
Zaprojektuj je w naszym generatorze logo AI albo z szablonu w kreatorze logo. Każde logo pobrane z DepthLogo ma już w zestawie favicony.