Build a Browser‑Based Favicon Generator with React, TypeScript, and Tailwind

Favicraft is an open‑source, no‑login favicon generator that runs entirely in the browser. It lets you design text‑based favicons, upload images, or check any website's favicon – and export a complete package with every required size, manifest, and framework snippet. No sign‑up, no server uploads.

In this article, I'll walk through how Favicraft works, its tech stack, and the key implementation details that make it powerful and easy to use.

Why Favicraft?
Favicons are a tiny but critical part of web branding. Yet most tools require you to sign up, upload files to a server, or manually resize images. Favicraft solves this by:

1. Running 100% client‑side - your images never leave your device.
2. Offering three modes – text, image, and a favicon checker.
3. Generating a complete package – ICO, PNGs, Apple Touch, Android Chrome, and site.webmanifest.
4. Providing framework‑specific install snippets for React, Next.js, Astro, and more.

Features

1. Text Mode

1. Design a favicon using only text. Customize:
2. Font family, weight, color, and size
3. Background shape (rounded, circle, square) and color
4. Letter spacing, rotation, font style
5. Shadows (color, blur, X/Y offset)
6. Strokes (color, width)
7. Gradients (two colors, angle)
8. Border (width, color, style)
9. Custom border radius and padding

All changes are previewed in real time inside browser‑like mockups (tab, Google result, bookmark, home screen).

2. Image Mode
Upload any PNG, JPG, WebP, or SVG image – Favicraft automatically generates all required sizes (16×16, 32×32, 48×48, 180×180, 192×192, 512×512) and bundles them with site.webmanifest.

3. Favicon Checker

1. Enter any domain (without https://) and get:
2. The favicon preview at multiple sizes (via Google's favicon service)
3. A list of icon files found on the site (favicon.ico, favicon.png, etc.)
4. Page metadata (title, description, OG image, theme color) using Microlink's public API

4. Export Panel

1. Download individual sizes as PNGs
2. Download the full ZIP package with all files and manifest
3. Copy install snippet for your framework (HTML, Next.js App Router, React/Vite, Next.js Pages Router, Astro, Nuxt, SvelteKit, WordPress)
4. Copy an AI install prompt to let an assistant integrate the favicon into your project

5. Tech Stack

1. React - UI library
2. TypeScript - Type safety
3. Vite - Fast build tool
4. Tailwind CSS - Styling
5. Lenis - Smooth scrolling
6. JSZip - ZIP archive generation
7. File‑Saver - File downloads
8. Lucide React - Icons

6. Key Implementation Details

Canvas Generation:
Favicons are rendered on an HTML element. For text mode, we apply all styling (font, color, shadow, stroke, gradient, border, etc.) using the Canvas API. The generated PNGs are then included in the ZIP.

// Simplified version
export const generateTextCanvasBlob = (size, textVal, fontFamily, ...) => {
  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext('2d');
  // Apply background, shape, text, shadows, strokes, etc.
  return new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
};

7. ZIP Packaging:

1. JSZip bundles all files into a single archive. We include:
2. favicon-16x16.png, favicon-32x32.png, favicon-48x48.png
3. apple-touch-icon.png
4. android-chrome-192x192.png, android-chrome-512x512.png
5. site.webmanifest (with proper metadata)

The ZIP is then downloaded using file-saver.

8. Framework Snippets
A simple switch statement returns the appropriate HTML/JSX for each framework. For example, for Next.js App Router:

export function getFrameworkSnippet(fw: string): string {
  switch (fw) {
    case 'Next.js App Router':
      return `// app/layout.tsx
export const metadata = {
  icons: {
    icon: '/favicon.ico',
    shortcut: '/favicon-16x16.png',
    apple: '/apple-touch-icon.png',
  },
  manifest: '/site.webmanifest',
};`;
    // ...
  }
}

9. Favicon Checker - Icon Probing
Since the browser can't read a cross‑origin site's HTML directly, we probe for icon files by loading them as images and checking if they load successfully. This reliably tells us whether a given path exists.

function probeImage(url: string): Promise<boolean> {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img.naturalWidth > 0);
    img.onerror = () => resolve(false);
    img.src = url;
  });
}

Metadata is fetched via Microlink's public API (which acts as a proxy).

Live Demo & Repository

• Live Demo: favicraft
• GitHub: Repo Link

Feel free to star the repo, open issues, or contribute! Favicraft is MIT‑licensed and open for improvements.

What's Next?
I'm planning to improve the Text Mode UI (currently disabled pending a redesign), add dark mode support, and possibly integrate AI‑powered suggestions for text favicons. If you have ideas, let me know!

💬 Conclusion
Favicraft is a showcase of how modern web technologies can create a fully functional, offline‑capable tool without any backend. It's built for developers by a developer, and I hope it saves you time and frustration when dealing with favicons.

If you enjoyed this project, give it a ⭐ on GitHub and share it with your fellow developers!

Happy Coding...!