Generator favicon: utwórz favicon za darmo online

Favicon to mała ikona strony internetowej. Pojawia się na karcie przeglądarki, w zakładkach i jako ikona aplikacji na ekranie głównym smartfona. Aby wszędzie wyglądała ostro, strona potrzebuje kilku rozmiarów: generator favicon tworzy ikony 16, 32 i 48 px w pliku favicon.ico, 180 px dla iOS oraz 192 i 512 px dla Androida.

Generator favicon jest darmowy i nie wymaga konta. Twój obraz nie jest przesyłany: generowanie odbywa się w całości przez Canvas API w Twojej przeglądarce. Nic nie trafia na serwer ani nie jest zapisywane. Obraz może mieć do 15 MB.

Otrzymasz favicon.ico zawierający rozmiary 16, 32 i 48 px, apple-touch-icon.png (180 × 180), android-chrome-192x192.png, android-chrome-512x512.png oraz site.webmanifest. Każdy plik możesz pobrać osobno lub wszystkie razem jako favicon-package.zip. Dostaniesz też fragment kodu HTML o 6 wierszach do sekcji <head> swojej strony. Dołącza on wszystkie pliki i kończy się kolorem motywu — dla #18e888 będzie to na przykład <meta name="theme-color" content="#18e888">.

Nie ma jednego uniwersalnego rozmiaru: karta przeglądarki wyświetla 16 × 16 px, pasek zadań Windows 32 × 32 px, a Eksplorator i skróty 48 × 48 px. iOS używa 180 × 180 px na ekranie głównym, a Android 192 × 192 i 512 × 512 px. Generator tworzy wszystkie te rozmiary z jednego obrazu. Ponieważ drobne szczegóły i dłuższy tekst stają się nieczytelne przy 16 × 16 px, przed dodaniem plików do strony możesz zobaczyć w podglądzie rozmiary 16, 32 i 48 px w rzeczywistej wielkości, a większe ikony w pomniejszeniu.

Prześlij obraz na karcie „Prześlij obraz”. Możesz przesuwać kadr, przeciągając obraz, zmieniać powiększenie od 50 do 250 % i automatycznie przycinać przezroczyste krawędzie. Generator umieszcza rozmiary 16, 32 i 48 px w prawdziwym, wielorozmiarowym pliku favicon.ico oraz tworzy ikony PNG dla iOS i Androida. Najlepiej zacząć od kwadratowego obrazu o wymiarach co najmniej 512 × 512 px, ponieważ taki rozmiar ma największa generowana ikona.

Tak. Na karcie „Tekst lub emoji” możesz wpisać do 4 znaków; najlepiej sprawdza się 1–2 litery lub jedno emoji. Wybierasz kolor tła, kolor tekstu, kształt — zaokrąglony, kwadratowy lub okrągły — oraz rozmiar tekstu od 25 do 80 %. Powstają z nich takie same pliki jak z przesłanego obrazu.

Prześlij favicon.ico, apple-touch-icon.png, obie ikony Android Chrome i site.webmanifest do katalogu głównego swojej strony, ponieważ fragment kodu HTML odwołuje się do ścieżek takich jak /favicon.ico i /site.webmanifest. Następnie skopiuj kod do sekcji <head> swoich stron. Jeśli nie edytujesz sekcji <head> samodzielnie, na przykład w WordPressie, prześlij tam ikonę strony, taką jak android-chrome-512x512.png. Narzędzie nie łączy się bezpośrednio z Twoją stroną ani systemem CMS.

Ten kolor zawsze wypełnia tło ikony Apple Touch, ponieważ iOS nie obsługuje tam niezawodnie przezroczystości. Gdy opcja „Przezroczyste tło” jest wyłączona, wypełnia też tło favicon.ico i ikon Androida. Jest również zapisywany jako theme_color i background_color w pliku site.webmanifest oraz jako metatag theme-color we fragmencie kodu HTML.