{"id":1614,"date":"2023-06-21T09:29:45","date_gmt":"2023-06-21T09:29:45","guid":{"rendered":"https:\/\/www.appyweb.es\/diccionario\/?page_id=1614"},"modified":"2024-04-02T11:48:52","modified_gmt":"2024-04-02T11:48:52","slug":"favicon","status":"publish","type":"page","link":"https:\/\/www.appyweb.es\/diccionario\/favicon\/","title":{"rendered":"Favicon"},"content":{"rendered":"<h1><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-13034\" src=\"https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/04\/Favicon-300x180.jpg\" alt=\"Favicon\" width=\"1152\" height=\"691\" srcset=\"https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/04\/Favicon-300x180.jpg 300w, https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/04\/Favicon-768x461.jpg 768w, https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/04\/Favicon.jpg 1000w\" sizes=\"auto, (max-width: 1152px) 100vw, 1152px\" \/><\/h1>\n<p>La identificaci\u00f3n visual juega un papel important\u00edsimo en el mundo online y <strong>utilizar un favicon es una excelente forma de lograrlo<\/strong>. Se trata de un \u00edcono que aparece en la pesta\u00f1a del navegador, puede mostrar el logo de la marca o cualquier otra imagen, es necesario para el posicionamiento y captaci\u00f3n de usuarios.<\/p>\n<h2>\u00bfQu\u00e9 es Favicon?<\/h2>\n<p>Es un t\u00e9rmino anglosaj\u00f3n que se traduce como Favicono, se trata de <strong>un elemento distintivo que puede verse en la pesta\u00f1a de los navegadores<\/strong>, tiene forma de \u00edcono y generalmente es de 16 x 16 o de 32 x 32 pixeles. Al entrar a una p\u00e1gina web se puede ver en la parte superior izquierda, justo al lado del nombre de dicha p\u00e1gina. Tambi\u00e9n se puede al guardar la p\u00e1gina como favoritos o en la barra de herramientas.<\/p>\n<p>Su funci\u00f3n principal es asociar la p\u00e1gina con la imagen corporativa de una empresa, por lo que usualmente se utiliza el logo de la marca. Esto <a href=\"https:\/\/www.appyweb.es\/diseno-grafico\/\">forma parte del trabajo del dise\u00f1ador gr\u00e1fico<\/a>, aunque trabajar\u00e1 en conjunto con el desarrollador para garantizar que se adapte a diferentes navegadores.<\/p>\n<h2>\u00bfPara qu\u00e9 sirve?<\/h2>\n<p>Originalmente ten\u00eda una funci\u00f3n decorativa, pero con el paso del tiempo los propietarios se dieron cuenta que este icono podr\u00eda formar parte de <strong>una estrategia m\u00e1s all\u00e1 de identificar visualmente a la p\u00e1gina<\/strong>. C\u00f3mo se mencion\u00f3 arriba, tiene la funci\u00f3n de fortalecer la identidad corporativa, por lo que puede ser un elemento esencial <a href=\"https:\/\/www.appyweb.es\/marketing-de-atraccion\/\">para promocionar el sitio web de una empresa<\/a>. Pero, tambi\u00e9n cuenta con los siguientes objetivos.<\/p>\n<ul>\n<li>Es una forma ideal para que el usuario identifique la p\u00e1gina en la lista de favoritos r\u00e1pidamente.<\/li>\n<li>Cuando se tienen abiertas varias pesta\u00f1as al mismo tiempo, <strong>el favicon ayuda a identificar cada p\u00e1gina<\/strong>, incluso si el nombre desaparece detr\u00e1s de cada pesta\u00f1a.<\/li>\n<li>Tambi\u00e9n ser\u00e1 m\u00e1s f\u00e1cil de localizar en la lista de p\u00e1ginas recientes o en el historial de navegaci\u00f3n.<\/li>\n<li>Es una excelente forma de promoci\u00f3n, ya que los usuarios suelen recordar una imagen de forma m\u00e1s frecuente que el nombre de la empresa.<\/li>\n<li>Tambi\u00e9n puede generar un efecto positivo en el SEO o la optimizaci\u00f3n para motores de b\u00fasqueda.<\/li>\n<\/ul>\n<h2>C\u00f3mo crear un favicon<\/h2>\n<p>Como se mencion\u00f3 m\u00e1s arriba, es necesario preparar la imagen en diferentes tama\u00f1os <strong>para que sean compatibles con diferentes plataformas o navegadores<\/strong>. Por ejemplo, Google utiliza un tama\u00f1o de 96&#215;96 px, pero Opera de 228&#215;228 px. Igualmente, la imagen puede tener diferentes extensiones o formatos de imagen, originalmente se utilizaba \u00ab.ico\u00bb pero ahora es posible utilizar .png, .jpg, .gif, .svg, entre otros.<\/p>\n<p>Para crear uno se debe utilizar <strong>un editor gr\u00e1fico que permite alterar el tama\u00f1o de la imagen<\/strong>, el favorito es Photoshop. Para hacerlo desde esta herramienta se deben seguir estos pasos.<\/p>\n<ol>\n<li>Es necesario abrir el programa crear un archivo nuevo desde la pesta\u00f1a <em>archivo<\/em>.<\/li>\n<li>Al hacer clic en el bot\u00f3n <em>crear nuevo<\/em> se debe llenar el recuadro de valores con el tama\u00f1o la resoluci\u00f3n y un modo de color, se recomienda que la anchura y altura sea de 32&#215;32 px, una resoluci\u00f3n de 72 p\u00edxeles y un modo de color RGB.<\/li>\n<li>Seguidamente, <strong>se inserta el icono que puede ser el logo de la marca<\/strong> haciendo clic en el bot\u00f3n <em>abrir<\/em> dentro de la pesta\u00f1a de <em>archivo<\/em>.<\/li>\n<li>Despu\u00e9s, se selecciona una imagen dentro del disco duro y finalmente se hace clic en <em>abrir<\/em>.<\/li>\n<li>A continuaci\u00f3n, se hace clic en la herramienta <em>mover<\/em> del men\u00fa y se ajusta dentro del archivo nuevo, es necesario marcar la casilla <em>mostrar y transformar<\/em> para redimensionar la imagen.<\/li>\n<li>Al finalizar, se exporta el archivo haciendo clic en <em>exportaci\u00f3n r\u00e1pida como png<\/em> dentro de la pesta\u00f1a <em>archivo<\/em>.<\/li>\n<li>Y se guarda dentro de una carpeta elegida para luego insertarla en el c\u00f3digo HTML.<\/li>\n<\/ol>\n<h2>M\u00e1s informaci\u00f3n sobre favicon<\/h2>\n<p>Recuerda que Google tiene muy en cuenta los detalles para posicionar, los iconos son uno de ellos, es por eso que aqu\u00ed tienes <strong>un par de enlaces para informarte un poco m\u00e1s sobre c\u00f3mo utilizarlos<\/strong> para tus estrategias en buscadores.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.appyweb.es\/estrategias-posicionamiento-no-conoces\/\">10 estrategias de posicionamiento web que quiz\u00e1s no conoces<\/a><\/li>\n<li><a href=\"https:\/\/marketing4ecommerce.net\/asi-es-el-nuevo-buscador-de-google-como-incluir-tu-favicon-en-sus-resultados-de-busqueda\/\" rel=\"nofollow noopener\" target=\"_blank\">As\u00ed es el nuevo buscador de Google: c\u00f3mo incluir tu favicon en sus resultados de b\u00fasqueda<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La identificaci\u00f3n visual juega un papel important\u00edsimo en el mundo online y utilizar un favicon es una excelente forma de lograrlo. Se trata de un \u00edcono que aparece en la pesta\u00f1a del navegador, puede mostrar el logo de la marca o cualquier otra imagen, es necesario para el posicionamiento y captaci\u00f3n de usuarios. \u00bfQu\u00e9 es [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13034,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-1614","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/1614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/comments?post=1614"}],"version-history":[{"count":7,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/1614\/revisions"}],"predecessor-version":[{"id":13035,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/1614\/revisions\/13035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/media\/13034"}],"wp:attachment":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/media?parent=1614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}