{"id":1460,"date":"2015-01-16T23:01:41","date_gmt":"2015-01-16T22:01:41","guid":{"rendered":"https:\/\/diocesanos.es\/blogs\/equipotic\/?p=1460"},"modified":"2015-01-12T01:36:42","modified_gmt":"2015-01-12T00:36:42","slug":"como-crear-un-favicon-para-tu-web-o-blog","status":"publish","type":"post","link":"https:\/\/diocesanos.es\/blogs\/equipotic\/2015\/01\/16\/como-crear-un-favicon-para-tu-web-o-blog\/","title":{"rendered":"C\u00f3mo crear un \u00abfavicon\u00bb para tu web o blog"},"content":{"rendered":"<p>Seg\u00fan la wikipedia \u00abun <strong> <a title=\"favicon Wikipedia\" href=\"http:\/\/es.wikipedia.org\/wiki\/Favicon\" target=\"_blank\">favicon<\/a><\/strong>, del ingl\u00e9s <i>favorites icon<\/i> (icono de favoritos), tambi\u00e9n conocido como <b>icono de p\u00e1gina<\/b>, es una peque\u00f1a imagen asociada con una p\u00e1gina o sitio web en particular. Los navegadores gr\u00e1ficos suelen mostrar el favicono de la p\u00e1gina visitada, si \u00e9sta lo posee, en la barra de direcciones y en el encabezado de la pesta\u00f1a correspondiente.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-content\/uploads\/sites\/2\/2015\/01\/understanding-favicons.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1463\" src=\"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-content\/uploads\/sites\/2\/2015\/01\/understanding-favicons-300x98.jpg\" alt=\"understanding-favicons\" width=\"300\" height=\"98\" srcset=\"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-content\/uploads\/sites\/2\/2015\/01\/understanding-favicons-300x98.jpg 300w, https:\/\/diocesanos.es\/blogs\/equipotic\/wp-content\/uploads\/sites\/2\/2015\/01\/understanding-favicons.jpg 610w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Asimismo los utilizan para identificar m\u00e1s f\u00e1cilmente las p\u00e1ginas, present\u00e1ndolos junto a sus respectivos t\u00edtulos, en las listas de marcadores (navegadores web) o favoritos, en los historiales (navegador web) de p\u00e1ginas visitadas y de navegaci\u00f3n reciente, y toda vez que deban hacer referencia a ellas.\u00bb<\/p>\n<p>El <strong>favicon<\/strong> adem\u00e1s de cumplir con la funci\u00f3n de identificar tu p\u00e1gina con un peque\u00f1o icono, tambi\u00e9n denota profesionalismo, en la actualidad todas las p\u00e1ginas profesionales lo tienen.<\/p>\n<p><!--more--><\/p>\n<h2>Generadores de \u00abfavicon\u00bb<\/h2>\n<p>Para dise\u00f1ar el <strong>favicon<\/strong> algunos desarrolladores utilizan editores gr\u00e1ficos como <strong><a href=\"http:\/\/www.gimp.org\/\">The Gimp<\/a><\/strong> o Photoshop, pero si andas en busca de m\u00e1s opciones, estas son algunas \u00aben l\u00ednea\u00bb que te permitir\u00e1n crear uno de forma sencilla:<\/p>\n<ul>\n<li><strong><a href=\"http:\/\/www.favicon.cc\/\">Favicon.cc:<\/a><\/strong> una herramienta muy f\u00e1cil de utilizar que te permite importar una imagen o crear un nuevo dise\u00f1o con una vista previa autom\u00e1tica de tu favicon y editarla en la misma p\u00e1gina web.<\/li>\n<li><strong><a href=\"http:\/\/www.256pixels.com\/\">256pixels.com: <\/a><\/strong>una herramienta que te permite crear tu favicon pixel por pixel con vista previa. Mantiene una colecci\u00f3n que se actualiza diariamente para que cojas \u00abideas\u00bb.<\/li>\n<li><strong><a href=\"http:\/\/www.favicontool.com\/\">Favicontool: <\/a><\/strong>te permite crear tu favicon a trav\u00e9s de subir una imagen predeterminada de cualquier tama\u00f1o y dimensi\u00f3n y asociarla un texto animado (scroll).<\/li>\n<li><strong><a href=\"http:\/\/www.favicongenerator.com\/\">Favicongenerator.com:<\/a><\/strong> te permite crear tu favicon en tan s\u00f3lo 5 pasos y una imagen.<\/li>\n<li><strong><a href=\"http:\/\/www.dagondesign.com\/tools\/favicon-generator-tool\/\">Dagondesign.com: <\/a><\/strong>sube una imagen de 16 x 16 en cualquier formato y tendr\u00e1s listo tu favicon en un paso.<\/li>\n<li><strong><a href=\"http:\/\/favicon.ru\/en\/\">Favicon.ru: <\/a><\/strong>crea tu favicon en 3 diferentes tama\u00f1os.<\/li>\n<\/ul>\n<p>En todos los casos una vez finalizado el proceso (ya sea desde una imagen previa que puedes \u00absubir\u00bb\u00a0 o creando el icono desde cero) podr\u00e1s descargarte el fichero resultante \u00abfavicon.ico\u00bb.<\/p>\n<div id=\"stcpDiv\">\n<h2><b>C\u00f3mo usar finalmente el \u00abfavicon\u00bb<br \/>\n<\/b><\/h2>\n<p>Si tienes un blog, estos disponen de herramientas para personalizar las p\u00e1ginas y el icono que las representa. Para <strong>Blogger<\/strong> de google se hace desde la secci\u00f3n \u00abDise\u00f1o\u00bb y pulsando sobre\u00a0 \u00abEditar\u00bb del bloque \u00abfavicon\u00bb:<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"text-align: center;\"><a href=\"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-content\/uploads\/sites\/2\/2015\/01\/f1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1461 size-medium\" src=\"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-content\/uploads\/sites\/2\/2015\/01\/f1-300x163.jpg\" alt=\"f1\" width=\"300\" height=\"163\" srcset=\"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-content\/uploads\/sites\/2\/2015\/01\/f1-300x163.jpg 300w, https:\/\/diocesanos.es\/blogs\/equipotic\/wp-content\/uploads\/sites\/2\/2015\/01\/f1.jpg 985w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/td>\n<td style=\"text-align: center;\"><a href=\"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-content\/uploads\/sites\/2\/2015\/01\/f2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-1462\" src=\"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-content\/uploads\/sites\/2\/2015\/01\/f2-150x150.jpg\" alt=\"f2\" width=\"150\" height=\"150\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>En el caso de querer asociarlo a nuestra p\u00e1gina lo recomendable es colocarlo en la carpeta ra\u00edz de nuestro sitio web. Es decir, si tu dominio es<em> www.tupagina.com<\/em>, el <strong>favicon<\/strong> deber\u00eda estar en <em>www.tupagina.com\/favicon.ico.<\/em><\/p>\n<p>Una vez \u00absubido\u00bb el fichero modificaremos nuestro c\u00f3digo HTML. Solo tienes que colocar un elemento <em><strong>LINK<\/strong><\/em> entre las etiquetas de cabecera <em><strong>HEAD<\/strong><\/em> de tus ficheros <em><strong>HTML<\/strong><\/em>. Por ejemplo:<\/p>\n<ul>\n<li>Si usas formato .ICO:<\/li>\n<\/ul>\n<pre>&lt;linkrel=\u201dshortcut icon\u201d href=\u201dhttp:\/\/www.tupagina.com\/favicon.ico\u201d&gt;<\/pre>\n<ul>\n<li>Si usas otros formatos como .PNG o .GIF:<\/li>\n<\/ul>\n<pre>&lt;link rel=\u201dshortcut icon\u201d type=\u201dimage\/png\u201d href=\u201dhttp:\/\/www.tupagina.com\/favicon.png\u201d&gt;<\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Seg\u00fan la wikipedia \u00abun favicon, del ingl\u00e9s favorites icon (icono de favoritos), tambi\u00e9n conocido como icono de p\u00e1gina, es una peque\u00f1a imagen asociada con una p\u00e1gina o sitio web en particular. Los navegadores gr\u00e1ficos suelen mostrar el favicono de la p\u00e1gina visitada, si \u00e9sta lo posee, en la barra de direcciones y en el encabezado &hellip; <a href=\"https:\/\/diocesanos.es\/blogs\/equipotic\/2015\/01\/16\/como-crear-un-favicon-para-tu-web-o-blog\/\" class=\"more-link\">Seguir leyendo <span class=\"screen-reader-text\">C\u00f3mo crear un \u00abfavicon\u00bb para tu web o blog<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[76,6],"tags":[172,7],"class_list":["post-1460","post","type-post","status-publish","format-standard","hentry","category-graficos","category-practicas","tag-favicon","tag-web"],"_links":{"self":[{"href":"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-json\/wp\/v2\/posts\/1460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-json\/wp\/v2\/comments?post=1460"}],"version-history":[{"count":0,"href":"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-json\/wp\/v2\/posts\/1460\/revisions"}],"wp:attachment":[{"href":"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-json\/wp\/v2\/media?parent=1460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-json\/wp\/v2\/categories?post=1460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/diocesanos.es\/blogs\/equipotic\/wp-json\/wp\/v2\/tags?post=1460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}