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

Es posible que te encuentres con el término favicon al diseñar y desarrollar un sitio web. Pero, ¿qué es exactamente? En este artículo, responderemos tu pregunta y te mostraremos cómo añadir un favicon a tu sitio web. ¡Empecemos!

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

En pocas palabras, un favicon es el logotipo 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 no tiene un logo, puedes crear uno con este 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.

Ejemplo de icono en navegador

¿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. Puedes dejar que los navegadores lo detecten automáticamente o poner el favicon en HTML.

Dejar que los navegadores detecten automáticamente el favicon

La forma más fácil de añadir un favicon 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 del hPanel, en Archivos -> Administrador de archivos.
    Subir favicon al administrador de archivos
  4. Sube el archivo favicon.png o .ico a tu carpeta public_html. Actualiza tu sitio web y verás el favicon.

Poner favicon en HTML con una imagen de cualquier formato

Con este método, 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 header de tu tema actual.

Para añadir el favicon en HTML, agrega el siguiente fragmento de código en el header de tu tema:

<link rel="icon" type="image/jpg" href="/favicon.jpg"/>

En WordPress, sigue estos pasos desde el hPanel.

  1. Una vez que tengas una imagen de dimensiones cuadradas para tu logo, ve a Archivos -> Administrador de archivos -> public_html.
  2. Sube la imagen a tu carpeta public_html.
    Subir favicon con un formato alternativo

    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:
    <link rel="icon" type="image/jpg" href="/favicon.jpg"/>
    Editar archivo hearder.php para agregar 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 tu sitio se distinga en las pestañas del navegador, sino que también le da un aspecto profesional.

Puedes agregarlo automáticamente cargando una imagen .png o .ico llamada favicon a tu carpeta public_html. Alternativamente, puedes poner el favicon en HTML con una imagen en cualquier formato modificando el archivo header.php dentro de la carpeta de temas que utilizas actualmente.

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

Author
El autor

Deyimar A.

Deyi es una entusiasta del marketing digital, con experiencia en diseño de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo de SEO & Localization de Hostinger. En su tiempo libre, le gusta desarrollar proyectos, leer un libro o ver una buena película.