Generator favicon: z obrazka, tekstu lub emoji

Generator favicon w przeglądarce: wybierz litery, emoji lub logo, ustaw kolor i kształt, pobierz wszystko jako ZIP: favicon.ico, wszystkie rozmiary PNG, site.webmanifest i gotowy kod HTML. Wszystko powstaje bezpośrednio w przeglądarce.

Pliki są przetwarzane tylko w Twojej przeglądarce i nie są nigdzie wysyłane – nie opuszczają Twojego urządzenia.

Źródło faviconu
Jeden lub dwa znaki pozostają czytelne przy 16 × 16 px.
Nazwa i ścieżka (manifest)
„/” = katalog główny strony (zalecane).

Podgląd i pliki

    HTML do sekcji <head>
    site.webmanifest

    Wynik

    Jak to obliczamy

    Favicon to mała ikona na karcie przeglądarki, w zakładkach, w historii i obok Twojej strony w wynikach wyszukiwania Google. Ten generator favicon zamienia obrazek, jedną do trzech liter lub emoji we wszystkie pliki, których dziś potrzebuje strona internetowa – razem z kodem HTML.

    Jakie pliki i rozmiary?

    PlikRozmiarZastosowanie
    favicon.ico16, 32, 48 pxklasyczny favicon; przeglądarki pobierają /favicon.ico nawet bez znacznika HTML
    favicon-16x16.png, favicon-32x32.png16 i 32 pxkarta przeglądarki, zwykła i wysoka rozdzielczość
    apple-touch-icon.png180 pxikona, gdy ktoś doda stronę do ekranu głównego iPhone’a lub iPada
    android-chrome-192x192.png, -512x512.png192 i 512 pxmanifest aplikacji webowej: ekran główny i ekran powitalny na Androidzie/w Chrome
    site.webmanifest–nazwa, kolory i ikony strony jako instalowalnej aplikacji webowej

    Do faviconu w wynikach wyszukiwania Google wymaga kwadratowego obrazka o wymiarach co najmniej 8 × 8 pikseli i zaleca większy niż 48 × 48 pikseli. Chrome oczekuje w manifeście ikon 192 i 512 pikseli, a Apple podaje 180 × 180 pikseli dla ikony na ekranie głównym iPhone’a.

    Jak dodać favicon do strony

    1. Pobierz i rozpakuj plik ZIP.
    2. Wgraj wszystkie pliki do katalogu głównego strony (tam, gdzie jest strona startowa).
    3. Wklej kod HTML do sekcji <head> każdej podstrony (WordPress, Wix, Squarespace i inne mają zwykle zamiast tego ustawienie „Ikona witryny”).

    Jeśli pliki leżą w podfolderze, wpisz go w polu „Folder na serwerze” – manifest i HTML dopasują się automatycznie. Przeglądarki uparcie trzymają favicony w pamięci podręcznej; nowa ikona często pojawia się dopiero po wyczyszczeniu cache lub w oknie prywatnym.

    Jaki favicon jest dobry?

    Emoji jako favicon – uwaga na licencję

    Emoji jest rysowane czcionką emoji zainstalowaną na Twoim urządzeniu – dlatego na iPhonie wygląda inaczej niż na Windowsie czy Androidzie. Standard Unicode określa tylko, jaki znak chodzi, a nie jak wygląda. Grafika należy do producenta czcionki (np. Apple, Microsoft, Google), a ich licencje nie pozwalają po prostu używać tych obrazków jako logo czy faviconu strony.

    Przy prywatnej stronie ryzyko jest niewielkie; na stronie komercyjnej użyj otwarcie licencjonowanego zestawu emoji i przestrzegaj jego warunków:

    Pobierz tam wybrane emoji jako PNG lub SVG i wybierz tutaj „Obrazek / logo”. To ogólna informacja, a nie porada prawna.

    Prywatność

    Wszystkie pliki powstają w przeglądarce. Obrazek nie jest nigdzie wysyłany ani zapisywany. Do przygotowania logo przydadzą się konwerter zdjęć i zmiana rozmiaru zdjęcia.

    Najczęściej zadawane pytania

    Jaki rozmiar powinien mieć favicon?

    16 × 16 i 32 × 32 piksele na kartę przeglądarki, co najmniej 48 × 48 (kwadrat) dla Google, 180 × 180 dla urządzeń Apple oraz 192 × 192 i 512 × 512 dla Androida i aplikacji webowych. Generator tworzy wszystkie rozmiary naraz.

    Czy nadal potrzebuję favicon.ico?

    Warto go mieć: wiele przeglądarek, czytników RSS i narzędzi pobiera /favicon.ico bezpośrednio, bez znacznika HTML. Plik ICO z tego generatora zawiera obrazy PNG 16, 32 i 48 pikseli.

    Jak dodać favicon do strony?

    Wgraj pliki do katalogu głównego strony i wklej kod HTML do sekcji <head>. W WordPressie możesz też użyć „Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny” z plikiem PNG 512 px.

    Czy mogę użyć emoji jako faviconu?

    Grafiki emoji od Apple, Microsoftu czy Google należą do tych firm. Na strony komercyjne użyj otwarcie licencjonowanego zestawu, np. Twemoji (CC BY 4.0, z podaniem autora) lub Noto Emoji (OFL 1.1), i wgraj tutaj ten obrazek.

    Dlaczego nie widzę nowego faviconu?

    Przeglądarki długo przechowują favicony w pamięci podręcznej. Otwórz stronę w oknie prywatnym lub wyczyść cache. W wynikach Google zmiana może potrwać od kilku dni do kilku tygodni.

    Czy moje logo jest wysyłane?

    Nie. Wszystkie pliki powstają w przeglądarce; obrazek nigdy nie opuszcza urządzenia.

    Źródła i podstawa prawna

    Stan na:

    Podobne narzędzia