DEV Community: Bilal Malik

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

Bilal Malik — Mon, 03 Aug 2026 13:49:03 +0000

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:

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

Features

1. Text Mode

Design a favicon using only text. Customize:
Font family, weight, color, and size
Background shape (rounded, circle, square) and color
Letter spacing, rotation, font style
Shadows (color, blur, X/Y offset)
Strokes (color, width)
Gradients (two colors, angle)
Border (width, color, style)
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

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

4. Export Panel

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

5. Tech Stack

React - UI library
TypeScript - Type safety
Vite - Fast build tool
Tailwind CSS - Styling
Lenis - Smooth scrolling
JSZip - ZIP archive generation
File‑Saver - File downloads
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:

JSZip bundles all files into a single archive. We include:
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png
apple-touch-icon.png
android-chrome-192x192.png, android-chrome-512x512.png
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...!

I built a no-login color palette app - turns out RLS policies alone don't work

Bilal Malik — Sun, 02 Aug 2026 04:45:05 +0000

I wanted a place to find and publish color palettes without making anyone sign up. Not "sign up but it's fast," actually zero accounts. Turns out that's a more interesting engineering problem than it sounds.

The core idea

Every visitor gets a random device ID generated once with crypto.randomUUID() and stored in localStorage. That ID goes to Supabase whenever someone likes a palette. No email, no password, nothing tied to a real identity - just "this browser liked this palette." Likes and counts are global and live for everyone, but only your own browser sees which ones you've liked.

It's not a new idea, but building it properly taught me a few things I didn't expect.

Grants aren't the same as RLS policies

I set up Row Level Security policies thinking that was the whole story. It's not. Postgres also needs an explicit GRANT on the table for the anon role before RLS even gets evaluated - otherwise every request 401s with a permission error, and the RLS policies you wrote never even get a chance to run. Two separate layers, both required.

The URL sync race condition that took me a while to catch

