{"id":1790,"date":"2022-11-13T20:31:39","date_gmt":"2022-11-13T19:31:39","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=1790"},"modified":"2022-11-14T12:09:57","modified_gmt":"2022-11-14T11:09:57","slug":"%f0%9f%98%83-use-an-emoji-as-a-favicon-for-your-web-apps","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/en\/1790\/%f0%9f%98%83-use-an-emoji-as-a-favicon-for-your-web-apps\/","title":{"rendered":"\ud83d\ude03 Use an Emoji as a favicon for your web-apps"},"content":{"rendered":"\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:12px;\"><i><b>Seen on: <\/b><a href=\"https:\/\/css-tricks.com\/emoji-as-a-favicon\/\" target=\"_blank\" rel=\"noopener\">https:\/\/css-tricks.com\/emoji-as-a-favicon\/<\/a><\/i><\/p>\n\n\n\n<p>Every web needs its <strong>favicon<\/strong>: that little icon next to your page title.<\/p>\n\n\n\n<p>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).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"icon\" href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/cropped-TRW-favicon-1-32x32.png\" sizes=\"32x32\"&gt;<\/code><\/pre>\n\n\n\n<p>But you don&#8217;t need to waste time designing an image for every single <strong>web app of personal use<\/strong>, neither just leaving the standard browser ugly icon.<\/p>\n\n\n\n<p>You can use an Emoji, which will give your page a personal touch, just as <a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/LeaVerou\" target=\"_blank\">Lea Verou<\/a> indicated in this tweet some time ago:<\/p>\n\n\n\n<blockquote class=\"twitter-tweet\"><p dir=\"ltr\" lang=\"en\">Now that all modern browsers support SVG favicons, here&#8217;s how to turn any emoji into a favicon.svg:<br><br>&lt;svg xmlns=\u00bb<a href=\"https:\/\/t.co\/TJalgdayix\">https:\/\/t.co\/TJalgdayix<\/a>\u00bb viewBox=\u00bb0 0 100 100&#8243;&gt;<br>&lt;text y=\u00bb.9em\u00bb font-size=\u00bb90&#8243;&gt;\ud83d\udca9&lt;\/text&gt;<br>&lt;\/svg&gt;<br><br>Useful for quick apps when you can&#8217;t be bothered to design a favicon! <a href=\"https:\/\/t.co\/S2F8IQXaZU\">pic.twitter.com\/S2F8IQXaZU<\/a><\/p>\u2014 Lea Verou (@LeaVerou) <a href=\"https:\/\/twitter.com\/LeaVerou\/status\/1241619866475474946?ref_src=twsrc%5Etfw\">March 22, 2020<\/a><\/blockquote> <script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Summing up<\/h2>\n\n\n\n<p>Basically, all you have to do is copy-paste the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Paste this code inside your &lt;html&gt;<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"icon\" href=\"data:image\/svg+xml,&lt;svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22&gt;&lt;text y=%22.9em%22 font-size=%2290%22&gt;\u26a1&lt;\/text&gt;&lt;\/svg&gt;\"&gt;<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Replace the icon \u00ab\u26a1\u00bb with any of the HTML symbols, like the ones you find in <strong>w3schools<\/strong> (just select it and copy it):<\/li>\n<\/ol>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/charsets\/ref_emoji.asp\" target=\"_blank\">https:\/\/www.w3schools.com\/charsets\/ref_emoji.asp<\/a><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>In case you see strange symbols rather than an icon, add UTF-8 enconding to your document with:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;meta charset=\"UTF-8\"&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Sample code<\/h2>\n\n\n\n<p>Here I leave a sample code so you can try it in a .html file in your computer.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n\n&lt;meta charset=\"UTF-8\"&gt;\n\n&lt;title&gt;My web app&lt;\/title&gt;\n\n&lt;link rel=\"icon\" href=\"data:image\/svg+xml,&lt;svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22&gt;&lt;text y=%22.9em%22 font-size=%2290%22&gt;\u26a1&lt;\/text&gt;&lt;\/svg&gt;\"&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Find and share this and more web design tricks on \ud83d\udc26 Twitter!<\/p>\n\n\n\n<p>\ud83d\udc26 <code><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/roamingworkshop\" target=\"_blank\">@RoamingWorkshop<\/a><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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). But you don&#8217;t need to waste time designing an image for every [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1793,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[],"class_list":["post-1790","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-weben","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/comments?post=1790"}],"version-history":[{"count":4,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1790\/revisions"}],"predecessor-version":[{"id":1801,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1790\/revisions\/1801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/1793"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=1790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=1790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=1790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}