Cómo agregar un ícono de sitio web en HTML

Aprende a agregar un ícono de sitio web (Favicon) en HTML.

Cómo agregar un ícono de sitio web en HTML

El ícono del sitio web (favicon) es una pequeña imagen que se muestra junto al título de la página en la pestaña del navegador.

Puedes usar cualquier imagen que te guste como ícono de sitio web. También puedes crear tu propio ícono de sitio web en sitios como https://favicon.cc.

Consejo:El ícono del sitio web es una pequeña imagen, por lo que debería ser una imagen simple de alto contraste.

El ícono del sitio web se muestra en la izquierda del título de la página de la pestaña del navegador, como se muestra a continuación:

Ejemplo de icono de sitio web

Para agregar un ícono de sitio web a tu sitio, guarda la imagen de tu ícono de sitio web en la raíz del servidor web o crea una carpeta llamada "images" en la raíz y guarda la imagen de tu ícono de sitio web aquí. El nombre común de la imagen del ícono del sitio web es "favicon.ico".

A continuación, en el archivo "index.html", <title> Agrega un elemento después de <link> Los elementos, como se muestra a continuación:

<!DOCTYPE html>
<html>
<head>
  <title>Mi Título de Página</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>Este es un Título</h1>
<p>Este es un párrafo.</p>
</body>
</html>

Prueba personalmente

Ahora, guarda el archivo "index.html" y recarga la página en el navegador. La pestaña del navegador debería mostrar el ícono de tu sitio web a la izquierda del título de la página.