WeblixTools
Tools ▼
AI Icon Generator
Describe an icon and let AI draw it for you
Image Tools 7
Resize, compress, convert, crop, colours, EXIF
Image Resizer & BG Remover
Resize dimensions & remove solid backgrounds
Image Color Picker
Pick colours from any image, get HEX & RGB
Image Compressor & Converter
Shrink images, convert PNG, JPG & WebP
Image Converter
JPG, PNG, WebP, ICO, BMP, GIF, TIFF & PDF
Crop Image
Crop, rotate & flip, sizes for social media
Black & White Image
Grayscale, sepia, B&W and duotone
EXIF Viewer & Remover
See and remove GPS, camera and author data
AI & Text from Images 3
Image to text (OCR), translate, describe
Image to Text (OCR)
Copy text from screenshots, photos and scans
Translate Image
Read and translate text in photos with AI
AI Image Describer
Describe images, write alt text, list objects
Edit & Organize 12
Edit, sign, merge, split and arrange pages
Edit PDF
Change text, add text, images and drawings
Sign PDF
Draw, type or upload your signature
Fill PDF Form
Type into PDF forms and tick boxes
Merge PDF
Combine several PDFs into one file
Split PDF
Extract pages or split by ranges
Organize PDF
Reorder, rotate and delete pages
Rotate PDF
Turn all or chosen pages 90°/180°
Add Page Numbers
Number pages with your own format
Watermark PDF
Stamp text like DRAFT or CONFIDENTIAL
Remove PDF Pages
Delete the pages you don't need
Redact PDF
Permanently black out private information
Compare PDF
Spot differences between two versions
Convert from PDF 6
Word, PowerPoint, Excel, images, Markdown, extract
PDF to Image
Convert pages to PNG, JPG or WebP
PDF to Word
Editable .docx with headings, lists and tables
PDF to PowerPoint
Turn each page into a slide (.pptx)
PDF to Excel
Pull tables out to .xlsx or CSV
PDF to Markdown
Clean .md text for docs, wikis and AI
PDF Extractor
Extract text, images, links, emails and files
Convert to PDF 7
JPG, Word, PowerPoint, Excel, HTML, scans
Image to PDF
Turn JPG, PNG or WebP images into a PDF
JPG to PDF
Turn JPG photos into one PDF
Word to PDF
Convert .docx documents to PDF
PowerPoint to PDF
Save .pptx slides as PDF pages
Excel to PDF
Print spreadsheets (.xlsx, CSV) to PDF
HTML to PDF
Save HTML code or a web page as PDF
Scan to PDF
Scan paper with your camera into a PDF
Optimize & Secure 7
Compress, repair, password, crop, grayscale
Compress PDF
Make PDF files smaller to email or upload
Protect PDF
Add a password and restrict printing or copying
Unlock PDF
Remove a password you know from a PDF
Crop PDF
Trim margins or cut out part of the pages
Grayscale PDF
Convert colour pages to black and white
Edit PDF Metadata
Change title, author, keywords or remove them
Repair PDF
Recover damaged or corrupted PDF files
AI & OCR 3
Summarize, translate, make scans searchable
OCR PDF
Make scanned PDFs searchable and copyable
AI PDF Summarizer
Summarise a PDF and ask questions about it
Translate PDF
Translate PDF text into 36 languages with AI
SEO Tools 10
Meta tags, previews, robots.txt, sitemaps, redirects
Meta Tag Generator
Title, description, robots and canonical tags
SERP Snippet Preview
See where Google cuts your title and snippet
Keyword Density Checker
Top words and phrases in text or a web page
Open Graph Generator
og: tags with Facebook and LinkedIn previews
Twitter Card Generator
X card tags with a live post preview
Robots.txt Generator
Build robots.txt and test paths against it
XML Sitemap Generator
Turn a list of URLs into a sitemap.xml file
UTM Builder
Tag campaign links for Google Analytics
.htaccess Redirect Generator
301 redirects for Apache and nginx
Hreflang Tag Generator
Link language versions of a page
Text Tools 10
Count, convert case, clean up and compare text
Word Counter
Words, characters, sentences, reading time
Character Counter
Limits for X, Google, Instagram and SMS
Case Converter
Title, sentence, UPPER, camelCase, snake_case
Slug Generator
Turn titles into clean URL slugs
Reverse Text
Backwards, upside-down and mirror text
Remove Line Breaks
Join broken lines, keep paragraphs
Remove Duplicate Lines
Dedupe, sort and count lines
Find and Replace
Plain text or regex, with highlights
Text Compare
Spot differences line by line
Lorem Ipsum Generator
Placeholder paragraphs, words and lists
Dynamic SVG Favicon
Vector icons with dark mode queries
iOS 18 Tinted Icons
Xcode 16 standard & dark sets
Android Adaptive Icons
Material You adaptive layers
 ▲
