Aka favicons-as-a-service
- MVP: emoji.games/🦈 ⇒ https://twemoji.maxcdn.com/v/13.0.2/72x72/1f988.png
- What's the value add over getting it from Twemoji directly? Hm....
- Easier to remember!
- Supports shortcodes
- Other icon packs besides Twemoji
- Simple backgrounds
- Website UI for showing what works
- Dynamically updates its own favicon, obv
- Random emoji button
- Generate Twemoji link for maxcdn, if you trust them instead
- API:
- /🦈
- /🦈.png
- /🦈.svg
- /🦈.black.svg
- /🦈.text.svg
- text = actually embedded SVG? ala https://css-tricks.com/emojis-as-favicons/
- Warning: sizing/padding problems
- Or should these be url params?
- Why emoji are important: Look at a typical browser tab! It's all like, random junk, but the favicons are how you actually figure out where to go
- But the emoji is always visible.
- v0: Just link to twemojis
- v1: Different emoji sets?
- v2: Generate svgs. Background color,
- Actually maybe this isn't that hard! Embedded twemoji inside SVG
- v3: Animated? Generated? Customized?
- Rotate? Flip? Once every so often... or maybe as JS library
- Loading indicator?
How to build it:
- Actually just host the static images on Netlify CDN
- Try this first! It's super easy
- Q: Do files without extension work on the browser
- Name shortening service == map one thing to another
Questions:
- Do I need a server? What kind of server?
- What server language have I wanted to learn? Go (esbuild, etc)? Rust? Node JS again?
- How are CDNs created? How do I build one?
- How are things routed?
- Self host emojis vs link to existing CDN
- Self host = can do nice weird tricks like 🦈.black.round.svg
Project names
- emoji.oneword.games
- Pros:
- emoji.camp, emoji.band
- emoji.is
- Short, but uglyish
- emoji.sh - taken, sad. But .ish in the future
- Also emoj.is
- favicon.to ? $40...
- Maybe this one
- emoj.ink - $7 on Namecheap
Capturing value
- Sponsor this project.
- At $20/month, we'll host a custom emoji for you, to let you + others use!
- Hm, does anyone actually want others to use their own emoji?
- Oh, but different versions (eg background colors) — quickly show status
- Eg Streamlit docs vs sites vs main
- For testing: https://css-tricks.com/different-favicon-for-development/
Credits:
- TheSephist for inspiration from micro og stuff