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.
1. 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:
2. 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.
3. Cómo hacer un favicon
Crear un favicon es una parte importante de tu branding. Debe ser una versión simplificada de tu logo que refuerce la identidad de tu marca. Para hacerlo, necesitarás adaptar tu logo a un tamaño más pequeño. El tamaño estándar para un favicon es de 16x16 píxeles, aunque puede ser más grande en algunos casos. Puedes usar herramientas como la de Wix para redimensionar tu imagen.
Aquí tienes algunos tamaños comunes de favicon y dónde se utilizan:
16x16 píxeles: Favicon del navegador
32x32 píxeles: Favicon en la barra de tareas
96x96 píxeles: Favicon en el escritorio
180x180 píxeles: Favicon de Apple touch
Una vez que hayas redimensionado tu favicon, guárdalo en un formato de imagen. Los formatos más comunes son PNG o JPEG, aunque SVG también se está volviendo popular.
Si no tienes un logo, puedes usar el creador de logos de Wix para crear uno personalizado que se adapte a tu estilo.Te recomendamos checar esta guía completa de cómo hacer un logo. Recuerda que tu favicon debe fortalecer tu marca, no distraer a los usuarios.
4. Ejemplos y consejos para diseñar un favicon
Diseñar algo tan pequeño puede ser complicado ya que debes ser muy preciso. Aquí tienes algunos ejemplos y 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 Ducknology, es un gran ejemplo del diseño de un favicon sencillo. 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. El favicon de eBay 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.
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.
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. La ilustradora y usuaria de Wix, Charlotte Mei, adopto un fondo blanco, utilizando las iniciales de su logo dibujado a mano.
5. 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.
6. 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.
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.