Optimizacion

Cómo añadir un favicon a tu sitio

Desde hace ya varios años que todos los sitios comenzaron a usar el llamado Favicon, un pequeño icono de 16×16 que aparece del lado izquierdo del nombre de nuestro sitio en las pestañas del navegador.

Aunque es pequeño y podrías pensar que no tiene mucha importancia, añadir un favicon a tu sitio es de gran utilidad, empezando por el hecho de que le da un aspecto más serio y profesional a tu sitio, además de que los usuarios pueden ubicar tu página con mayor facilidad cuando tengan varias pestañas abiertas.

Si no tienes idea de cómo añadir un favicon a tu sitio, en este tutorial te explicaremos paso a paso lo que debes de hacer:

¿Qué necesitas?

  • Antes de comenzar con el tutorial debes de tener hecho tu favicon. Aunque puede ser de varias medidas, se recomienda que sea hecho en 16×16
  • Acceso a los archivos de tu sitio web

1.- Dejar que los navegadores detecten automáticamente el favicon

Hoy en día la mayoría de los navegadores detectan automáticamente el archivo llamado favicon.ico localizado en el directorio del sitio web y lo usan como el favicon del sitio. Esta es la forma más rápida y sencilla de agregar un favicon a tu sitio.

  1. Como mencione, debes de tener una imagen cuadrada de 16×16 o 32×32 de cualquier formato (png, jpg, bmp, gif) que quieras que aparezca en los navegadores. Si tu imagen no es cuadrada también funcionara, aunque se ve mejor y más profesional si está hecha a la medida
  2. En este método es necesario que nuestra imagen sea convertida al tipo ‘.ico’. Para hacerlo hay herramientas muy sencillas, comenzando por ‘convertico.com’
  3. Cuando entres en convertico notarás que en la pestaña principal hay un recuadro delineado que dice “Drop your .png or .ico files here, or click to select them manually!”. Como nos dice, lo único que tienes que hacer es dar clic en la nube o arrastrar tu imagen dentro del recuadroimage01 4
  4. Una vez que el proceso de conversión haya terminado aparecerá un botón de descarga con tu favicon, su tamaño, su tipo de archivo y una flecha hacia abajo. Debes de seleccionar ese botón para comenzar con la descarga de tu nueva imagen
  5. Ahora tendrás que renombran tu archivo a favicon.ico, ya que los navegadores solo reconocen automáticamente este nombre de archivo
  6. El último paso para terminar este método es subir tu nuevo archivo favicon.ico al directorio de tu sitio web. En los hosts basados en Linux generalmente es el directorio public_htrml, aunque puede variar dependiendo de tu hosting o del directorio de instalación del sitio

Listo, si todo está bien y subiste el archivo en el directorio correcto ahora deberías de estar viendo el nuevo favicon de tu sitio en las pestañas de los navegadores. Si aún no puedes ver el favicon, antes de desesperar puedes probar limpiando el cache de tu sitio web.

2.- Usar una imagen regular y un código especifico en nuestro sitio web

Si no tienes deseos de usar el método anterior y convertir tu imagen al tipo .ico porque se te hace algo molesto, entonces tal vez quieras probar con este método:

  1. Una vez más, lo primero que necesitaras es tu imagen cuadrada en el formato (jpg, png, gif o bmp) para que tu favicon se pueda mostrar correctamente en los navegadores. Si tu imagen no es cuadrada también se verá, pero no se recomienda.
  2. Ahora debes de subir este archivo al directorio de tu host en el que tu sitio está alojado. Generalmente se encuentra en el directorio public_html, aunque puede cambiar dependiendo del tipo de instalación que hayas hecho o de tu proveedor de hosting.
  3. A continuación, tendrás que especificar la imagen que quieres usar como favicon en un código de tu sitio web. Para hacerlo tendrás que agregar el siguiente código dentro de las líneas ‘<head> y </head>’ en el código de tu sitio web:
    <link rel=”shortcut icon” type=”image/png” href=”/favicon.png”/>

    IMPORTANTE: En donde dice “type=”image/png” tienes que cambiar el “png” por el formato que tenga tu imagen y la parte de “favicon.ico” por el nombre de tu imagen.

    El código HTML del sitio se tiene que ver parecido a la siguiente imagen:

    añadir favicon

  4. Listo, si seguiste los pasos y todo salió bien entonces ya deberías de ver tu nuevo favicon a un lado del nombre de tu sitio en las pestañas. Recuerda que si no puedes ver el favicon puedes probar borrar el cache de tu sitio antes de pensar que las cosas han salido mal

Conclusión

Ahora has aprendido las 2 formas más sencillas y efectivas para agregar un favicon a tu sitio. También puedes probar con distintos plugins y otras opciones, pero creemos que con las dos opciones anteriores no tendrás que recurrir a métodos más tardados y complicados.

1 Comentario

Dale clic aquí para dejar un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

[href]
[href]