Sergio Koller
Dic 02, 2020 | 13 min de lectura

Seguro que muchas veces, te has encontrado con una imagen pequeña en las pestañas de tu navegador al visitar una página web. Esta imagen se llama Favicon, y en este artículo, te contaremos qué es y cómo puedes crear uno con el tamaño perfecto para tu sitio web.

¿Qué es un Favicon?

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, incluido el de SE Ranking. 

Por lo general, se trata de un logo, la primera letra del nombre de la empresa o simplemente una imagen que refleja los detalles del sitio Web que representa.

ejemplo favicon

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.

favicon pestana navegador

Si bien 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 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, el navegador mostrará un símbolo de navegador genérico.

favicon genérico

2. Además de la barra de direcciones, también los podemos encontrar en el historial del navegador.

historial navegador favicon

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

barra marcadores

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

otros marcadores favicon

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.

resultados serps

Estas representaciones gráficas ayudan a atraer 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á 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 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.

¿Cómo crear un Favicon con el formato y el tamaño correcto?

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, básicamente, todos los parámetros técnicos.

Pero, ¿por dónde empezar? Empieza eligiendo el formato y tamaño correcto.

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 utilizan el 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 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 SVG, otros podrían admitir este nuevo formato muy pronto.

Para saber qué formatos 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.

can i use formatos

Tamaño

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

dimensiones favicon

Entonces, ¿qué tamaño 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.

carta favicon alta resolución

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.
  • 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 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.

¿Cuáles son las mejores herramientas 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. Diseñarlo en un editor gráfico como Photoshop usando un plugin especial Favicon.ico.
  2. Crearlo en un sitio Web (por ejemplo, Katvin o favicon.cc) y luego descargarlo en un formato adecuado.

favicon cc

3) Usar una imagen existente de tu logo, por ejemplo, y cargarla en un generador Online 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 opciones.

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

Decorando tu sitio Web 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 principales aspectos técnicos de los Favicons, pasemos a lo que se considera apropiado en el diseño, y lo que deberías borrar por completo de tu memoria.

Puntos a tener en cuenta en su diseño

“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 diseñan sus Favicons con color, y tú contrariamente, podrías optar por uno 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? 

Intenta no tener muchos pequeños detalles en tu Favicon y tampoco incluir todos los colores imaginables en él.

¿Representa tu Favicon tu nicho y sitio Web? 

A veces, solo falta 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.

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, 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, con el nombre de tu dominio, 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 en diferentes dispositivos: usando sitios Web, como Realfavicongenerator.

Sin embargo, si 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 claro y único?
  4. ¿El archivo del Favicon es accesible para los rastreadores?

Quiero señalar que el acceso 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 posicionarse en los diferentes buscadores Online, 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. Entre otras cosas, puedes ejecutar un chequeo técnico completo de tu sitio Web que incluye encontrar tu Favicon.

auditoría web

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. Revísalo todo de nuevo.

Conclusión

Como hemos visto durante todo el artículo, tu Favicon es un detalle muy pequeño que puede afectar la percepción pública de tu sitio Web y marca, su reconocimiento e incluso el volumen de tráfico que obtiene de la búsqueda, así que no lo subestimes.

En resumen, 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: 87
Deja un comentario

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

MÁS ARTÍCULOS
MARKETING
¿Qué es el SEM y cómo funciona el Search Engine Marketing?
Dic 16, 2020 15 min de lectura

En este artículo te contamos qué es el SEM o Search Engine Marketing y por qué deberías implementarlo en la estrategia de Marketing Digital de tu negocio. Descubre todas las ventajas y desventajas de este tipo de publicidad Online, así como los conceptos más relevantes. Además, te contamos los puntos más importantes a tener en cuenta al realizar una campaña de SEM y cómo SE Ranking te puede ayudar en ello.

Sergio Koller
MARKETING
Configurando anuncios en Google Maps
Sep 08, 2020 15 min de lectura

No tienes que gastar ni un céntimo para agregar tu empresa a Google Maps, y en la era moderna, las personas pueden estar en frente a tu oficina o tienda y no saber que está allí porque están pegadas a sus teléfonos. Pero con Google Maps, puedes obtener el "tráfico peatonal" que necesitas. Aquí analizamos todo lo que necesitas saber para anunciar tu empresa en Google Maps.

Sergio Koller
MARKETING
Creando un kit de herramientas de marketing para que tu sitio web sea el centro de atención
Jun 09, 2020 35 min de lectura

Con muchas maneras de promocionar tu sitio web en el panorama digital moderno, la pregunta es qué técnicas pueden ayudarte a obtener resultados rápidos y luego mantener la visibilidad en línea. En esta publicación, encontraras dos planes de promoción para elegir según tus objetivos y los recursos disponibles. Cada estrategia sugerida viene con consejos prácticos, por lo que seguramente sabrás por dónde empezar.

Sergio Koller