icono de favoritos HTML
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
Puede usar cualquier imagen que desee como su favicon. También puede crear su propio favicon en sitios como https://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, como esta:
Para agregar un favicon a su sitio web, guarde su imagen de favicon en el directorio raíz de su servidor web o cree una carpeta en el directorio raíz llamada imágenes y guarde su imagen de favicon en esta carpeta. Un nombre común para una imagen de favicon es "favicon.ico".
A continuación, agregue un <link>elemento a su archivo "index.html", después del <title>elemento, así:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>My Page
Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Ahora, guarde el archivo "index.html" y vuelva a cargarlo en 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 formato de archivo Favicon
La siguiente tabla muestra el soporte de formato de archivo para una imagen de favicon:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
Resumen del capítulo
- Use el elemento HTML
<link>para insertar un favicon
Etiqueta de enlace HTML
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .