{"id":126,"date":"2016-05-12T14:33:19","date_gmt":"2016-05-12T14:33:19","guid":{"rendered":"http:\/\/diblet.com\/blog\/?p=126"},"modified":"2016-11-14T14:32:44","modified_gmt":"2016-11-14T14:32:44","slug":"como-incluir-correctamente-un-favicon","status":"publish","type":"post","link":"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/","title":{"rendered":"Como incluir correctamente un favicon para m\u00faltiples resoluciones"},"content":{"rendered":"<p>Los favicon son peque\u00f1as im\u00e1genes, generalmente de 16&#215;16 pixeles, usado por la mayor\u00eda de los navegadores en la parte izquierda de las pesta\u00f1as de los sitios web. Nacieron all\u00e1 por 1999 en Internet Explorer 5 como una peque\u00f1a imagen que represente el sitio y tiempo despu\u00e9s fue estandarizado por W3C<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-143 size-full\" src=\"http:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/05\/favicons.gif\" alt=\"Grilla con muchos favicon\" width=\"776\" height=\"408\" \/><\/p>\n<h2>Como crear un favicon<\/h2>\n<p>Existen m\u00faltiples herramientas en la web para crear e incluir favicons como:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.favicomatic.com\" target=\"_blank\" rel=\"nofollow\">Favicomatic<\/a><\/li>\n<li><a href=\"http:\/\/www.favicon.cc\/\" target=\"_blank\" rel=\"nofollow\">Favicon.cc<\/a><\/li>\n<li><a href=\"http:\/\/www.favicongenerator.com\/\" target=\"_blank\" rel=\"nofollow\">Favicongenerator<\/a><\/li>\n<li><a href=\"http:\/\/favigen.com\/\" target=\"_blank\" rel=\"nofollow\">Favigen<\/a><\/li>\n<li><a href=\"http:\/\/www.degraeve.com\/favicon\/\" target=\"_blank\" rel=\"nofollow\">Degraeve Favicon<\/a><\/li>\n<li><a href=\"http:\/\/tools.dynamicdrive.com\/favicon\/\" target=\"_blank\" rel=\"nofollow\">Dynamic Drive Favicon<\/a><\/li>\n<li><a href=\"http:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"nofollow\">Real Favicon Generator (recomendado)<\/a><\/li>\n<\/ul>\n<p>Y mucho m\u00e1s que se pueden encontrar con una simple b\u00fasqueda en google.<\/p>\n<h3>Incluir<\/h3>\n<p>El c\u00f3digo que normalmente usamos para incluir un favicon (en el caso de que sea una imagen PNG) es el siguiente y va ubicado antes de que cierre nuestra etiqueta HEAD en nuestro html<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\" data-enlighter-language=\"html\">&lt;link rel=\"shortcut icon\" href=\"ENLACE AL FAVICON\" type=\"image\/png\" \/&gt;<\/pre>\n<h2>Resoluciones<\/h2>\n<p>El problema de incluir una sola imagen de 16&#215;16 es que esta no se visualizar\u00e1 correctamente en otros lugares en el que puede mostrarse nuestro favicon, por ejemplo, como icono en nuestro escritorio o en nuestra barra de navegaci\u00f3n. <strong>Una de las soluciones<\/strong> es incluir nuestro icono como archivo .ico el cual soporta varios tama\u00f1os. Existen muchas herramientas que nos ayudar\u00e1n a convertir nuestros archivos PNG o cualquiera sea el formato en el que tengamos nuestra imagen original, en un archivo .ico de varias resoluciones, y lo podemos incluir en nuestro c\u00f3digo de la siguiente manera:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;link rel=\"shortcut icon\" sizes=\"16x16 24x24 32x32 48x48 64x64\" href=\"DIRECCI\u00d3N DE NUESTRO ARCHIVO .ICO\"&gt;<\/pre>\n<p>Lo que estamos haciendo aqu\u00ed es incluir un archivo .ico que tiene 5 diferentes resoluciones.<\/p>\n<p><strong>Los archivos .ico funcionan, sin embargo est\u00e1n\u00a0mayormente en desuso, por esto recomendamos utilizar en cambio diferentes im\u00e1genes PNG.<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon-16x16.png\" sizes=\"16x16\"&gt;\r\n&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon-32x32.png\" sizes=\"32x32\"&gt;\r\n&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon-96x96.png\" sizes=\"96x96\"&gt;<\/pre>\n<h2>Otros usos<\/h2>\n<p>Nuestros iconos pueden ser utilizados por nuestros dispositivos m\u00f3viles, Android, iOS o Windows.<br \/>\nPara cumplir con las exigencias de estos dispositivos necesitamos im\u00e1genes de incluso m\u00e1s tama\u00f1o, en el caso de que alguien quiera a\u00f1adir nuestro sitio como icono en su tablet con Windows necesitamos una imagen de 144&#215;144, al igual que necesitamos una imagen de mayor tama\u00f1o en el caso de que nuestro dispositivo tenga una alta densidad de p\u00edxeles.<\/p>\n<h3>Incluyendo nuestro favicon para dispositivos Apple Touch<\/h3>\n<p>A pesar de que principalmente incluimos estos iconos para dispositivos Apple Touch, estos tambien suelen ser utilizados por otras aplicaciones como Chrome en Android<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"\/apple-touch-icon-57x57.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"\/apple-touch-icon-114x114.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"\/apple-touch-icon-72x72.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"\/apple-touch-icon-144x144.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"\/apple-touch-icon-60x60.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"\/apple-touch-icon-120x120.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"\/apple-touch-icon-76x76.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"\/apple-touch-icon-152x152.png\"&gt;<\/pre>\n<h3>Incluyendo nuestro favicon para dispositivos con Windows 8<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;meta name=\"application-name\" content=\"NOMBRE DE NUESTRO SITIO WEB\"&gt;\r\n&lt;meta name=\"msapplication-TileImage\" content=\"\/favicon-144x144.png\"&gt;\r\n&lt;meta name=\"msapplication-TileColor\" content=\"#2A2A2A\"&gt;<\/pre>\n<h1>Una herramienta perfecta<\/h1>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-139 size-full\" src=\"http:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/05\/favicon_realfavicongenerator.png\" alt=\"C\u00f3mo se aplican los favicon en distintos dispositivos\" width=\"977\" height=\"200\" srcset=\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/05\/favicon_realfavicongenerator.png 977w, https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/05\/favicon_realfavicongenerator-300x61.png 300w, https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/05\/favicon_realfavicongenerator-768x157.png 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/realfavicongenerator.net\" target=\"_blank\">Real Favicon Generator<\/a> es una de las mejores herramientas para crear nuestro favicon permitiendonos m\u00faltiples personalizaciones para los diferentes dispositivos, generando nuestro c\u00f3digo HTML a partir de una sola imagen, en segundos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los favicon son peque&ntilde;as im&aacute;genes, generalmente de 16&times;16 pixeles, usado por la mayor&iacute;a de los navegadores en la parte izquierda de las pesta&ntilde;as de los sitios web. Nacieron all&aacute; por [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":148,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,29],"tags":[31,32,30],"class_list":["post-126","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destacado","category-diseno","tag-favicon","tag-favicon-generator","tag-icono"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.0.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como incluir correctamente un favicon para m\u00faltiples resoluciones - Diblet<\/title>\n<meta name=\"description\" content=\"Te presentamos algunas de las mejores herramientas para que puedas incluir tus favicon personalizados de manera sencilla y perfecta.\" \/>\n<link rel=\"canonical\" href=\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como incluir correctamente un favicon para m\u00faltiples resoluciones - Diblet\" \/>\n<meta property=\"og:description\" content=\"Te presentamos algunas de las mejores herramientas para que puedas incluir tus favicon personalizados de manera sencilla y perfecta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/\" \/>\n<meta property=\"og:site_name\" content=\"Diblet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dibletweb\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-12T14:33:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-14T14:32:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/05\/faviconsarticles.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"990\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dibletweb\" \/>\n<meta name=\"twitter:site\" content=\"@dibletweb\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\">\n\t<meta name=\"twitter:data1\" content=\"3 minutos\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/diblet.com\/blog\/#organization\",\"name\":\"Diblet.com\",\"url\":\"https:\/\/diblet.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/dibletweb\/\",\"https:\/\/twitter.com\/dibletweb\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/diblet.com\/blog\/#logo\",\"inLanguage\":\"es-AR\",\"url\":\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/02\/demo-1.jpg\",\"width\":846,\"height\":427,\"caption\":\"Diblet.com\"},\"image\":{\"@id\":\"https:\/\/diblet.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/diblet.com\/blog\/#website\",\"url\":\"https:\/\/diblet.com\/blog\/\",\"name\":\"Diblet\",\"description\":\"Blog sobre Tecnolog\\u00eda &amp; Programaci\\u00f3n\",\"publisher\":{\"@id\":\"https:\/\/diblet.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/diblet.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es-AR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/#primaryimage\",\"inLanguage\":\"es-AR\",\"url\":\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/05\/faviconsarticles.jpg\",\"width\":990,\"height\":500},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/#webpage\",\"url\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/\",\"name\":\"Como incluir correctamente un favicon para m\\u00faltiples resoluciones - Diblet\",\"isPartOf\":{\"@id\":\"https:\/\/diblet.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/#primaryimage\"},\"datePublished\":\"2016-05-12T14:33:19+00:00\",\"dateModified\":\"2016-11-14T14:32:44+00:00\",\"description\":\"Te presentamos algunas de las mejores herramientas para que puedas incluir tus favicon personalizados de manera sencilla y perfecta.\",\"breadcrumb\":{\"@id\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/diblet.com\/blog\/\",\"url\":\"https:\/\/diblet.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/\",\"url\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/\",\"name\":\"Como incluir correctamente un favicon para m\\u00faltiples resoluciones\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/#webpage\"},\"author\":{\"@id\":\"https:\/\/diblet.com\/blog\/#\/schema\/person\/5fe22744f22cf81d7ad6e622c90bb9cf\"},\"headline\":\"Como incluir correctamente un favicon para m\\u00faltiples resoluciones\",\"datePublished\":\"2016-05-12T14:33:19+00:00\",\"dateModified\":\"2016-11-14T14:32:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/diblet.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/#primaryimage\"},\"keywords\":\"favicon,favicon generator,icono\",\"articleSection\":\"Destacado,Dise\\u00f1o\",\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/diblet.com\/blog\/como-incluir-correctamente-un-favicon\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/diblet.com\/blog\/#\/schema\/person\/5fe22744f22cf81d7ad6e622c90bb9cf\",\"name\":\"Enzo Vergara\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/diblet.com\/blog\/#personlogo\",\"inLanguage\":\"es-AR\",\"url\":\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/02\/f5-150x150.jpg\",\"caption\":\"Enzo Vergara\"},\"sameAs\":[\"http:\/\/diblet.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/posts\/126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/comments?post=126"}],"version-history":[{"count":0,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/posts\/126\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/media\/148"}],"wp:attachment":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/media?parent=126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/categories?post=126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/tags?post=126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}