Every web project needs a favicon. And every time, it's the same story - find a random online tool,
upload your logo, get back a blurry 16x16 PNG, and spend another 20 minutes hunting for a
site.webmanifest generator.
So I built Favicraft. A high-fidelity favicon generator that takes your image, processes it
through a Lanczos3 rendering engine, and spits out a complete production-ready PWA bundle in one ZIP.
Live at favicraft.vercel.app - open source, MIT licensed.
Table of Contents
- The Problem
- What It Does
- How It Works
- What's in the ZIP
- My Favourite Detail — Auto Manifest Generation
- Tech Stack
- Run It Locally
The Problem
Most favicon tools give you:
- A blurry downscaled PNG with no control over the algorithm
- No
site.webmanifestorbrowserconfig.xml - No Apple Touch icons or Android PWA sizes
- Watermarks or file size limits behind a paywall
Favicraft handles the entire pipeline — from raw image to a fully compliant,
copy-paste-ready favicon bundle — with zero compromise on quality.
What It Does
Lanczos3 Rendering Engine
Highest-fidelity downsampling available. Instead of the blurry bilinear resize most tools use,
Favicraft runs every asset through a Lanczos3 kernel via Sharp — preserving edge clarity
at every size from 16px to 512px.
Multi-Format Export
Generates the full set of sizes in one go — Standard, Retina, Apple Touch, and Android PWA.
Everything a modern site needs, nothing it doesn't.
Automatic Manifest Generation
site.webmanifest and browserconfig.xml are written automatically with correct metadata.
Smart header injection gives you copy-paste ready <link> and <meta> tags for your HTML.
Live Asset Inspector
Real-time metadata, color space, and depth analysis per generated asset.
Test your favicons against Light, Dark, and Glass UI themes before downloading.
Bulk ZIP Export
All assets packed using DEFLATE L9 compression into a single production-stable ZIP.
One download, drop it into your project root, done.
Zero Tracking
All processing runs client-side and serverless. No images are stored or logged.
How It Works
-
Ingestion — Your image is deconstructed into pixel coordinates via the
Vector_Parselayer - Refinement — Each size is recalculated using Lanczos3 filters for micro-scale clarity
-
Manifest Generation — The engine writes
site.webmanifestandbrowserconfig.xmlautomatically - Delivery — Everything is packed with DEFLATE L9 compression into one ZIP bundle
What's in the ZIP
| File | Purpose |
|---|---|
favicon.ico |
Classic multi-size ICO |
favicon-16x16.png |
Browser tab standard |
favicon-32x32.png |
Browser tab retina |
apple-touch-icon.png |
iOS home screen (180x180) |
android-chrome-192x192.png |
Android PWA |
android-chrome-512x512.png |
Android PWA splash |
site.webmanifest |
PWA manifest with correct metadata |
browserconfig.xml |
Windows tile config |
My Favourite Detail — Auto Manifest Generation
Most tools make you write site.webmanifest yourself. Favicraft generates it with the correct
name, icons, theme_color, and display fields automatically — and gives you the exact
<link> tags to drop into your <head>. Zero manual config.
Tech Stack
| Tool | Purpose |
|---|---|
| Next.js | Framework and serverless API routes |
| Sharp | Lanczos3 image processing engine |
| DEFLATE L9 | ZIP compression for bundle export |
| Vercel | Deployment |
Run It Locally
git clone https://github.com/byllzz/favicraft.git
cd favicraft
npm install
npm run dev
Requires Node.js v18+. No environment variables needed.
If Favicraft saved you from a blurry favicon and a missing site.webmanifest —
a ⭐ on the GitHub repo means a lot.
Drop any feedback in the comments below!