Poner un favicón en HTML

Si quieres integrar un favicón con HTML tienes dos opciones. Sin embargo, lo más común es hacerlo mediante un elemento HTML. Si aún no dispones de un favicón para tu página web, puedes crearlo con un generador.

Un favicón, término que resulta de combinar las palabras “favorite” y “icon”, es el pequeño icono de imagen que se muestra, por ejemplo, en la pestaña de este artículo como un cuadrado azul con una “I” en color blanco. Gracias a esta imagen diminuta, no solo se facilita que los usuarios reconozcan una página web entre varias pestañas, sino también en los marcadores, en una lista de aplicaciones o en los resultados de búsqueda de un buscador. Para más información sobre este interesante icono, consulta nuestro artículo “¿Qué es un favicón?.

Antes de insertar un favicón en HTML, debes crearlo. En este proceso, comprueba que la imagen, que debe responder a los principios de tu marca, se puede mostrar en alta y baja resolución. En la mayoría de los navegadores, los faviconos deben responder a las dimensiones 16 x 16 píxeles o 32 x 32 píxeles y, si es posible, deben guardarse en formato .ico, .gif o .png. No obstante, la forma más sencilla para crear un favicón es utilizar un buen generador de favicón para HTML.

La forma más segura de incluir un favicón en tu página web es hacerlo con HTML. Para ello, súbelo al directorio principal de tu dominio. Descubre paso a paso cómo integrar este icono de imagen en tu web.

Paso 1. Crea primero el icono de imagen en el formato correcto. Comprueba que la imagen cumple con el tamaño de favicón recomendado, incluye si es posible contraste en los colores usados y chequea que funciona también con una resolución baja.

Paso 2. Sube el favicón al directorio principal de tu dominio.

Paso 3. Ahora en el head introduce el siguiente código.

Sin embargo, esto solo es posible si el favicón está guardado en formato.ico. Para .png, el código es el siguiente:

Si has creado tu favicón en formato .gif, utiliza este código:

Hay una forma más sencilla de insertar un favicón en HTML. No necesitarás escribir código, sino simplemente crear el archivo y asignarle el nombre correcto. Una vez creado el favicón en el formato correcto, guárdalo con el nombre favicon.ico en el directorio principal de tu dominio. Este método solo funciona si el nombre dado es el adecuado. Todas las letras deben estar escritas en minúsculas.

Sin embargo, esta forma de proceder lleva consigo dos desventajas: en primer lugar, la mayoría de los navegadores reconocen este método, pero no todos. En segundo lugar, este procedimiento requiere que todos los subdominios creados bajo el dominio principal se muestren también con este icono. Por ello, integrar el favicón mediante código tiene mayor garantía de éxito.

Incluir un favicón en tu página web te ofrece numerosas ventajas: muestra un aspecto más profesional, una línea de diseño unificada y puede ser encontrada más rápidamente. Este pequeño símbolo es sobre todo importante para dispositivos móviles como smartphones o tablets, pues sirve como icono táctil para guardar una página web en la pantalla de inicio. Para ello, el dispositivo utiliza el archivo de imagen guardado. Sin embargo, como hay diferencias entre los distintos proveedores, debes crear varios formatos:

• Un archivo .ico, especialmente necesario para los navegadores más antiguos. En este caso, el nombre del archivo debe ser favicon.ico.
• Un archivo .png para los navegadores más modernos. Se llama favicon.png.
• Un Apple touch icon para Android Chrome y iOS Safari. Este tiene el formato 128 x 128 píxeles.