Czy nadal potrzebuję favicon.ico?

Nowoczesne przeglądarki czytają PNG, ale ICO nadal obsługuje starsze narzędzia i ma domyślną lokalizację w katalogu głównym, więc warto go mieć.

Kwadratowy, z prostym kształtem. Szczegóły giną w rozmiarze 16 pikseli, więc logo z napisem warto uprościć do znaku.

Co z ikonami typu maskable?

To narzędzie nie tworzy ikon maskable. Jeśli ich potrzebujesz, przygotuj grafikę z bezpiecznym marginesem i dodaj osobny wpis w manifeście.

Dlaczego pliki pobieram po jednym?

Żeby narzędzie było lekkie i działało bez dodatkowych bibliotek. Paczkę ZIP możemy dodać, jeśli będzie taka potrzeba.

Darmowe narzędzia online

Generator favicon i manifestu

Wgraj logo lub grafikę, a narzędzie przygotuje ikony w rozmiarach potrzebnych przeglądarkom, iOS i Androidowi, plik favicon.ico, manifest i gotowy kod HTML.

Wgraj obrazek

PNG, JPG, WebP lub SVG. Obraz nie opuszcza przeglądarki.

Przezroczyste tło

Kolor tła

Margines: 0%

Kod HTML do sekcji head

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Manifest aplikacji (site.webmanifest)

{
  "name": "",
  "short_name": "",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Dane nie opuszczają Twojej przeglądarki. Nic nie wysyłamy na serwer.

Jak korzystać

Wgraj kwadratowy obrazek PNG, JPG, WebP lub SVG, najlepiej co najmniej 512 × 512 px.
Wybierz przezroczyste tło albo kolor oraz margines wokół logo.
Pobierz potrzebne pliki i umieść je w katalogu głównym witryny.
Wklej kod HTML do head i dostosuj manifest.

Jakie pliki powstają

Dostaniesz ikony PNG 16, 32 i 48 px dla przeglądarek, apple-touch-icon 180 px dla iOS oraz ikony 192 i 512 px dla Androida i aplikacji instalowanych z przeglądarki. Dodatkowo plik favicon.ico zawierający rozmiary 16, 32 i 48 px.

Tło i margines

Ikony na iOS nie mają przezroczystości, więc przy przezroczystym tle system dołoży czarne. Dla apple-touch-icon wybierz kolor tła. Niewielki margines sprawia, że logo nie dotyka krawędzi przy zaokrąglaniu.

Prywatność plików

Obraz jest przetwarzany lokalnie w przeglądarce przez element canvas. Nie przesyłamy go na serwer, więc możesz użyć grafiki, której jeszcze nie publikujesz.

Najczęstsze pytania

Pokrewne narzędzia

Potrzebujesz więcej niż narzędzia?

Jeśli stoi za tym większy projekt, strona, sklep albo aplikacja, opisz go w krótkim briefie. Odpowiadamy konkretnie i bez zobowiązań.

Opisz projekt