Sergio Koller
Feb 24, 2020 | 12 min de lectura

El favicon es una pequeña imagen cuadrada que representa un sitio web en los navegadores. Si miras la barra de direcciones de tu navegador en este momento, estoy seguro de que verás varios favicons, incluido el de SE Ranking. Por lo general, los favicons son un logo, la primera letra del nombre de la empresa o simplemente una imagen que refleja los detalles del sitio web que representa.

Los favicons nos ayudan a relacionar visualmente cada pestaña del navegador con un determinado sitio web. Y si eres como yo y tiendes a mantener docenas de pestañas abiertas simultáneamente, al final no podrás leer sus nombres, los favicons son tus mejores amigos y te ayudarán a encontrar el sitio web que necesitas de forma más rápida.

Si bien los favicons pueden parecer pequeños e insignificantes, tener uno realmente puede marcar una gran diferencia en términos de experiencia de usuario y branding. En este artículo, descubriremos de dónde provienen los favicons, qué tipos de favicons se usan en los navegadores modernos y cómo crear uno para tu sitio web.

De Internet Explorer a las SERP de Google

En 1999, el favicon se introdujo en Internet Explorer como una forma de ayudar a los buscadores a distinguir las páginas web marcadas de otras. Y como las páginas marcadas se llamaron (y probablemente todavía lo son) «Favoritos» en Internet Explorer, las palabras «favorito» e «icono» se combinaron para crear un nuevo término.

1. Hoy en día, los favicons se muestran justo encima de la barra de direcciones, independientemente de si el sitio web está marcado o no. Y en la pequeña posibilidad de que un sitio web no tenga un favicon, el navegador mostrará un símbolo de navegador genérico.

2. Además de la barra de direcciones, también se pueden encontrar favicons en el historial del navegador.

3. Las páginas marcadas también incluirán un favicon, en la barra de Marcadores …

4.… y también en «Otros marcadores».

5. Desde mayo de 2019, Google ha estado usando favicons en la SERP móvil, además la SERP de escritorio también obtuvo una nueva apariencia a principios de 2020.

Los favicons atraen la atención del usuario y aumentan el reconocimiento de la marca. Si los usuarios visitan un sitio web un par de veces con un favicon destacable, lo distinguirán fácilmente de otros en el futuro. Piensa en una marca famosa con la que interactúas a diario, como Facebook o Twitter, deberías poder recordar fácilmente sus favicons.

Los favicons de Facebook y Twitter se parecen exactamente a sus logos. Entonces, ¿todo lo que necesitas para un favicon es minimizar la imagen de tu logo y subirla a tu sitio web? Profundicemos en todos los detalles técnicos y hablemos sobre lo que se necesita para crear un favicon.

Cumpliendo los requisitos técnicos

Ahora, si quieres que tus favicons se muestren correctamente en todo tipo de dispositivos, en buena calidad y con la imagen que tienes en mente, debes seguir las guías, estándares y mejores prácticas para favicon, básicamente, todos los parámetros técnicos.

Pero, ¿por dónde empezar? Comienza eligiendo el formato y tamaño de favicon correctos.

Formato del Favicon

Originalmente, todos los favicons se crearon como archivos ICO, un formato desarrollado por Microsoft para almacenar íconos de programas de Windows. La mayor ventaja de este formato es que puede almacenar imágenes de diferentes tamaños en un solo archivo.

Antes, Internet Explorer solo admitía este formato de archivo, pero los navegadores web modernos también te permiten usar iconos PNG y hay algunos navegadores que incluso admiten formatos GIF, JPEG y SVG. La única excepción aquí son las versiones antiguas de Internet Explorer, como la 10 y versiones anteriores, que solo son compatibles con archivos ICO.

Por lo general, los favicons con formato ICO ahora se consideran un poco desactualizados y la mayoría de los sitios web actuales tienen favicons en formato PNG. La razón de esto es la calidad de la imagen: los favicons PNG de alta compatibilidad entre navegadores y multiplataformas se ven mucho mejor en la mayoría de los navegadores y dispositivos modernos.

Los favicons en los formatos de archivo SVG, GIF y JPEG no son tan buenos en términos de compatibilidad con el navegador. Sin embargo, esto puede cambiar en el futuro. El formato SVG (gráficos vectoriales escalables) puede convertirse en la nueva norma, ya que su uso resolverá el problema de crear múltiples favicons en diferentes tamaños para adaptarse a cada dispositivo. Por lo que, si bien solo unos pocos navegadores actualmente admiten favicons SVG, otros podrían admitir este nuevo formato muy pronto.

Para saber qué formatos de favicon son compatibles con diferentes navegadores, revisa el sitio web Can I Use. Aquí puedes ver, por ejemplo, qué versiones del navegador son compatibles con favicons PNG y SVG.

Tamaño del Favicon

