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 en HTML
Puedes usar cualquier imagen que desees como tu favicon. También puedes crear su propio favicon en sitios como https://www.favicon.cc/
Sugerencia: un favicon es una imagen pequeña, por lo que debe ser una imagen simple con alto contraste.
Se muestra una imagen de favicon a la izquierda del título de la página en la pestaña del navegador.
Para agregar un favicon a tu sitio web, guarda su imagen de favicon en el directorio raíz de tu servidor web o crea una carpeta en el directorio raíz llamada imágenes y guarda tu imagen de favicon en esta carpeta. Un nombre común para una imagen de favicon es «favicon.ico».
A continuación, agrega un elemento <link> a tu archivo «index.html», después del elemento <title>, así:
Ejm
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>Esto es una cabecera</h1>
<p>Esto es un párrafo</p>
</body>
</html>
Ahora, guarda el archivo «index.html» y vuelve a cargarlo en tu navegador. La pestaña de tu navegador ahora debería mostrar su imagen de favicon a la izquierda del título de la página.
Soporte de formato de archivo Favicon
La siguiente tabla muestra el soporte de formato de archivo para una imagen de favicon:
| Navegador |
ICO |
PNG |
GIF |
JPEG |
SVG |
| Edge |
Sí |
Sí |
Sí |
Sí |
Sí |
| Chrome |
Sí |
Sí |
Sí |
Sí |
Sí |
| Firefox |
Sí |
Sí |
Sí |
Sí |
Sí |
| Opera |
Sí |
Sí |
Sí |
Sí |
Yes |
| Safari |
Yes |
Yes |
Yes |
Yes |
Yes |