Jak utworzyć Faviconę
Nowoczesna favikona to coś więcej niż obraz o wymiarach 16×16. Oto pełny proces konfiguracji, który wygląda wyraźnie w każdej przeglądarce, systemie operacyjnym i urządzeniu.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Co to jest favikona?
Favikona to mała ikona wyświetlana przez przeglądarkę na karcie, pasku zakładek i liście historii. Na urządzeniach mobilnych jest to ikona na ekranie głównym. W Windows jest to ikona skrótu.
Nowoczesne witryny oferują wiele rozdzielczości i formatów, dzięki czemu każda powierzchnia jest wyraźnie renderowana.
Przygotuj obraz źródłowy
Zacznij od kwadratowego obrazu o wymiarach co najmniej 512 × 512 — najlepiej SVG z kwadratem viewBox. Wszystko mniejsze będzie rozmyte po zmniejszeniu.
Unikaj cienkich linii i małego tekstu. Znikają w 16×16.
Wygeneruj plik .ico o wielu rozmiarach
Pakiet 16, 32, 48, 64, 128 i 256 w pojedynczym favicon.ico. Przeglądarki automatycznie wybierają odpowiedni rozmiar.
Nasz generator favicon robi to po stronie klienta w mniej niż sekundę.
Dodaj tagi HTML
Upuść favicon.ico w katalogu głównym swojej witryny. Następnie dodaj ikony SVG, apple-touch-icon i manifestu w <head>, aby uzyskać pełną konfigurację.
Sprawdź w każdej przeglądarce
Twarde odświeżanie w Chrome, Safari, Firefox i Edge. Sprawdź pasek zakładek, kartę i instalację na ekranie głównym.
FAQ
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.