Hey HN,
For a while now, I've been a little annoyed by the workflow for creating favicons for new projects. It always felt like a slightly-too-fiddly task involving multiple tools, manual resizing, or signing up for a service just for a few simple icons.
I wanted to see if I could build a tool that was the complete opposite of that: zero-install, zero-dependencies, and as fast as humanly possible.
The result is this little app:
https://emo2fav.netlify.app/
It’s a single index.html file with no build step. The core idea was to make the entire experience client-side:
Rendering: The emoji previews are rendered directly to HTML canvases in real-time. I learned a bit about font metrics to get the vertical centering right across different browsers. The sharp previews are rendered at a fixed 128px and then downscaled with CSS, while the final ZIP generation uses an offscreen canvas to render each icon at its true, full resolution.
File Generation: The .zip file, with all the selected .png files and the manifest.json, is created entirely in the browser using JSZip.js loaded from a CDN. No data ever leaves your machine.
Payment Model: I also wanted to experiment with a "supermarket" model: you can use every single feature of the app for free, see the final product, and a one-time payment is only required at the final "checkout" step to download the files. I'm using a simple Buy Me a Coffee redirect for this, where a middle success.html page checks the document.referrer to grant a localStorage token. I know this isn't Fort Knox, but for a micro-tool like this, it felt like a reasonable trade-off to avoid a server-side setup.
It was a fun weekend project built with vanilla JS and Tailwind CSS (also from a CDN).
I’d genuinely love to get your feedback, especially on the user flow or any technical implementation details. Thanks for taking a look!