SH StackHalStackHal Developer utilities
Tools
PL
All tools Modern Favicon Kitchen & Dark-Mode SVG Suite
FAVICON & PWA ASSET SUITE

Modern Favicon Kitchen & Dark-Mode SVG Suite

Transform SVG brand marks into complete, multi-platform favicon suites with automatic dark-mode CSS injection, Apple safe zones, and webmanifests.

Presets:
1. Source SVG Markup
Local processing · deterministic output
2. Live Preview & HTML Code

Browser Tab Theme Preview

Light Tab · StackHal
Dark Tab · StackHal

Recommended HTML Link Tags

<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. Generated Multi-Platform Assets

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.

Frequently Asked Questions

Why use an SVG favicon with embedded dark-mode CSS?

Modern browsers (Chrome, Safari, Firefox, Edge) support SVG favicons with CSS @media (prefers-color-scheme: dark), allowing your brand icon to dynamically adjust its fill and contrast to match the user's OS and browser chrome theme.

What is the Android Adaptive Icon safe-zone ratio?

Android Adaptive / Maskable icons require a 10% outer safe-zone margin (inner 80% canvas) so that the icon is never clipped by circular or squircle launcher masks.

Do I still need a favicon.ico file in 2026?

Yes. Legacy desktop browsers, RSS readers, bookmarking tools, and crawlers still look for /favicon.ico at the domain root.

Is my SVG uploaded or stored on any server?

No. The generator runs deterministically in memory and does not persist or retain your uploaded artwork.