HTML Favicon
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 utilizar cualquier imagen que desees como tu favicon. También puedes crear tu propio favicon en sitios como https://favicon.cc.
Consejo: 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 elemento <link> a su archivo "index.html", después de <title> elemento, como este:
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.
Compatibilidad con el formato de archivo Favicon
La siguiente tabla muestra el formato de archivo admitido para una imagen de favicon:
| Browser | 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í | Sí |
| Safari | Sí | Sí | Sí | Sí | Sí |
Resumen del capítulo
- Utilice el elemento HTML
<link>para insertar un favicon - Ejemplo:
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
Etiqueta de enlace HTML
| Etiqueta | Descripción |
|---|---|
| <link> | Define la relación entre un documento y un recurso externo |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