I sync app state to the URL and back so every view is shareable. The bug: clicking a palette from a tagged view would open the detail page for a split second, then snap back to the homepage. Turns out my URL→store sync effect was calling the same "set active tags" action that the UI uses when a person clicks a tag - and that action also resets the current view as a side effect. So opening a palette would correctly set the view to "detail," and then the very next line in the same effect would silently reset it back to "new" because of a stale tag comparison. Fixed it by splitting that into two actions: one for real user clicks (which should change the view), and one for URL sync (which shouldn't).

Making the loading bar actually mean something

Every state change (switching tags, opening a palette, searching) runs through a small loader animation. Originally the actual data updated instantly and the loading bar was just decorative, running after the fact. Now the state update is deferred until the loader animation completes, using a token so a stale update from an old click can't clobber a newer one. Small detail, but it's the difference between a loading bar that means something and one that's just visual noise.

Stack

React, TypeScript, Zustand, Supabase (Postgres, no auth), Tailwind. No backend server - Supabase's REST layer directly from the client, secured entirely through RLS.

It's free, open source, and live: PaletteSnap. Repo's here if you want to see how the anonymous-likes/URL-sync stuff is wired: Github Repo

Building RhythmKey: Creating a Modern Typing Experience with React, Tailwind, and Real-Time Analytics

Bilal Malik — Fri, 31 Jul 2026 14:51:48 +0000

Introduction

Typing tests are everywhere, but many focus only on one thing:

"How fast can you type?"

I wanted to build something different.

Something that feels like a real typing environment - fast, customizable, and enjoyable.

That's how RhythmKey was created.

RhythmKey is an open-source typing application built with React, Tailwind CSS, and Vite that combines:

Real-time typing analytics
Multiple test modes
Custom themes
Mechanical keyboard sounds
Smooth animations
Detailed performance tracking

The goal was simple:

Create a typing experience that helps users improve while actually enjoying the process.

In this article, I'll share how I built RhythmKey, the architecture behind it, and the challenges I solved along the way.

Features That Make RhythmKey Different

Multiple Typing Modes

RhythmKey supports different practice styles:

Time tests (15s, 30s, 60s, 120s)
Word challenges
Stories
Quotes
Infinite typing
Custom text

Real-Time Statistics

During every test, users can see:

WPM
Accuracy
Mistakes
Backspaces
Progress tracking
Consistency

The calculations update instantly while typing.

Custom Mechanical Keyboard

One of my favorite parts of RhythmKey is the custom keyboard experience.

The app includes:

Animated on-screen keyboard
QWERTY / AZERTY / DVORAK layouts
Key highlighting
Custom sound effects

Instead of generic typing sounds, RhythmKey includes different sound profiles:

Mechanical switches
Click sounds
Typewriter style

The goal was to make typing feel more physical.

Personalization

Users can customize:

Dark / Light / System themes
Cursor styles
Font size
Sound settings
Difficulty
Punctuation
Numbers
Symbols

All settings are saved automatically.

Building the Architecture

RhythmKey is built with a component-based React architecture.

The main idea:

Keep UI components simple and move complex logic into reusable hooks.

Tech Stack

Technology	Purpose
React	UI architecture
Vite	Fast development
Tailwind CSS	Styling
React Router	Navigation
LocalStorage	Data persistence
SVG	Performance graphs

Custom Hooks

The application relies heavily on custom hooks:

useTypingTest

Handles:

Typing state
Timer
Mistakes
WPM calculation

useTypingHandlers

Controls:

Keyboard input
Shortcuts
Sound triggers

useSettings

Manages:

Preferences
Themes
Keyboard settings

useStats

Stores:

History
Best scores
User progress

Creating a Real-Time Typing Engine

The hardest part of RhythmKey was creating a typing engine that feels instant.

Every key press needs to:

Check the expected character
Update the UI
Track mistakes
Play sounds
Update statistics

A simplified version:

const expected =
currentText[userInput.length];

if(key !== expected){
   setMistakes(prev => prev + 1);
}

Part 5 - Challenges & Lessons

Challenges I Solved

1. Making Typing Feel Natural

The first version felt too static.

I improved it by adding:

Smooth cursor movement
Better animations
Instant feedback
Sound responses

2. Saving User Preferences

Users expect their setup to remain.

I created a settings system using LocalStorage that remembers:

Theme
Keyboard layout
Sounds
Preferences

3. Supporting Multiple Keyboard Layouts

Supporting QWERTY, AZERTY, and DVORAK required custom key mapping logic.

The keyboard automatically adapts based on the selected layout.

What I Learned

Building RhythmKey taught me:

Better React state management
Designing reusable hooks
Creating smooth user interactions
Managing complex frontend logic

Future Improvements

Some ideas for the future:

Multiplayer typing races
More languages
Advanced statistics
Community themes
Typing lessons

Try RhythmKey

Live Demo:
https://rhythmkey.vercel.app/

GitHub:
https://github.com/byllzz/rhythmkey

RhythmKey is open-source under the MIT License.

If you enjoyed it, feel free to ⭐ the repository or contribute.

Moviio: A Pure CSS 3D Carousel Movie Explorer

Bilal Malik — Wed, 29 Jul 2026 10:21:31 +0000

I wanted to build a movie discovery app that felt as cinematic as the films it showcases. So I created Moviio - a 3D carousel movie explorer powered by TMDB, built entirely with vanilla JavaScript and CSS (no frameworks, no carousel libraries).

The Core: A Custom 3D Wheel

The main feature is a 7-card 3D wheel. Each card is placed using CSS custom properties (--slot) and 3D transforms.

.card-0 {
  --slot: translateY(55px) translateX(-13px) rotate(-63deg);
}

.card-3 {
  --slot: rotate(0deg) scale(1);
}

.card.active {
  filter: grayscale(0%) brightness(1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  pointer-events: visible;
}

The center card pops with a parallax tilt effect that reacts to your mouse, and you can swipe, drag, or use arrow keys to rotate the wheel.

What It Does

Trailer Overlay

Click the active card to open a full-screen cinema view with YouTube trailers, runtime, cast, and director details.

Persistent Watchlist

Save favorites to localStorage. The Watchlist filter dims the carousel and shows an empty-state message when nothing is saved.

Auto-Rotate & Shuffle

Let the wheel spin automatically (pauses on hover) or jump to a random page of movies.

/?movie_id=...

Keyboard Shortcuts

← / → - Navigate the carousel
Enter / Space - Open the trailer
Escape - Close the overlay

The Backend (Simple)

API requests go through a Vercel serverless function (/api/tmdb.js) that acts as a proxy. This keeps my TMDB API key secure while forwarding the real status codes from TMDB.

Built With

HTML5
CSS3
Vanilla JavaScript
TMDB API
Vercel

Visuals

Step‑by‑step build journey from concept to deployment - a visual roadmap of how Moviio was constructed.

How data flows through the app - from user interaction to TMDB API, local storage, and the trailer overlay.

Try It Out

Live Demo: moviio.vercel.app
Source Code: github.com/byllzz/moviio

If you enjoy the project, give it a ⭐ on GitHub - it really helps!