¿Qué es un Favicon y cómo hacer uno para tu página web?
Actualizado en Marzo 2022
Al crear una página web, mucha gente tiende a pasar por alto un pequeño toque final que puede marcar una gran diferencia: el favicon. Este pequeño complemento al diseño de tu página web deja una impresión mucho mayor que su tamaño real, así que no subestimes su importancia.
¿Qué hace que el favicon sea un elemento tan poderoso en el diseño de un sitio web? En este artículo, hablaremos sobre qué es un favicon, su importancia, y te enseñaremos todo lo que necesitas saber sobre cómo crear uno, utilizando un creador de logos.
01. ¿Qué es un favicon?
Un favicon, de "ícono favorito", es un pequeño ícono de 16x16 píxeles que se utiliza en los navegadores web para representar un sitio o una página web. En otras palabras, cuando creas un favicon, sirve como ícono de tu página web, o un identificador visual para que los usuarios puedan localizar tu página web en la red.
Los favicones son más vistos en las pestañas de la parte superior de un navegador web, pero también los puedes encontrar en la barra de favoritos de tu navegador, en el historial y en los resultados de búsquedas, junto a la url de la página. En algunos casos, como en Google Chrome, los favicones aparecen incluso en la página de inicio del navegador.
Favicon en un navegador web:
Favicon en la barra de favoritos:
Favicon en el historial del navegador:
Favicon en los resultados de búsqueda:
02. ¿Por qué es importante tener un favicon?
A pesar de ser tan pequeños, los favicones son de gran importancia para cualquier página web, ya que mejoran la experiencia de tus usuarios, tu marca y tu profesionalidad.
Experiencia de usuario: Los favicones actúan como señales visuales para tu página web, mejorando la experiencia del usuario. Dado que ayudan a los usuarios a localizar fácilmente la pestaña de tu página web en su navegador y en diferentes aplicaciones, como la barra de favoritos, un favicon facilita que los usuarios vuelvan a visitar tu página una y otra vez. Los favicones también pueden tener un impacto positivo en la experiencia de usuario en móviles. El diseño web móvil trata de causar un impacto, y muchas veces nada lo hace con más fuerza, o más fácilmente, que un favicon.
Marca: Para una marca realmente sólida, hasta el más mínimo detalle es importante. A pesar de su pequeño tamaño, los favicones contribuyen al branding y a la visibilidad de tu página web extendiendo el lenguaje de tu marca fuera de tu página. Los favicones también añaden legitimidad y profesionalidad a tu sitio web, haciendo que luzca completo.
Credibilidad: Aunque los favicones no tienen ningún impacto en la seguridad de tu página, automáticamente, los usuarios parecen confiar en las páginas con un favicon. Esto se debe a que señalan a los usuarios que están claramente en tu página, independientemente de cómo te encontraron, a través de una búsqueda por tu marca o por otra palabra.
Los usuarios regresan: Los favicones son un potente identificador de marca, que facilita que tu página destaque, ya sea en los resultados de búsqueda o en el historial del navegador de un usuario. Por ello, un favicon reconocible ayuda a los usuarios a volver a tu página con más frecuencia. Además, cuando los usuarios marcan tu página, un favicon hará que sea más fácil de encontrarte entre su colección de favoritos.
Favicones y SEO: Los favicones no tienen un impacto directo en el SEO de una página. Sin embargo, dado que facilitan la identificación por parte de los navegadores y mejoran la experiencia general del usuario, las cualidades de un favicon pueden mejorar orgánicamente la posición de tu página en los resultados de búsqueda.
03. ¿Cómo hacer un favicon?
Ya que es una extensión de tus esfuerzos de branding, un favicon debe ser una adaptación simplificada del logo de tu marca. Recuerda un favicon debe reforzar la identidad de marca que ya has construido, en lugar de distraer a los usuarios de ella. Si aun no tienes un logo, te recomendamos checar esta guía completa de cómo hacer un logo.
Para crear tu favicon, puedes considerar la posibilidad de contratar a un diseñador web profesional, o hacerlo tú mismo utilizando un programa de diseño de tu elección. Te recomendamos utilizar el creador de logos de Wix, que te permite crear un favicon profesional y personalizado para reflejar mejor tu estilo y necesidades. En todo caso, sin importar qué herramienta elijas estas son algunas pautas que debes seguir al momento de crear tu propio favicon.
Tamaño de un favicon:
El tamaño óptimo para crear un favicon es de 16x16 píxeles, que es el tamaño en el que se suelen mostrar. Sin embargo, también pueden aparecer en dimensiones mayores (como 32x32 píxeles). Si necesitas ayuda para conseguir el tamaño adecuado para tu favicon, prueba a utilizar la herramienta para redimensionar imágenes de Wix. Aquí hay algunos tamaños de favicon estándar, y dónde usar cada uno:
16x16 píxeles: Favicon del navegador
32x32 píxeles: Favicon de acceso directo a la barra de tareas
96x96 píxeles: Favicon de acceso directo al escritorio
180x180 píxeles: Favicon de Apple touch
Si te interesa saber mas acerca de los diferentes tamaño y versiones de un logo, te compartimos esta guía acerca del ideal tamaño de un logo.
Tipos de archivos de un favicon:
El formato original del favicon solía ser el ICO. Hoy en día, el formato de archivo o arte vectorial preferido para un favicon es PNG o JPEG. También SVG es una opción cada vez más popular, ya que cada vez más navegadores empiezan a soportarlo. Los navegadores también son capaces de mostrar favicones creados como GIF, aunque el tamaño pequeño hace que los favicones GIF sean más difíciles de ver. A continuación damos una breve descripción de estos tipos de imágenes.
ICO: Desarrollado por Microsoft, este fue el formato de archivo original para los favicones. Todos los navegadores lo soportan y puede incluir imágenes de varios tamaños dentro de un mismo archivo. Esto te permite dimensionar y escalar tu imagen, sin depender del navegador. En muchos casos, y cuando un favicon se guarda como ICO y otro tipo de archivo, el navegador seguirá eligiendo mostrar la versión ICO.
PNG: Este es un formato de archivo popular para favicones ya que es un tipo de archivo con el que los creadores de páginas web están muy familiarizados. Es un formato fácil de crear, y generalmente ofrece imágenes y favicones de alta calidad. Los archivos PNG también tienen la ventaja añadida de ser ligeros, lo que significa que se cargan rápidamente. En caso de que tu diseño tenga un fondo transparente, asegúrate de guardar tu archivo como PNG, con su configuración de transparencia activada.
SVG: Estos archivos son conocidos por su ligereza. El mayor beneficio de este formato de imagen para favicones, es su capacidad para ofrecer imágenes de alta calidad, que no ralentizan la velocidad de la página o su rendimiento. En el pasado, el uso de SVG para favicones era limitado debido a la falta de compatibilidad con los navegadores, pero esto está cambiando.
04. Consejos para diseñar un favicon
Diseñar algo tan pequeño puede ser complicado ya que debes ser muy preciso. Aquí tienes algunos consejos para crear el favicon que mejor se adapte a tu marca y a tu página web:
Se simple
El pequeño tamaño de los favicones requiere que su diseño sea preciso. No te excedas en los detalles, evitando elementos como las minúsculas, las texturas o el sombreado. En su lugar, apuesta por un ícono audaz, claro y sencillo que sea reconocible al instante.
El favicon de la diseñadora de joyas y usuaria de Wix, Ilaria Bonardi, es un gran ejemplo del diseño de un favicon sencillo, compuesto por tres simples puntos.
También nos encanta la diversión y extravagancia del favicon de Ducknology, el pato es una adaptación de su logo y representa todo lo que hace que esta página y esta marca sean tan únicos.
Sigue la identidad de tu marca
Un favicon debe encapsular el espíritu de tu página web y de tu marca, conservando el mismo lenguaje visual y la misma combinación de colores que el resto de tu página web.
En el caso de la página de Wix del diseñador gráfico Bhroovi, su favicon con los colores del arco iris es una continuación del mismo lenguaje visual colorido de su página web.
El favicon de eBay también fusiona los colores de la marca con un pequeño ícono de una bolsa compras, capturando perfectamente el espíritu del sitio con una versión abreviada del diseño de su logo.
Utiliza poco o ningún texto
Si quieres incluir texto en tu favicon, limítate a entre uno y tres caracteres. Las iniciales o abreviaturas suelen ser buenas soluciones para acortar textos, como el nombre de tu marca.
La página Wix para la organización sin fines de lucro Arte, utiliza la inicial A de su logo como favicon, con un fondo verde neón añadido para llamar la atención.
Por otro lado, el favicon que adorna la página Wix de Red Fern, con sede en Brooklyn, no tiene ningún texto. En su lugar, sólo extrae el ícono de la hoja de su logo, para crear un impacto y reforzar su marca.
Adapta el diseño de tu logo
Aunque algunos logos pueden verse mejor incluso en tamaño de favicon, la mayoría son apenas legibles cuando se reducen. Si quieres utilizar tu logo como favicon, probablemente tendrás que hacer algunos ajustes. Omitir el tag, o utilizar sólo una inicial, son algunas de las formas de hacer que los logos funcionen en tamaños de favicon.
Por ejemplo, el favicon de Google es ligeramente diferente de su logo, aunque incorpora los mismos valores de diseño. El favicon sólo muestra la conocida inicial de la G, al tiempo que incorpora perfectamente los cuatro colores de la marca en esa única letra.
La ilustradora y usuaria de Wix, Charlotte Mei, adopto un enfoque diferente, utilizando las iniciales de su logo dibujado a mano como favicon.
Ten en cuenta el color
Ten en cuenta que el favicon de tu página se mostrará sobre fondos de diferentes colores, dependiendo del contexto y del navegador utilizado. Por lo tanto, asegúrate de probar tu favicon en fondos grises, blancos y negros antes de finalizar el diseño.
05. ¿Cómo añadir un favicon en HTML?
Si has creado tu página con un creador de páginas web, añadir tu favicon en HTML no es necesario. Este paso sólo se aplica a las páginas creadas por un desarrollador. A continuación se muestra cómo se debe insertar la imagen de tu favicon en la cabecera del código para que se muestre en tu página web.
<link rel="icon" type="image/png" href="Favicon.png"/>
¿Creaste tu página web con Wix? A continuación, te mostraremos cómo personalizar y añadir fácilmente tu favicon a tu sitio.
06. ¿Cómo añadir un favicon a tu sitio Wix?
Las páginas creadas con Wix incluyen automáticamente un favicon estándar, pero puedes personalizarlo adquiriendo un plan Premium y conectando tu página a un dominio.
Cómo cambiar fácilmente tu favicon en tu página de Wix:
En el panel de control de tu página, ve a Opciones.
Haz clic en 'Ajustes de la página web' y ve a 'Favicon'.
Haz clic en 'Actualizar imagen', y selecciona una imagen existente, o haz clic en 'Subir multimedia' para subir una imagen desde tu ordenador.
Haz clic en 'Agregar a la página'. Ahora verás una vista previa de cómo se vera tu favicon en la pestaña de tu navegador.
Haz clic en 'Guardar' y ¡listo! Tu sitio web ya tiene un favicon que parecerá en la pestaña de tu página web una vez que le des a publicar.
Una vez que hayas insertado tu favicon, es conveniente que compruebes cómo se ve en todos los lugares donde se mostrará, el navegador, la pestaña de favoritos, el historial del navegador y, si es posible, también en los resultados de búsqueda. Cuando hagas esto, te recomendamos que cambies tu navegador a modo incógnito, para evitar problemas de caché. Este también es un buen momento para pensar en el aspecto de tu favicon. ¿Su diseño visual final consigue captar la esencia de tu marca?
Ahora que sabes qué es un favicon y cómo crear uno, es momento de abrir el creador de logos, crear tu propio favicon y compartirlo con el mundo.
por Danae Salinas
Blogger & Marketing Specialist - Español
