Table of contents
Un favicon es una pequeña imagen que se muestra junto al título de la página en la pestaña del navegador.
¿Cómo agregar un favicon?
Puedes usar cualquier imagen que quieras como tu ícono de favicon. También puedes crear tu propio favicon en sitios como: favicon
Tip: un favicon es una imagen pequeña, por lo que debe ser una imagen simple con alto contraste.
Una imagen de favicon se muestra en la parte izquierda del título de la página, en la pestaña del navegador, así como esto:
Para agregar un favicon, guarde la imagen de favicon en una carpeta llamada imágene. Un nombre común para una imagen de favicon es "favicon.ico".
A continuación, agregue un elemento <link> al archivo "index.html", como esto:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<!-- Favicon👇 -->
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<title>Titulo de la pagina</title>
</head>
<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
</body>
</html>
Ahora guarde el archivo "index.html" y actualice su navegador. La pestaña de su navegador ahora debería mostrar su imagen de favicon a la izquierda del título de la página.
Soporte de formatos
La siguiente tabla muestra el soporte de formato de archivo para una imagen de favicon:
| Navegador | ICO | PNG | GIF | JPEG | SVG |
| Edge | SI | SI | SI | SI | SI |
| Chrome | SI | SI | SI | SI | SI |
| Firefox | SI | SI | SI | SI | SI |
| Opera | SI | SI | SI | SI | SI |
| Safari | SI | SI | SI | SI | SI |
Resumen
Use el elemento <link> para insertar un favicon a la página HTML.
Traducido con 💚 desde W3Schools.com