Favicon: qué es y cómo crear uno para tu página web

El favicon es una pequeña imagen que dice mucho de tu sitio web. ¡Vamos a ver por qué!

Has logrado construir una marca y esto hace que tus clientes te conozcan. Implementas buenas estrategias de venta y tienes un logo que llama la atención de tus visitas. ¡Genial! Después de todo, el reconocimiento de tus clientes nuevos, actuales o potenciales es fundamental para el éxito de tu negocio.

La identidad de una página web también es relevante a la hora de crear una experiencia de marca completa. Y, para ello, debes tener en cuenta hasta el mínimo detalle.

Por eso, en este post queremos contarte qué es un favicon, por qué es importante para tu presencia online y cómo crear este diminuto icono para tu web. ¡Vamos a ello!

Artículo con contenido actualizado en 2021*

Haz que tu marca sea reconocible y trabaja en tu presencia online

Si creas una página web o una tienda online puedes expandir tu oferta de manera significativa y llegar de manera más fácil a un nuevo público.

No obstante, a cada nueva visita que llega a tu web debería serle fácil reconocer a primera vista que es “tu página”. El reconocimiento crea confianza y familiarización con la marca, y ambos son aspectos principales al crear tu sitio web.

A la hora de diseñar una página web (incluido el logo, las fuentes empleadas, colores de tu imagen corporativa, etc.) se debe tener en cuenta el branding de la marca. Pero hay otro aspecto que también debes tener en cuenta: la pestaña de los navegadores web.

A continuación, te doy algunos trucos sobre cómo crear un favicón y hacer que tu logo sea visible.

¿Qué es un favicon?

Un favicon es un icono que complementa tu página web y ofrece un valor añadido, haciendo que tus clientes o lectores puedan reconocerte fácilmente.

La palabra “favicon” procede del inglés favorites icon, o lo que es lo mismo, icono de favoritos.

Este icono tiene dos funciones básicas. Se muestra junto al título de la página en las pestañas de tu navegador y, además, se visualiza esta imagen pequeña cuando guardamos un sitio web como favorito en la barra de marcadores.

El favicon aparece en cada pestaña junto al nombre de la página web.

Ten en cuenta el tamaño y el formato 

Para que tu página web tenga un favicon personalizado que destaque, crea un archivo de icono -icon files-con una dimensión de 16 x 16 píxeles.

Si quieres que tenga una calidad y una resolución superior, también puedes utilizar formatos de hasta 18 x 18 píxeles.

Asegúrate de que sea un archivo de un icono real y que tenga la extensión “.ico”, aunque los navegadores actuales también suelen reconocer los formatos .png y .jpg. Sin embargo, si quieres mostrar la imagen como estándar para los navegadores antiguos, debes utilizar el formato .ico siempre que sea posible.

Sugerencia: El icono es muy pequeño: tan solo 16 x 16 píxeles. Cuantas más formas, colores o líneas tenga, más difícil será reconocerlo. Por tanto, elige un símbolo o una imagen claramente reconocible que contenga el menor número de líneas y colores. Y, si el logotipo tiene forma rectangular, mucho mejor. De lo contrario, ajusta el logo al cuadrado predeterminado o guárdalo con un fondo transparente.

¿Como crear un archivo en formato .ico para tu favicon?

Si quieres crear un archivo .ico puedes utilizar, por ejemplo, un programa de edición de imágenes gratuito como GIMP de pago, como Adobe Photoshop. Con él podrás editar el logo de tu empresa, recortarlo o adaptarlo al tamaño que deseas.

Además, puedes encontrar un editor de favicon online, conocidos como Favicon Generator. Otras herramientas útiles en Internet son www.converticon.com o www.icoconverter.com.

Estos programas te permiten crear tu icono a partir de una imagen. Es decir, convertir el formato de tu icono png, .gif o .jpg en .ico. Una vez que lo genere, podrás descargarlo fácilmente e incluirlo en tu web.

Cómo incluir el favicon en tu página web

Después de crear el fichero de icono en formato .ico, tienes que añadirlo a tu sitio web. Para ello, guarda el icono en el directorio principal de tu dominio con el nombre de archivo “favicon.ico”.

Además, deberás poner una referencia al archivo en el código de tu sitio. En el atributo href, debes especificar la ruta del archivo y el nombre del logo.

Añadir tu mini logo a tu web es muy fácil.

Edita la sección <head> y agrega las siguientes líneas al código HTML

Si tiene el formato .ico, añade la siguiente línea:

<link rel="icon" type="image/vnd.microsoft.icon" href="RUTA/NOMBRE_FICHERO.ico">

Si tiene el formato .gif, añade la siguiente línea:

<link rel="icon" type="image/gif" href="RUTA/NOMBRE_FICHERO.gif">

Si tiene el formato .png, añade la siguiente línea:

<link rel="icon" type="image/png" href="RUTA/NOMBRE_FICHERO.png">

Asegúrate de que la ruta y el nombre del fichero estén especificados correctamente.

 

¿Cómo cambiar el favicon en WordPress?

Si tienes tu web hecha en WordPress, verás que cambiar el favicon es más sencillo de lo que parece. Solo tienes que crear una imagen de dimensiones parecidas a las citadas anteriormente e iniciar sesión en WordPress.

Para ello, ve al menú de la izquierda y. escoge Apariencia > Personalizar.

Se te abrirá un editor para personalizar el tema. En la columna de la izquierda, selecciona «Cabecera» > Identidad del sitio y haz scroll hasta que veas «Icono del sitio». Selecciona «Cambiar La Imagen», carga tu icono ¡y listo!

Tu favicon como icono táctil en dispositivos móviles

Los dispositivos móviles como smartphones o tablets también utilizan el favicon cuando un usuario quiere crear un enlace directo a una web. Es decir, el icono táctil de la pantalla de inicio.

• Para los navegadores actuales, debes dejar el favicon como PNG.
• Los navegadores más antiguos necesitan el formato de icono (.ico).
• Los navegadores móviles basados ​​en Android Chrome y iOS Safari usan el icono de Apple Touch. Aquí puedes encontrar algunos consejos para crear un icono de Apple Touch.
• Para Internet Explorer y Edge, debes añadir gráficos para los tiles (Windows 8 tiles).

Nota: Apple Touch Icons y Windows Tiles (Windows 8 Tiles) requieren gráficos de mayor resolución: dependiendo del dispositivo y de la versión, utiliza iconos en los tamaños 57 × 57, 60 × 60, 72 × 72, 76 × 76, 114 × 114, 120 × 120, 128 × 128, 144 × 144 e 152 × 152 px. Para los tiles de Windows 8 necesitas gráficos en los formatos 70 × 70, 144 × 144, 150 × 150, 310 × 150 y 310 × 310 px.

En conclusión

Como puedes ver, es muy fácil que te reconozcan incluyendo el logo de tu marca en las pestañas de los navegadores web. Es decir, añadiendo un icono de página o favicon.

Durante el desarrollo web, ten en cuenta todos los detalles de diseño para crear una web memorable.

Aprovecha la oportunidad y haz que tu sitio web parezca más profesional gracias a esta imagen de dimensiones minúsculas.

Imagen de Visualhunt.com