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 nuestro creador de páginas web. 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?

Para añadir un favicon a tu sitio web, puedes dejar que los navegadores lo detecten automáticamente o poner el favicon en HTML. A continuación, explicamos ambos métodos en detalle.

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.

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

Tip profesional

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.