El favicon clásico mide solamente 16х16 píxeles. Algunos navegadores antiguos aún usan cuadrados pequeños, pero si quieres que tu favicon se vea bien en dispositivos modernos, también deberás crear variaciones del favicon con una resolución más alta. Dependiendo del tipo de sistema operativo, es posible que debas usar los siguientes tamaños:

Entonces, ¿qué tamaño de favicon es el adecuado? Google recomienda la mayor resolución posible de 192 × 192. Recientemente, algunos webmasters recibieron una carta de Google que los animaba a usar favicons de alta resolución para obtener más clics. Por el momento, Google simplemente alarga los favicons de baja resolución cuando se requiere un tamaño mayor, como para la pantalla de inicio de Android. Como resultado, todas las imágenes se ven borrosas y afectan la experiencia de usuario.

Por lo tanto, si no quieres perder clics, considera «actualizar» el favicon de tu sitio. Aquí hay algunas guías generales que podrías seguir:

  • Usa un icono cuadrado.
  • El favicon debe representar solo tu marca y no contener símbolos inapropiados (como esvásticas); de lo contrario, Google no lo mostrará y utilizará el símbolo genérico de favicon en su lugar.
  • El archivo del favicon debería ser accesible para las arañas de Google.

Ahora, como el atributo de tamaño se introdujo en HTML5, también puedes especificar fácilmente varios tamaños del mismo icono. El atributo te permite establecer el ancho y la altura del favicon, y también puedes especificar varios valores separados por un espacio:

<link rel="icon" sizes="<16>X<16>"> 

<link rel="icon" sizes="<16>X<16>,<32>X<32>">

Los parámetros técnicos de los favicons dependen en gran medida de los dispositivos o navegadores que los escanean. Por esta razón, existen cientos de servicios web que pueden ayudarte a tener en cuenta todos los matices y crear favicons que tengan el formato y tamaño correctos.

En busca de ayuda en la web para crear un favicon

Si alguna vez se te ocurre la idea de simplemente cambiar el nombre de tu archivo de logo a favicon.ico, olvídalo porque no funciona así. Lo más probable es que tengas muchos errores cuando se trata de mostrar tu favicon en diferentes navegadores.

¿Se puede evitar?

Por supuesto. De hecho, hay varias formas de crear un favicon para sitios web, como:

1) Crearlo en un editor gráfico como Photoshop usando un plugin especial Favicon.ico.

2) Elaborarlo en servicios web especiales (por ejemplo, Katvin o favicon.cc) y luego descargarlo en un formato adecuado.

3) Usar una imagen existente de tu logo, por ejemplo, y cargarla en un generador de favicon en línea como Favicon.io, Realfavicongenerator.net, etc.

4) Descargar favicons listos de bases de datos especiales, como Findicons con más de 500 mil opciones para elegir e IconJ con más de 18 mil favicons.

Una vez que descargues el favicon generado, todo lo que queda es añadirlo a tu sitio.

Decorando tu sitio con un favicon

Primero, carga tu favicon al directorio raíz del sitio utilizando un administrador de archivos como Filezilla. Después, todo lo que tienes que hacer es insertar el siguiente código en la etiqueta meta <head> </head>:

<head> 

  ... 
  
<link rel="icon" href="https://yoursite.com/favicon.png" type="image/x-icon">   

<link rel="shortcut icon" href="https://yoursite.com/favicon.png" type="image/x-icon">  

  ...

</head>

Bien, ahora que conocemos todos los aspectos técnicos principales de los favicons, pasemos a lo que se considera apropiado en el diseño de los favicons, y lo que deberías borrar por completo de tu memoria.

Simple no significa malo en lo que se refiere al diseño del favicon

Antes de salir corriendo a anotar tu próxima idea sobre el favicon, ¿por qué no echar un vistazo a los resultados de búsqueda que aparecen para tus palabras clave objetivo? ¿Cómo lucen los favicons que tienen?

Y a medida que lo vas haciendo, hazte las siguientes preguntas:

¿Tu favicon destaca entre la multitud? Quizás, tus rivales decoran sus favicons con color y, tú contrariamente, podrías optar por un favicon en blanco y negro o incluso algo conceptualmente diferente.

¿Puede un favicon GIF animado ayudarte a ser diferente? ¿O será una molestia total para los buscadores, creando un efecto que (muy probablemente) hará que parezca que tu sitio web no ha terminado de cargarse?

¿Se entiende tu favicon cuando tiene 16 × 16 píxeles? Haz tu mejor esfuerzo para no tener pequeños detalles en tu favicon y tampoco intentes incluir todos los colores imaginables en él.

¿Representa tu favicon tu nicho y sitio web? A veces, solo falta con mirar el favicon de una marca e inmediatamente comprender el tipo de negocio en el que se encuentra. Otras veces, incluso puedes reconocer el estilo visual exacto de la marca y su sitio web en el favicon.

