Cómo Añadir un Favicon a tu Sitio

Cómo Añadir un Favicon a tu Sitio

Es posible que te encuentres con el término favicon cuando se trata de diseño y desarrollo web. Pero que es exactamente? Bueno, en este artículo, responderemos tu pregunta y te mostraremos cómo añadir un favicon a tu sitio web. ¡Empecemos!

Consigue el alojamiento web rápido, seguro y fácil de usar que necesitas para tus proyectos exitosos. ¡Garantía de 30 días de devolución del dinero incluida!

Empezar

¿Qué es un favicon y por qué es importante?

En pocas palabras, un favicon es el logotipo de tu sitio web que aparece junto al meta título en la pestaña del navegador. Es decir, en lugar de mostrar un icono de documento en blanco en el navegador,se mostrará el icono oficial de tu sitio web.

La mayoría de los sitios web suelen utilizar su logotipo como favicon. Si tu sitio web no tiene un logo, puedes crear uno con el creador de logos gratuito. De esta manera, tus visitantes notarán fácilmente tu sitio web cuando abran muchas pestañas en una ventana del navegador. Además, tu sitio tendrá un aspecto mucho más profesional.

El favicon de Hostinger

¿Cómo añadir un favicon a tu sitio web?

Elige una de las dos formas siguientes para añadir un favicon a tu sitio web.

Dejar que los navegadores detecten automáticamente el favicon

La forma más fácil de añadir un icono a tu sitio es cargándolo como un archivo .png o .ico desde el Administrador de Archivos de tu alojamiento. Sigue estos pasos para hacerlo:

  1. Prepara una imagen de dimensiones cuadradas en formato .png o .ico para el logotipo de tu sitio web.

    Si ya tienes un archivo .png, úsalo. Puedes convertir la imagen a formato .ico con ConvertICo.com si lo necesitas.

  2. Cambia el nombre de la imagen .png o .ico a favicon.

    La mayoría de los navegadores detectan automáticamente el archivo favicon.png y favicon.ico ubicado en el directorio de tu sitio web como el icono de tu página web. Por lo tanto, no necesitarás código.

  3. Accede a tu carpeta public_html a través de tu hPanel, en Archivos -> Administrador de Archivos.
    Cargar favicon.ico en el directorio de WordPress para agregar el favicon a tu sitio web
  4. Sube el archivo favicon.png o .ico a tu carpeta public_html. Actualiza tu sitio web y verás el favicon.

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

De forma alternativa, si tienes una imagen que no sea de formato .png o .ico (jpg, BMP, gif, etc.), también puedes utilizarla como icono de tu sitio web. Sin embargo, necesitas modificar el archivo header.php en la carpeta de tu tema actual. Para ello, sigue estos pasos en tu hPanel.

  1. Una vez que tengas una imagen de dimensiones cuadradas como tu logo, ve a Archivos -> Administrador de Archivos -> public_html.
  2. Sube la imagen a tu carpeta public_html.
    Cargar una imagen jpg como favicon

    Puedes mantener el nombre original de la imagen o renombrarla como favicon. Se recomienda cambiar el nombre del icono para distinguirlo de otras imágenes.

  3. Ve a wp-content -> themes. Luego, accede a la carpeta del tema que estás utilizando actualmente.
  4. Abre el archivo header.php y pega esta sintaxis justo antes del final de la etiqueta <head></head>:
    <link rel="shortcut icon" type="image/jpg" href="/favicon.jpg"/>

    Insertar código en el archivo header.php para agregar un favicon

    Cambia las partes /jpg y /favicon.jpg según el formato y el nombre de la imagen que vayas a utilizar.

  5. Una vez que hayas guardado los cambios, la imagen debería mostrarse como el icono de tu página web.

Si no puedes ver el nuevo favicon, borra la caché del navegador y vuelve a iniciarlo.

Conclusión

Como puedes ver, tener un favicon en tu sitio web es crucial. No solo hace que te sitio se distinga en las pestañas del navegador, sino que también le da un aspecto profesional a tu sitio web.

Puedes agregarlo automáticamente cargando una imagen .png o .ico llamada favicon a tu carpeta public_html. Alternativamente, puedes cargar una imagen normal (jpg, BMP, gif, etc.) y modificar el archivo header.php dentro de la carpeta de temas que utilizas actualmente.

¿Fue útil este tutorial? ¡Deja un comentario a continuación!

Si quieres saber cómo añadir un favicon en WordPress puedes consultar este tutorial.

Author
El autor

Fran Segarra