Seen on: https://css-tricks.com/emoji-as-a-favicon/
Every web needs its favicon: that little icon next to your page title.
Normally, your favicon would be a small image file that you link in your .html document, like in this blog (although here it is set by WordPress).
<link rel="icon" href="https://theroamingworkshop.cloud/b/wp-content/uploads/2022/08/cropped-TRW-favicon-1-32x32.png" sizes="32x32">But you don’t need to waste time designing an image for every single web app of personal use, neither just leaving the standard browser ugly icon.
You can use an Emoji, which will give your page a personal touch, just as Lea Verou indicated in this tweet some time ago:
Now that all modern browsers support SVG favicons, here’s how to turn any emoji into a favicon.svg:
— Lea Verou (@LeaVerou) March 22, 2020
<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
Summing up
Basically, all you have to do is copy-paste the following:
- Paste this code inside your <html>
<link rel="icon" href="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>">- Replace the icon “⚡” with any of the HTML symbols, like the ones you find in w3schools (just select it and copy it):
https://www.w3schools.com/charsets/ref_emoji.asp
- In case you see strange symbols rather than an icon, add UTF-8 enconding to your document with:
<meta charset="UTF-8">Sample code
Here I leave a sample code so you can try it in a .html file in your computer.
<html>
<meta charset="UTF-8">
<title>My web app</title>
<link rel="icon" href="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>">
</html>Find and share this and more web design tricks on 🐦 Twitter!