Next.js App Router
Drop-in app/ directory pack
Emoji to Favicon
Convert emojis to high-res icons
Text & Monogram
Custom typographic letter badges
 All tools →
Developers & Specs ▼
Website Technology Checker
See the language, framework, database & tools a site uses
XPath Tester & Generator
Click an element to get its XPath & CSS selector
XML XPath Tester (Odoo)
Test XPath on XML & Odoo views, get inherit snippets
HTML Viewer & Previewer
Paste or load HTML and see how it looks
REST API Specification
Endpoints & live interactive console
Developer Guide
Packaging and rasterization manual
Asset Specs Matrix
Dimensions, format targets & rules
SVG Dark Mode Guide
CSS prefers-color-scheme architecture
Resources & Knowledge ▼
Engineering Blog
Icon architecture articles
FAQ
Privacy, formats & compatibility
Google Favicon SEO Rules
Search console indexing guidelines
Company & Support ▼
About WeblixTools
Who we are and how the tools work
Contact Us
Questions, bug reports and tool ideas
Privacy Policy
What we collect and what stays on your device
Terms of Service
Your rights to your files and fair use
Next.js 16, Apple iOS 18 & Android 15 Ready

Universal Favicon & App Icon Suite

Generate dynamic dark-mode SVG favicons, Apple touch icons, and Android adaptive asset catalogs in seconds. Zero server uploads, 100% client-side privacy.

Try:

Your description is sent to our AI provider to draw the icon. Everything else stays in your browser.

Curated Styles:

Choose a source

Start from an emoji, letters or your own logo.

Tap one, or type any emoji in the box.

Style it

Pick a shape, a background and how much space to leave.

Your own colours
16%

Around 15–20% keeps your icon clear of Android's round mask.

Your icon

512 × 512 master · updates as you edit

Live

favicon.ico, SVG favicon, Apple touch icon, Android & PWA icons and the web manifest, ready to drop in.

Or download one file

See it in place

How your icon looks where people will meet it.

Shown in these previews and saved in the web manifest of your download.

Browser tabs 16 px
My App
Dark
My App
Light
iPhone My App
Android My App
Google results 32 px
My App
https://myapp.com
// Next.js 14 / 15 (App Router) Zero-Config Integration
// Simply place these 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, no extra code needed
Platform Matrix

Complete Asset Specifications

Every asset format, dimension, and device target compiled in your production-ready export package.

Filename Dimensions Format Target Platform
icon.svg Scalable Vector SVG Dynamic Chrome 80+, Safari 14+, Firefox 90+ (Dark/Light Mode Media Queries)
apple-touch-icon.png 180 × 180 px PNG 32-bit Apple iOS 18 Home Screen, iPadOS, Safari Reading List & Bookmarks
icon-192.png 192 × 192 px PNG 32-bit Android 14+ Material You Adaptive Home Screen & PWA Launcher
icon-512.png 512 × 512 px PNG 32-bit PWA Splash Screen, Google Play Store & Apple App Store submission
favicon.ico 16×16, 32×32, 48×48 px ICO Multi-Layer Legacy Windows desktop browsers, Internet Explorer fallback
site.webmanifest JSON Config W3C Manifest Progressive Web Apps (PWA) installation parameters & theme color
Engineering Standards

The Modern Favicon & App Icon Manual

A deep architectural breakdown of vector rasterization, Apple Human Interface Guidelines, and Android Material Design.

CHAPTER 01

The Evolution of Favicons: From 16×16 ICO to Dynamic Vector SVG

Originally created by Microsoft for Internet Explorer 5 in 1999, the favicon began as a modest 16×16 bitmap image named favicon.ico placed in the server root. Over subsequent decades, high-density Retina displays, mobile home screen shortcuts, and progressive web apps multiplied the required icon sizes into over 20 distinct dimensions.

