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

Tu logo en la pestaña del navegador

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. Por eso, en este post queremos contarte qué es un favicon, por qué es importante para tu presencia online y cómo crear uno para tu web. ¿Preparado?

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. A la hora de diseñar una página web (incluido el logo, fuente, etc.) debe hacerse en base a su imagen corporativa. Pero hay otro aspecto que también debes tener en cuenta: la pestaña del navegador. 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.  El favicon se muestra junto al título de la página en la pestaña del navegador. Además, se utiliza como enlace cuando guardamos un sitio como favorito en la barra de marcadores.

Captura de favicon en el navegador

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

Ten en cuenta el tamaño y el formato del favicon

Para que tu página web tenga un favicon que destaque, crea un archivo de incono con una dimensión de 16 x 16 píxeles. Si quieres que tenga una calidad 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. Con él podrás editar el logo de tu empresa, recortarlo o adaptarlo al tamaño que deseas.

Además, puedes encontrar otras herramientas útiles en Internet como www.converticon.com o www.icoconverter.com.

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

Ahora incluye el favicon en tu web

Después de crear el fichero de icono en formato .ico, tienes que añadirlo a tu web. Para ello, guarda el favicon 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.

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

Los dispositivos móviles 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 (favicon.png).
  • Los navegadores más antiguos necesitan el formato de icono (favicon.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 la pestaña del navegador, es decir, un favicon. Aprovecha la oportunidad y haz que tu sitio parezca más profesional.

 

Imagen de Visualhunt.com

Wolf-Dieter Fiege
Wolf-Dieter Fiege ist Senior Specialist für Content Marketing & SEO und leidenschaftlicher Blogger - immer auf der Suche nach interessanten Themen aus der Welt des Webs, Webdesigns und des Online-Business. Als Fachautor und Redakteur ist er in zahlreichen IT-Blogs aktiv. In seiner Freizeit findet man ihn auf einem Fahrrad, joggend, im Schwimmbad, bei Freunden, mit einem guten Buch oder … Mehr über Wolf-Dieter Fiege finden Sie auf XING, LINKEDIN, FACEBOOK und Torial.