zesty.io

Product

Use Cases

Integrations

Learn

Not Categorized

How to add an Emoji Favicon to your Website with Zesty.io

Lea Verou had a genius tweet/solution on using an Emoji for a website favicon. 

Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg:

<svg xmlns="https://t.co/TJalgdayix" viewBox="0 0 100 100">
<text y=".9em" font-size="90">💩</text>
</svg>

Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com/S2F8IQXaZU

&mdash; Lea Verou (@LeaVerou) March 22, 2020

Using this SVG technique is super quick to do on a Zesty instance by creating an instance level head tag.

data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>😀</text></svg>

Now visiting your website should display a really fun emoji favicon in your browser tab!

emoji-favicon.png


Zesty.io has been designed to support utf8mb4 character encoding which besides emojis means we can handle content internationalization. In addition to instances being able to support multiple languages, they are all backed by a globally available CDN allowing our customers to connect with their audiences, wherever they may be. 

To learn more, sign up for a demo today!

By Stuart Runyan

Developing web technologies is my passion! I'm focused on creating applications and experiences to solve the problems which today's digital marketers face. I believe in web standards, a mobile first approach, access for everyone, open source software and the democratization of information. My goal is to continue the Internet being pure awesome!

Related Articles

Subscribe to the zestiest newsletter in the industry

Get the latest from the Zesty team, from whitepapers to product updates.