{"id":1784,"date":"2022-11-13T20:18:42","date_gmt":"2022-11-13T19:18:42","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=1784"},"modified":"2022-11-14T12:09:06","modified_gmt":"2022-11-14T11:09:06","slug":"%f0%9f%98%83-usa-un-emoji-como-favicon-para-tus-web-apps","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/1784\/%f0%9f%98%83-usa-un-emoji-como-favicon-para-tus-web-apps\/","title":{"rendered":"\ud83d\ude03 Usa un Emoji como favicon para tus web-apps"},"content":{"rendered":"\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:12px;\"><i><b>Visto en: <\/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>Toda web necesita su <strong>favicon<\/strong>: ese iconito que sale junto al t\u00edtulo de la p\u00e1gina.<\/p>\n\n\n\n<p>Normalmente, tu favicon ser\u00eda una peque\u00f1a imagen que enlazas en el encabezado del .html, como en este blog (aunque aqu\u00ed lo hace WordPress por m\u00ed).<\/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>Pero <strong>para tus webapps<\/strong> de uso personal no es necesario perder el tiempo dise\u00f1ando una imagen, ni tampoco dejar el cutre icono por defecto del navegador. <\/p>\n\n\n\n<p>Puedes usar un Emoji, que le dar\u00e1 un toque m\u00e1s personal a tu p\u00e1gina, tal y como nos indica <a href=\"https:\/\/twitter.com\/LeaVerou\" target=\"_blank\" rel=\"noreferrer noopener\">Lea Verou<\/a> en este tweet:<\/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\">Resumiendo<\/h2>\n\n\n\n<p>Vamos, que todo lo que tienes que hacer es copiar y pegar lo siguiente:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Pega este c\u00f3digo dentro de tu &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>Sustituye el icono \u00ab\u26a1\u00bb por cualquiera de los s\u00edmbolos HTML, como los que encontrar\u00e1s en w3schools (selecci\u00f3nalo y c\u00f3pialo):<\/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>En caso de que veas s\u00edmbolos raros en lugar del icono, a\u00f1ade codificaci\u00f3n UTF-8 a tu documento:<\/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\">C\u00f3digo ejemplo<\/h2>\n\n\n\n<p>Aqu\u00ed te dejo un c\u00f3digo de ejemplo para que lo pruebes en un archivo .html en tu ordenador.<\/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;Mi 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>Consulta y comparte este y m\u00e1s trucos de dise\u00f1o web en \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>Visto en: https:\/\/css-tricks.com\/emoji-as-a-favicon\/ Toda web necesita su favicon: ese iconito que sale junto al t\u00edtulo de la p\u00e1gina. Normalmente, tu favicon ser\u00eda una peque\u00f1a imagen que enlazas en el encabezado del .html, como en este blog (aunque aqu\u00ed lo hace WordPress por m\u00ed). Pero para tus webapps de uso personal no es necesario perder el [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1793,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52],"tags":[],"class_list":["post-1784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webes","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1784","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=1784"}],"version-history":[{"count":9,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1784\/revisions"}],"predecessor-version":[{"id":1800,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1784\/revisions\/1800"}],"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=1784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=1784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=1784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}