Best Practice: Modern web standards have consolidated into a clean three-tier architecture: dynamic SVG for modern browsers, 180×180 PNG for Apple devices, and W3C Web Manifest files for Android and PWAs.

This minimalist approach reduces page load weight by over 80% compared to legacy bundles while ensuring crystal-clear fidelity across 4K, 5K, and 8K displays.

CHAPTER 02

Dynamic Dark Mode Favicons Using CSS Media Queries

One of the most persistent visual bugs across modern websites is an invisible favicon. When users browse in dark mode with dark browser tabs, dark icons blend invisibly into the tab bar. Modern SVG favicons solve this cleanly without JavaScript by embedding CSS @media (prefers-color-scheme: dark) rules directly into the SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> rect { fill: #4F46E5; } @media (prefers-color-scheme: dark) { rect { fill: #818CF8; } text { fill: #FFFFFF; } } </style> <rect width="100" height="100" rx="22.5"/> <text x="50" y="55" text-anchor="middle" dominant-baseline="central">⚡</text> </svg>

When the client OS or browser switches between Light and Dark mode, the SVG instantly and automatically re-renders the appropriate color palette with zero JavaScript overhead.

CHAPTER 03

Apple iOS 18 & Xcode 16 AppIcon Catalog Architecture

Beginning with iOS 18, Apple introduced customizable Home Screen icons with Light, Dark, and Tinted visual modes. In Xcode 16, app icons are no longer configured through individual loose images. Instead, they require an AppIcon.appiconset catalog with a validated Contents.json mapping.

Apple Squircle Requirement: Apple requires standard 180×180px PNG assets to supply a square canvas with square corners. The operating system dynamically clips icons to a 22.5% continuous superellipse squircle curve.
CHAPTER 04

Android 14+ Material You Adaptive Icons & Safe Margins

Android introduced Adaptive Icons to handle OEM-specific icon masks (Samsung squircle, Google Pixel circle, OnePlus teardrop). Adaptive icons consist of two distinct layers: a background layer and a foreground layer. To guarantee that key branding elements are never clipped by custom OEM masks, all essential imagery must be kept within the central 66% safe zone diameter.

From the blog

Related Articles

Guides on favicon sizes, dark mode icons and app icons for iOS and Android.

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 →
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 →
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 →
SEO1 min read

How Your Favicon Directly Affects Google Search Snippets and CTR

Google prominently displays website favicons alongside organic search results and Google Discover feeds. Learn how to maximize visual legibility and click-through rates.

Read article →
Design7 min read

Designing Android 14+ Material You Adaptive Icons and Safe Margins

How Android separates foreground glyphs from background layers to support squircle, circle, and teardrop OEM masks, plus dynamic theme recoloring.

Read article →
See all articles
Reviews

What Our Users Say

Real feedback from people using WeblixTools, checked by our team before it appears.

★★★★★ 5.0 out of 5 · 1 review
★★★★★

very nice

good ho gye g maza hi a gye
Write a review
Knowledge Base

Frequently Asked Questions

Technical answers to help you configure, debug, and deploy your web assets.

Are my uploaded images or logos sent to an external server? +
No. WeblixTools processes 100% of your assets entirely within your browser using client-side HTML5 Canvas and JSZip. No images, text strings, or design data are ever transmitted, stored, or analyzed remotely.
How do I set up icons in Next.js 14 and Next.js 15 App Router? +
Simply drop icon.svg and apple-icon.png directly into your app/ folder. Next.js automatically detects these files and generates the matching metadata tags in your HTML output without any manual configuration.
What makes an SVG favicon better than an ICO file? +
SVG favicons are resolution-independent vectors that remain tack-sharp on 4K, 5K, and 8K monitors while consuming less than 1 kilobyte of bandwidth. Crucially, SVGs support internal CSS media queries to automatically change colors when users toggle dark mode.
How can I force browsers to clear aggressive favicon caching? +
Browsers cache favicons aggressively. During development, add a cache-busting query parameter (e.g., /icon.svg?v=2) or clear browser cache specifically for host assets in Chrome DevTools under Application → Storage → Clear site data.
Can I use WeblixTools assets for commercial applications? +
Yes! All generated files and assets are 100% royalty-free and yours to use for personal, open-source, client, or enterprise commercial products with zero restrictions.
See all FAQs →
✓ Code copied