PAKIET IKON FAVICON & PWA

Generator Favicon & SVG Dark-Mode

Przekształcaj logo SVG w kompletny, wieloplatformowy pakiet favicon z automatycznym wstrzykiwaniem stylów CSS dla trybu ciemnego, bezpiecznymi marginesami Apple i manifestami.

1. Źródłowy kod SVG

2. Podgląd na żywo i kod HTML

Podgląd w kartach przeglądarki

Light Tab · StackHal

Dark Tab · StackHal

Zalecane tagi HTML link

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

3. Wygenerowane zasoby wieloplatformowe

File	Type	Size / Purpose	Description
favicon.svg	image/svg+xml	vector / json	Vector favicon supporting light and dark mode via embedded CSS @media (prefers-color-scheme: dark).
favicon.ico	image/x-icon	16x16, 32x32, 48x48	Legacy fallback multi-resolution ICO file for legacy desktop browsers and RSS readers.
apple-touch-icon.png	image/png	180x180	Apple iOS Home Screen bookmark icon with Apple HIG safe-zone padding.
icon-192.png	image/png	192x192 any	Standard Android Chrome PWA home screen icon.
icon-512.png	image/png	512x512 any	High-resolution PWA splash screen icon.
icon-maskable-512.png	image/png	512x512 maskable	Android Adaptive icon with 10% safe zone boundary to prevent clipping in squircle/circle masks.
site.webmanifest	application/manifest+json	vector / json	Standard Web App Manifest JSON registering icons and theme color.

Diagnostics

[INFO_DARK_MODE_INJECTED] Dark-Mode CSS Injected: Added prefers-color-scheme dark styling to ensure visibility on dark browser tab bars.

[INFO_MASKABLE_SAFE_ZONE] Adaptive Mask Safe-Zone Applied: Scaled icon inside 80% inner core with 10% outer padding for Android maskable icon.

Najczęściej zadawane pytania

Dlaczego warto używać favicon SVG z wbudowanym CSS dla trybu ciemnego?

Współczesne przeglądarki (Chrome, Safari, Firefox, Edge) obsługują ikony SVG z regułą @media (prefers-color-scheme: dark), co pozwala ikonie automatycznie dostosowywać kontrast do motywu systemu i paska kart przeglądarki.

Czym jest margines bezpieczeństwa Android Adaptive Icon?

Ikony adaptacyjne / maskowalne Androida wymagają 10% zewnętrznego marginesu bezpieczeństwa (rdzeń 80% obszaru), aby grafika nie została obcięta przez okrągłe lub zaokrąglone maski launchera.

Czy plik favicon.ico jest nadal potrzebny w 2026 roku?

Tak. Starsze przeglądarki desktopowe, czytniki RSS, narzędzia do zakładek i boty nadal odpytują o plik /favicon.ico w katalogu głównym domeny.

Czy mój plik SVG jest zapisywany na serwerze?

Nie. Generator działa deterministycznie w pamięci roboczej i nie zapisuje ani nie przetwarza przekazywanych grafik w celach innych niż jednorazowy zwrot odpowiedzi.