Generator favicon
Prześlij logo i odbierz w jednym ZIP-ie ikony potrzebne Twojej stronie: favicon.ico z obrazami 16, 32 i 48 pikseli, PNG 48 pikseli dla Google, Apple Touch Icon z nieprzezroczystym tłem dla iPhone’a, ikony 192 i 512 pikseli dla Androida, ikonę maskable z wyliczoną bezpieczną strefą i plik site.webmanifest. Jeśli prześlesz SVG, dołączony zostanie też icon.svg. Zobaczysz podglądy karty, wyniku Google i ekranu głównego oraz skopiujesz gotowy kod <head>; całość działa w przeglądarce.
- Za darmo, bez rejestracji
- Plik nigdy nie opuszcza Twojego urządzenia
- Do 50 MB na plik
Aby zacząć, dodaj obraz logo lub ikony. Sprawdzą się PNG, SVG, JPG i WebP; najlepszy efekt da kwadratowy obraz o wymiarach co najmniej 512 × 512 pikseli.
Twój plik nigdy nie opuszcza urządzenia; obrazy są przetwarzane w przeglądarce. Dane EXIF i lokalizacji nie są dodawane do wyniku.
Jak utworzyć favicon
Dodaj logo
Prześlij logo w formacie PNG, SVG, JPG lub WebP. Najlepszy efekt da kwadratowy obraz o wymiarach co najmniej 512 × 512 pikseli; SVG też się sprawdzi.
Ustaw nazwę, kolory i margines
Wpisz nazwę witryny i nazwę skróconą, wybierz kolory motywu i tła, a w razie potrzeby dodaj margines. Podglądy pokazują, jak ikona będzie wyglądać na karcie, w Google i na ekranie głównym.
Pobierz paczkę i umieść pliki
Pobierz ZIP, wgraj pliki do katalogu głównego witryny i dodaj pokazany fragment <head> do swoich stron.
Co zostaje zachowane?
Zachowane
- Proporcje logo: obraz niekwadratowy jest wpasowywany w kwadrat, nigdy rozciągany
- Przezroczystość (w standardowych ikonach; jeśli wybierzesz kolor tła, zostanie nim wypełniona)
- Jeśli prześlesz SVG, icon.svg jest dołączany bez zmian
Zmienione
- Każda ikona jest przepróbkowywana do własnego rozmiaru w wysokiej jakości
- Apple Touch Icon i ikona maskable zawsze mają nieprzezroczyste tło: wybrany kolor albo biały, gdy wybrano „Przezroczysty”
- W ikonie maskable zawartość mieści się w bezpiecznej strefie 80%
Nieprzenoszone
- Z PNG ani JPG nie powstaje wektor (SVG); icon.svg istnieje tylko przy danych wejściowych SVG
- Dane EXIF i inne metadane nie są dodawane do ikon
Kiedy to się przydaje
Komplet ikon dla nowej strony
Pojedynczy favicon.ico już nie wystarcza: ekran główny iPhone’a, Android i wyniki wyszukiwania Google oczekują różnych plików. Jedno przesłanie daje je wszystkie, z właściwymi nazwami i rozmiarami.
Ikona w wynikach wyszukiwania Google
Google pokazuje ikonę witryny w wynikach wyszukiwania na podstawie kwadratowego pliku, którego rozmiar jest wielokrotnością 48 pikseli, a plik ten musi być dostępny dla robotów. Paczka zawiera taki plik wraz z linkiem do <head>.
Strona, którą można dodać jak aplikację (PWA)
Jeśli chcesz, aby stronę dało się dodać do ekranu głównego, potrzebujesz manifestu i ikon 192/512 pikseli. Ikona maskable chroni logo przed obcięciem, gdy Android wycina ikonę w koło lub zaokrąglony kwadrat.
Ograniczenia, które warto znać
- Najlepszy wynik daje kwadratowy obraz o wymiarach co najmniej 512 × 512 pikseli; duże ikony utworzone z mniejszych źródeł wyglądają nieostro.
- Cienkie linie i drobny tekst stają się nieczytelne w ikonach 16 i 32 piksele; lepiej sprawdzają się grube, kontrastowe logo.
- Kolor motywu jest stosowany tylko na pasku adresu mobilnych przeglądarek i zależy od ustawień przeglądarki.
- Google może potrzebować kilku dni, a nawet tygodni, aby zaktualizować ikonę w wynikach wyszukiwania, a przeglądarki również buforują ikony.
Najczęściej zadawane pytania
Jakich plików favicon potrzebuje strona internetowa?
Obecne podejście to: favicon.ico w katalogu głównym, PNG 48 pikseli dla Google, icon.svg, jeśli to możliwe, apple-touch-icon.png 180 pikseli dla iPhone’a, ikony 192 i 512 pikseli dla Androida oraz site.webmanifest. Generator tworzy je wszystkie i podaje linki do <head>.
Czym jest ikona maskable?
Ikona maskable utrzymuje zawartość w bezpiecznej strefie i ma w pełni wypełnione tło, dzięki czemu Android może wyciąć z niej koło, zaokrąglony kwadrat lub inny kształt, zależnie od urządzenia. Tutaj zawartość leży w centralnym obszarze 80% obrazu 512 pikseli.
Dlaczego Apple Touch Icon jest nieprzezroczysty i ma kwadratowe rogi?
iOS pokazuje przezroczyste obszary jako czarne i sam zaokrągla rogi. Dlatego ikona powstaje w pełni wypełniona i bez zaokrąglonych rogów, w wybranym kolorze tła (białym, gdy wybrano przezroczystość).
Dlaczego moja ikona nie pojawia się w wynikach Google?
Plik ikony nie może być blokowany przez robots.txt, musi być podlinkowany w <head> strony głównej i być kwadratem o rozmiarze będącym wielokrotnością 48 pikseli. Po poprawieniu możesz poprosić w Search Console o ponowne zaindeksowanie strony głównej; aktualizacja nadal może potrwać dni lub tygodnie.
Co się stanie, gdy prześlę obraz niekwadratowy?
Ikony są wpasowywane w kwadrat bez zniekształceń, więc po bokach zostaje puste miejsce. Jeśli chcesz, aby kadr wypełnił kwadrat, najpierw przytnij obraz do 1:1 narzędziem do przycinania.
Czy z PNG powstanie favicon w SVG?
Nie. Automatyczna zamiana pikseli na wektor mogłaby po cichu zmienić wygląd ikony, więc icon.svg jest dołączany tylko wtedy, gdy sam prześlesz SVG.
Czy to narzędzie jest darmowe?
Tak, całkowicie. Bez konta, subskrypcji i znaku wodnego.
Czy moje pliki są gdzieś przesyłane?
Nie. Obrazy są przetwarzane w Twojej przeglądarce i nigdy nie opuszczają urządzenia. Dane EXIF i lokalizacji nie są dodawane do wyniku.