Bilal Malik

Posted on Jun 3

I built a favicon generator with Lanczos3 rendering that exports a full PWA bundle - no upload limits, no watermarks

#opensource #productivity #javascript #react

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.

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.webmanifest or browserconfig.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_Parse layer
Refinement — Each size is recalculated using Lanczos3 filters for micro-scale clarity
Manifest Generation — The engine writes site.webmanifest and browserconfig.xml automatically
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!

DEV Community