Made an og image + favicon generator
Set out to build something else, got distracted, and ended up building this: OG Ninja to create beautiful (or at least quick!) OG images and favicons - mostly for quick projects where you don't want to (or can't) spend ages honing these images but just need something fast to run with.
At crossroads now - do I go back to my original project or keep working on this and make it perfect? I'll let you decide, knowing full well that this sub can be extremely harsh and I'll probably end up working on my original project.
Some basics
- OG image is a 1200 x 630 px sized image, and you need to set the meta tags in order for it to work.
- Some platforms (Slack and X notably) seem to require that the URL is absolute, with the domain name included. Including that has fixed a lot of problems for me.
- Slack caches your og images. If you're testing and nothing seems to change, add ?blahblah to the end of the url to make it slightly different, and Slack will then reload the image because it's no longer the same url.
- Favicon. Been using a 192 x 192 px png and that has worked for me till now. Will probably add more size exports in og ninja going forward.
Stack used
- Lovable as the AI app builder. Actually started at Cursor setting up a nextjs project... no wait that was for the original project I was working on, before I got distracted probably waiting for something to install or finish building. Nevermind! This project - fully built in Lovable.
- The app itself is vite + react + typescript + tailwind. No backend for now. Super fast to iterate.
- Image is drawn on a hidden canvas element, turned into a compressed png, and that png is then shown as the preview. The reason for this is that this way you see what you get and the preview actually matches what you'll get. Downside is slightly worse performance, but fixing that would be premature optimization for now. I've used an html div + html2canvas before, but that sometimes led to the exported png not matching what was in the div.
- Fonts, well, one font for now, are loaded from Google Fonts using new FontFace(name, url) and then the font.load() is awaited, with the canvas rendered only after the font has loaded. This fixed an issue where text would render in a default font rather than the one I wanted.
- For the email list I'm using something I built earlier, waitlistbrain, to make it easy for me to add email lists to all kinds of projects while having them all in one place, but still separate from each other. For example, a friend could sign up on multiple waitlists with the same email, which I found not possible with some other email list solutions.
Planning to add more controls, presets, and possibility to save your projects, but only if that's something people actually want to see. Otherwise, I'll add stuff when I need it myself.