Masz logo, a Twoja strona potrzebuje favicon: tego malutkiego obrazka na karcie przeglądarki. Proste, dopóki nie odkryjesz, że przeglądarki, iPhone, telefony z Androidem i Windows chcą każdy swojego rozmiaru i swojego pliku. Generator Favicon GetPlugzz robi to wszystko z jednego obrazu. Wrzucasz logo, naciskasz jeden przycisk i dostajesz favicon.ico, Apple touch icon, ikony Android, kafelek Windows, plik manifestu i kod do wklejenia na swoją stronę. Działa w Twojej przeglądarce, więc nie ma konta ani znaku wodnego i nic nie jest wysyłane.
Jak zrobić favicon we wszystkich rozmiarach z jednego obrazu?
Otwórz Generator Favicon i zrób tak:
- Dodaj obraz. Upuść swoje logo w pole albo kliknij, żeby je wybrać. Najlepiej działa kwadratowy obraz o wymiarach co najmniej 512 × 512 pikseli. Każdy inny zostanie przycięty do kwadratu od środka.
- Sprawdź podgląd. Jeśli Twój obraz ma przezroczyste tło, zostaje ono zachowane, co jest idealne dla logo. Zobaczysz wszystkie rozmiary, które powstaną.
- Pobierz. Naciśnij Pobierz Wszystko (ZIP), żeby dostać wszystkie rozmiary, potem wklej pokazany kod w head swojej strony. Do kodu jest przycisk Kopiuj.
Nie ma nic do ręcznej zmiany rozmiaru ani do instalowania. Jeśli przeglądarka blokuje pobieranie, kliknij Zezwól przy pasku adresu i wszystko idzie dalej.
Dlaczego jeden favicon potrzebuje tylu rozmiarów?
Pomyśl o fotobudce, która drukuje ten sam obraz jako malutką naklejkę, zdjęcie do paszportu i plakat. To ta sama twarz, ale każde miejsce ma własną ramkę. Favicon działa tak samo. Twoje logo pojawia się w różnych miejscach i każde chce innego rozmiaru:
- 16 × 16 i 32 × 32: karta przeglądarki. Ten 32-pikselowy zachowuje ostrość na ekranach o wysokiej rozdzielczości (retina).
- 48 × 48: skróty w Windowsie.
- 150 × 150: kafelek Windows.
- 180 × 180: Apple touch icon, której iPhone i iPad używają, gdy ktoś doda Twoją stronę do ekranu głównego.
- 192 × 192 i 512 × 512: Android, na ekran główny i ekran powitalny (używane też w aplikacjach webowych).
Co jest w pliku ZIP?
Narzędzie robi to wszystko za Ciebie i pakuje w jeden plik:
- favicon.ico: klasyczna ikona na kartach przeglądarki. To prawdziwy plik wielorozmiarowy, z wersjami 16, 32 i 48 w środku.
- favicon-16x16.png, favicon-32x32.png i favicon-48x48.png: małe rozmiary.
- apple-touch-icon.png: ikona dla iPhone'a i iPada.
- android-chrome-192x192.png i android-chrome-512x512.png: ikony dla Androida.
- mstile-150x150.png: kafelek Windows.
- site.webmanifest: mówi przeglądarkom, których ikon użyć.
- head-snippet.html: kod do wklejenia, zapisany jako plik.
Gdzie trafiają pliki?
Wrzuć pliki do głównego folderu swojej strony, a kod z narzędzia wklej w head swoich podstron. To ten kod mówi przeglądarce, gdzie znaleźć każdą ikonę. Dwie małe wskazówki: otwórz site.webmanifest i dopisz nazwę swojej strony, bo zostaje pusta, i zmień kolor motywu, jeśli chcesz coś innego niż biały.
Nie masz jeszcze strony, na którą je wgrasz? Nasz przewodnik po uruchamianiu pierwszej strony obejmuje domenę, hosting i podstrony. Jeśli wolisz nie zaczynać od pustej kartki, AI website builder (link sponsorowany) od Bluehost zawiera hosting, więc miałbyś gdzie umieścić pliki.
Który obraz działa najlepiej?
- Kwadratowy i duży. Zacznij od co najmniej 512 × 512 pikseli. Narzędzie zmniejszy go do wszystkich rozmiarów, więc nigdy nie musisz nic zmieniać sam.
- Wycentrowany. Obraz, który nie jest kwadratowy, jest przycinany do kwadratu od środka, więc ważną część trzymaj na środku.
- Przezroczysty jest w porządku. Jeśli Twoje logo ma przezroczyste tło, ikony je zachowują.
- Prosty wygrywa. Przy 16 pikselach jest bardzo mało miejsca, więc wyrazisty kształt albo pojedyncza litera czyta się lepiej niż szczegółowy rysunek.
Jedno, co warto wiedzieć: jeden obraz naraz
Generator robi wszystkie rozmiary z jednego obrazu naraz. Nie przetwarza wielu różnych logo w jednym przebiegu. Jeśli masz drugą stronę, naciśnij Wybierz inny obraz i zacznij od nowa, zajmuje to kilka sekund.
Warto wiedzieć, zanim zaczniesz
- Obraz, który nie jest kwadratowy, jest przycinany od środka. Użyj kwadratowego obrazu, żeby nic nie zostało ucięte.
- Daj ikonie Apple jednolite tło: iPhone wypełnia przezroczyste obszary czernią.
- Przy 16×16 pikselach drobne szczegóły znikają, więc najlepiej działa prosty kształt.
- Przeglądarki i Google przez jakiś czas pamiętają stare favicony; nowy może pojawić się dopiero po kilku dniach.
- Wpisz nazwę swojej strony w site.webmanifest i wgraj wszystkie pliki do głównego folderu strony.
Często zadawane pytania
Tak. Nie ma konta ani znaku wodnego.
Nie. Ikony powstają w Twojej przeglądarce, a Twój obraz nigdy nie opuszcza Twojego urządzenia.
Zacznij od kwadratowego obrazu o wymiarach co najmniej 512 × 512 pikseli. Narzędzie zmniejszy go do wszystkich potrzebnych rozmiarów, więc nie musisz nic zmieniać sam.
Tak. Jeśli Twoje logo ma przezroczyste tło, w ikonach pozostaje przezroczyste.
Wrzuć je do głównego folderu swojej strony, a kod z narzędzia wklej w head swoich podstron.
Darmowy Generator Favicon — wszystkie rozmiary, jeden obraz
Jeden obraz na wejściu, wszystkie rozmiary ikon na wyjściu: ico, Apple, Android, Windows i kod do wklejenia. Stworzone przez GetPlugzz, robione w całości w Twojej przeglądarce.
