WeblixTools
Universal Favicon 2.0 • Dynamic Dark/Light SVG & iOS 18 Tinted Icons

Dynamic SVG Favicon Generator

Create vector SVG favicons that adapt seamlessly to light and dark browser themes using native CSS media queries.

Presets:

Icon Configuration

Primary Color
Gradient To
Corner Squircle Radius22%
Square (0%)Apple Squircle (22%)Pill / Circle (50%)
Glyph Padding / Margin12%
Dynamic SVG Dark Mode Overrides

When a user toggles their OS or browser into Dark Mode, this background color activates automatically via CSS:

#0f172a
3D Interactive Master Preview
High-Res Retina Canvas (512x512)

Rendered via zero-latency HTML5 Canvas API with sub-pixel antialiasing and continuous-curvature squircle clipping.

Vector SVGMulti-Res .ICOiOS 18 Xcode

Live Browser Tab Simulator

WeblixTools – Production App
https://weblixtools.com

Mobile Home Screen Simulator

iOS 18 & Android 14+
Standard1024x1024
iOS 18 DarkDark Mode
iOS 18 TintedMonochrome
Android RoundAdaptive

Framework Implementation

Next.js 14 / 15 / 16 (App Router)
// Next.js 14 / 15 / 16 (App Router)
// Simply place these generated files in your 'app/' directory:
// 1. app/icon.svg           (Generated dynamic dark/light vector favicon)
// 2. app/apple-icon.png     (180x180 Apple Touch Icon)
// Next.js serves them automatically with zero additional code!
HTML5 / Astro / Vite
<!-- Modern HTML5 Head Tags -->
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any" />
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
Latest Engineering Articles

Learn Modern Favicon & App Icon Engineering

Explore All Guides
Engineering6 min read

The Ultimate Guide to Dynamic SVG Favicons with Dark Mode Media Queries

Stop losing your brand mark when users switch to dark mode. Learn how to embed CSS prefers-color-scheme media queries directly into vector SVG favicons.

Read Article
Mobile8 min read

Mastering iOS 18 Light, Dark, and Tinted App Icons in Xcode 16

iOS 18 introduced dynamic home screen tinting and system dark mode icons. Here is the exact specification and asset structure required to pass Apple App Store review.

Read Article
Engineering5 min read

Zero-Config Favicons & OpenGraph Assets in Next.js 14 and 15

Explore the built-in file-system metadata conventions of Next.js App Router that automatically generate, optimize, and cache your website icons.

Read Article

How the SVG favicon generator works

A PNG or ICO favicon is a fixed grid of pixels, so it gets blurry when a browser scales it for high-density screens. An SVG favicon is a small vector file: the browser redraws it at whatever size the tab, bookmark bar or address bar needs, so the edges stay sharp on Retina and 4K displays.

The file this page generates also contains a short CSS block with a prefers-color-scheme media query. When the visitor's system is in dark mode, the browser applies the dark colours you picked in the studio. You ship one file, not two.

Chrome, Edge, Firefox and current Safari all support SVG favicons. Keep favicon.ico and apple-touch-icon.png from the download as fallbacks for older browsers and iOS home screens.

How to use it

  1. 1Type a letter or pick an emoji, then choose a background colour or gradient.
  2. 2Set the dark-mode colours so the icon stays readable on dark browser tabs.
  3. 3Use the live browser-tab preview to check both themes at 16 px.
  4. 4Download the ZIP and copy the <link rel="icon" type="image/svg+xml"> snippet into your page <head>.

Modern Icon Packages vs. ICO/PNG-Only Converters

Web standards have evolved. A single fixed-size PNG or ICO looks soft on high-density screens and can disappear on dark browser tabs.

FeatureWeblixToolsBasic ICO/PNG converter
Dynamic SVG Dark/Light Mode✓ Yes (Native CSS Media)Fixed colours only
Apple iOS 18 Light/Dark/Tinted✓ Complete AppIcon CatalogSingle 180 px PNG
Where Your Image Is Processed✓ 100% In-Browser (Zero Uploads)Varies; often uploaded to a server
Framework-Ready Snippets✓ HTML, Next.js App RouterGeneric HTML tags
PWA Web Manifest✓ site.webmanifest includedUsually not included

Frequently Asked Questions

How does the SVG dark mode favicon work?

The generated SVG file embeds a @media (prefers-color-scheme: dark) stylesheet directly in the vector markup. Browsers evaluate this CSS dynamically to switch icon colors instantly.

Do I still need a favicon.ico if I use an SVG favicon?

Yes, keep it as a fallback. Older browsers and some crawlers still request /favicon.ico, so the download includes a multi-size ICO alongside icon.svg.

Why does my SVG favicon not change when I switch dark mode?

Browsers cache favicons aggressively. Hard-reload the page or add a version query such as /icon.svg?v=2 to the link tag after you replace the file.

See all FAQs →