Using an Emoji as a Favicon

Great β€œhack” popularized by Lea Verou (but first discovered by Leandro): if you place an emoji inside <text> in an SVG Favicon you instantly have an Emoji Favicon πŸ™‚ Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg: <svg xmlns="" viewBox="0 0 100 100"><text y=".9em" font-size="90">πŸ’©</text></svg> Useful […]

Emoji Compositions β€” Create your own emoji by combining existing ones (πŸ‘±β€β™‚οΈ + 🎩 + πŸ”Ž = …)

Last Friday Max Lynch sent out this tweet: I'm still not over Apple killing the best emoji there ever was — Max Lynch (@maxlynch) March 15, 2018 Inspired by an idea that first came to my mind after seeing these emoji compositions using the 😎 emoji, I quickly replied that it’d be perfectly possible […]

gitmoji – An emoji guide for your commit messages

Gitmoji is an initiative to standardize and explain the use of emojis on GitHub commit messages. Using emojis on commit messages provides an easy way of identifying the purpose or intention of a commit with only looking at the emojis used. Next to the guide there’s also a CLI binary to help you perform commits […]

runes – Unicode-aware JS string splitting with full Emoji support

At Small Town Heroes I’m currently working on a newsreader app built using React Native. On Android (even 7.1.1) we noticed this weird issue where some emojis would render incorrectly when we were applying styling on it using index-based ranges: the range seemed to be off by one, splitting the emoji into its separate bytes. […]

Text-wrapping, hyphenation, emojis and what not

Earlier today I ran some tests to see how text-wrapping/hyphenation of long uninterrupted strings works in browsers. I tested both β€œnormal” strings and strings of emojis. The tests (and its rendering results per browser) are stored on Codepen and embedded below: πŸ’© and ⚠️ behave differently (click to enlarge): These tests left me with some […]

Emoji Silhouettes and Emoji Outlines with CSS

From StackOverflow: It’s possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color? Using an (inset) text-shadow in combination with transparent text color this indeed is possible: With some more CSS – and an extra attribute – it’s possible to even achieve a (faux) […]

Fun with JavaScript and Emoji

Today Wes Bos tweeted a few fun things one can do with JavaScript and Emoji: It’s possible to spread emoji sequences into their single parts: […’πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦’] // [“πŸ‘¨”, “‍”, “πŸ‘©”, “‍”, “πŸ‘§”, “‍”, “πŸ‘¦”] Combining Emoji is also possible: [“πŸ‘¨”, “‍”, “πŸ‘©”, “‍”, “πŸ‘§”].reduce((prev, curr) => prev + curr) // “πŸ‘¨β€πŸ‘©β€πŸ‘§” And oh, you can […]