Favicon en HTML: descubre cómo ponerlo

Cuando empiezas a navegar por internet, seguro que llegas a ese momento en el que tienes un montón de pestañas abiertas. ¿Cómo sabes moverte entre ellas y saber exactamente cuál es cada una de las páginas abiertas? ¡A través del favicon! En esa situación, solo se ve el logo de cada uno de los sitios webs, lo que recibe el nombre de favicon.

En Educa Open queremos explicarte cómo poner un favicon en HTML, aunque también te explicaremos otras formas. Por ejemplo, puedes dejar que los navegadores detecten automáticamente el favicon, aunque no sea la mejor opción. ¿Estás preparado? ¡Comenzamos!

¿Qué es un favicon y por qué deberías conocerlo?

Como ya hemos comentado, el favicon es el logotipo, que tú elijas, que aparece junto al meta título en la pestaña de tu navegador. En otras palabras, consiste en decirle al navegador que muestre la imagen que le indicas en el HTML en lugar de mostrar un espacio en blanco. Esto es interesante porque la gente va a recordar tu favicon, lo que genera autoridad para tu marca.

Crear un favicon es muy sencillo, ya que existen multitud de webs que te permiten generar el tuyo propio en cuestión de segundos. Sin embargo, aquí tienes que tener en cuenta otros aspectos como la identidad visual de tu marca. Piensa que es un elemento que el usuario va a relacionar directamente con tu marca.

Para ahondar más en el concepto de favicon, antes de explicarte cómo ponerlo en el HTML, vamos a hablar de sus funcionalidades.

¿Para qué sirve un favicon?

A continuación, te vamos a mostrar un pequeño listado con los motivos por los que debes cuidar tu favicon:

• Identidad visual: sirve para identificar de un simple vistazo a tu marca Sobre todo, en esos momentos en los que los usuarios tienen muchas pestañas abiertas.
• Profesionalismo: poner un favicon en el HTML indica que tienes un cuidado extremo con todos los detalles de la web, lo que indica un nivel de profesionalismo admirable.
• Facilidad de acceso: un favicon también se visualiza en la barra de marcadores o en los favoritos de tu navegador. Por ello, debes tenerlo en cuenta para que te localicen de forma rápida.
• Personalización: tu favicon no solo puede reflejar tu marca, sino que también el contenido de tu web.
• Formatos compatibles: en este aspecto, existe cierta flexibilidad porque se aceptan formatos de imagen como PNG y GIF.
• Fácil implementación: ¿cómo se pone un favicon en el HTML? Justo te vamos a contestar a esta pregunta.

¿Cómo pone un favicon en HTML?

En Educa Open, te mostramos el paso a paso que debes seguir para implementar un favicon en HTML. ¡Vamos!

Crea tu favicon

Como venimos diciendo, existen multitud de opciones para generar tu propio favicon. Al final, se trata de una imagen cuadrada que debe respetar las siguientes medidas: 16x16 píxeles, 32x32 píxeles o 48x48 píxeles. Es importante que especifiques el tamaño en el HTML, pero el navegador es el que, en última instancia, elegirá el tamaño más apropiado según el contexto.

El formato de la imagen

El formato adecuado para una compatibilidad máxima es el .ico, pero también puedes usar otros formatos como .png o .gif. Lo importante aquí es revisar que tanto el formato como el tamaño son los correctos.

Sube el favicon a tu servidor

Este paso es realmente sencillo. Tan solo tienes que cargar tu favicon desde el Administrador de archivos de tu alojamiento o hosting. Prepara la imagen en formato .ico o .png, por ejemplo, y realiza la operación de subida.

Poner el favicon en el HTML

Cuando ya tengas tu favicon subido al alojamiento, tienes que ir al código de tu página web. En la parte del head, deberás añadir una nueva línea:

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="images/myicon.png" />

Para que no te quede ninguna duda, vamos a explicarte el significado de cada atributo:

• rel=”icon”: con esta etiqueta le estamos diciendo que se trata del favicon de la web.
• sizes=”16×16 32×32 48×48″: aquí, como ys sabemos, tenemos que decirle directamente a la web el tamaño de nuestro favicon.
• type=”image/png”: le decimos a nuestra web que se trata de una imagen en formato .png.
• href=”images/myicon.png”: en este punto, le comunicamos la ubicación del archivo de imagen del favicon.

Guarda los cambios

Una ve que guardes los cambios en tu archivo HTML, podrás abrir el navegador web para ver tu favicon. Si no aparece, puede ser que tengas que refrescar la caché. Ten mucho cuidado con esto.

¿Existen tipos especiales de faviconos?

Sí, un aspecto importante que debes saber es que existen dos tipos especiales de iconos no estándar en el navegador Safari. Se trata de apple-touch-icon para dispositivos iOS y mask-icon para los casos en los que la navegación se produzca a través de macOS.

A continuación, te mostramos cómo se pondría en HTML en ambos casos.

apple-touch-icon

<link rel="apple-touch-icon" sizes="180x180" href="images/myicon.png" />

mask-icon

Aquí debemos tener en cuenta que el icono debe ser un SVG monocromático y debe incorporar el atributo color.

<link rel="mask-icon" href="images/myicon.svg" color="#226DAA" />