Ten en cuenta que un buen favicon siempre será claro, simple y fácil de recordar.

Ahora que sabes cómo crear un favicon bien hecho y fácil de recordar y añadirlo a tu sitio web, es hora de determinar si se mostrará o no correctamente en los motores de búsqueda. ¡Vamos a echar un vistazo más de cerca!

Revisando errores críticos de tu favicon

Solo con buscar tu sitio web en Google, podrás comprobar rápidamente cómo se muestra tu favicon en la búsqueda o puedes usar este enlace ejemplo para abrir solo el favicon de tu sitio:

  • http://www.google.com/s2/favicons?domain=mysite.com

También hay otra forma de comprobar cómo se ve el favicon en diferentes dispositivos: usando servicios web especiales, como Realfavicongenerator.

Sin embargo, si tu favicon no se muestra correctamente o no aparece en Google por algún motivo, comienza por comprobar lo siguiente:

  1. ¿Se encuentra la imagen gráfica en la carpeta raíz del recurso en formato de archivo ICO, PNG o GIF?
  2. ¿El código que conduce a la imagen en las páginas del recurso está escrito correctamente?
  3. ¿Es el favicon claro y único?
  4. ¿El archivo del favicon es accesible para los rastreadores?

Quiero señalar que el camino a la imagen tiene un impacto directo en qué tan bien se muestra el favicon. Si quieres eliminar o editar tu favicon de alguna manera, todo lo que tienes que hacer es eliminar o modificar el archivo favicon.ico (JPEG, GIF, PNG).

En términos generales, incluso si por tu parte haces todo correctamente, ten en cuenta que a los motores de búsqueda les lleva tiempo indexar los favicons. De hecho, hay todo un bot dedicado solamente a esto. Lo que realmente hace es cargar los íconos del sitio web en su servidor, por lo que puede tomar hasta varias semanas para que tu imagen gráfica sea indexada.

¿Por qué no puedes prescindir de un favicon?

Los favicons ayudan a los sitios web a mantenerse a flote en el vasto océano de recursos en línea, además de hacerlos más atractivos y profesionales a los ojos de los visitantes.

Si necesitas ayuda con el tuyo, revisa nuestra Auditoría Web para obtener ayuda. Entre otras cosas, puedes ejecutar un chequeo técnico completo de tu sitio web que incluye encontrar tu favicon.

Si estás seguro de que tienes un favicon, pero nuestra Auditoría Web no lo encuentra, entonces hay un problema de indexación o la dirección del icono del sitio web es incorrecta. Revisa todo de nuevo para asegurarte.

¿Sabes que dicen que la complejidad está en los detalles? Bueno, tu favicon es un detalle muy pequeño que puede afectar la percepción pública de tu sitio y marca, su reconocimiento e incluso el volumen de tráfico que obtiene de la búsqueda, así que no lo subestimes.

En resumen, no juegues con tu favicon, ya que un buen favicon es una parte integral de tu marca y el estándar técnico de tu sitio web. Definitivamente vale la pena cada segundo que inviertas en él.

Post Views: 126
Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

MÁS ARTÍCULOS
INSIGHTS DE SEO
5 pasos para pasar tu web a HTTPS
May 29, 2020 20 min de lectura

HTTPS es un protocolo seguro de transferencia que cada sitio web necesita para proteger los datos de los usuarios. Descubre por qué debes cambiar a HTTPS sin más demoras, por qué necesitas un certificado SSL y dónde obtenerlo. También compartiremos algunas ideas sobre cómo configurar tu sitio web y Google Search Console después de pasar a HTTPS que to ayudarán a mantener tus rankings y tráfico.

Sergio Koller
INSIGHTS DE SEO
Entendiendo las palabras clave de cola larga o "Long Tail" para mejorar el SEO
May 19, 2020 28 min de lectura

Las palabras clave de cola larga tienen más de lo que parece. Consisten en frases de 3-5 palabras, tienen un bajo volumen de búsqueda, un bajo nivel de competencia y una alta tasa de conversión. Pero, ¿cuál es la mejor manera de encontrarlas y usarlas en tu sitio web para obtener una ventaja SEO? Descúbrelo leyendo esta publicación.

Sergio Koller
INSIGHTS DE SEO
Cómo mantener tu SEO durante el rediseño del sitio web
May 08, 2020 22 min de lectura

El rediseño del sitio web es un proceso complejo que transforma un sitio web tanto por fuera como por dentro. Muchas cosas pueden salir mal con respecto al SEO a medida que hagas pruebas A/B, modifiques el diseño de las páginas del sitio web, renueves la estructura del sitio web y modifiques el contenido. Aprende a manejar todos los cambios que realices para pasar por el rediseño perdidas.

Sergio Koller