La identificación visual juega un papel importantísimo en el mundo online y utilizar un favicon es una excelente forma de lograrlo. Se trata de un ícono que aparece en la pestaña del navegador, puede mostrar el logo de la marca o cualquier otra imagen, es necesario para el posicionamiento y captación de usuarios.

📌¿Qué es Favicon?

Es un término anglosajón que se traduce como Favicono, se trata de un elemento distintivo que puede verse en la pestaña de los navegadores, tiene forma de ícono y generalmente es de 16 x 16 o de 32 x 32 pixeles. Al entrar a una página web se puede ver en la parte superior izquierda, justo al lado del nombre de dicha página. También se puede al guardar la página como favoritos o en la barra de herramientas.

Su función principal es asociar la página con la imagen corporativa de una empresa, por lo que usualmente se utiliza el logo de la marca. Esto forma parte del trabajo del diseñador gráfico, aunque trabajará en conjunto con el desarrollador para garantizar que se adapte a diferentes navegadores.

📌 ¿Para qué sirve?

Originalmente tenía una función decorativa, pero con el paso del tiempo los propietarios se dieron cuenta que este icono podría formar parte de una estrategia más allá de identificar visualmente a la página. Cómo se mencionó arriba, tiene la función de fortalecer la identidad corporativa, por lo que puede ser un elemento esencial para promocionar el sitio web de una empresa. Pero, también cuenta con los siguientes objetivos.

  • Es una forma ideal para que el usuario identifique la página en la lista de favoritos rápidamente.
  • Cuando se tienen abiertas varias pestañas al mismo tiempo, el favicon ayuda a identificar cada página, incluso si el nombre desaparece detrás de cada pestaña.
  • También será más fácil de localizar en la lista de páginas recientes o en el historial de navegación.
  • Es una excelente forma de promoción, ya que los usuarios suelen recordar una imagen de forma más frecuente que el nombre de la empresa.
  • También puede generar un efecto positivo en el SEO o la optimización para motores de búsqueda.

📌 Cómo crear un favicon

Como se mencionó más arriba, es necesario preparar la imagen en diferentes tamaños para que sean compatibles con diferentes plataformas o navegadores. Por ejemplo, Google utiliza un tamaño de 96×96 px, pero Opera de 228×228 px. Igualmente, la imagen puede tener diferentes extensiones o formatos de imagen, originalmente se utilizaba “.ico” pero ahora es posible utilizar .png, .jpg, .gif, .svg, entre otros.

Para crear uno se debe utilizar un editor gráfico que permite alterar el tamaño de la imagen, el favorito es Photoshop. Para hacerlo desde esta herramienta se deben seguir estos pasos.

  1. Es necesario abrir el programa crear un archivo nuevo desde la pestaña archivo.
  2. Al hacer clic en el botón crear nuevo se debe llenar el recuadro de valores con el tamaño la resolución y un modo de color, se recomienda que la anchura y altura sea de 32×32 px, una resolución de 72 píxeles y un modo de color RGB.
  3. Seguidamente, se inserta el icono que puede ser el logo de la marca haciendo clic en el botón abrir dentro de la pestaña de archivo.
  4. Después, se selecciona una imagen dentro del disco duro y finalmente se hace clic en abrir.
  5. A continuación, se hace clic en la herramienta mover del menú y se ajusta dentro del archivo nuevo, es necesario marcar la casilla mostrar y transformar para redimensionar la imagen.
  6. Al finalizar, se exporta el archivo haciendo clic en exportación rápida como png dentro de la pestaña archivo.
  7. Y se guarda dentro de una carpeta elegida para luego insertarla en el código HTML.

📌 Ejemplo

Para ver cómo es un favicon solo es necesario abrir una página, actualmente la mayoría de los sitios web posicionados en la página de resultados de Google cuentan con este elemento. Por ejemplo, en el sitio web de Wikipedia se puede ver que muestran su típico logo “W” dentro de la pestaña del navegador, aquí se puede ver en una imagen.

favicon ejemplo

📌 Más información sobre favicon

Recuerda que Google tiene muy en cuenta los detalles para posicionar, los iconos son uno de ellos, es por eso que aquí tienes un par de enlaces para informarte un poco más sobre cómo utilizarlos para tus estrategias en buscadores.

Pin It on Pinterest