HTML: link
Casi todas las pestañas en el navegador tienen pequeños iconos llamados favicons. Al igual que el título, permiten orientarse rápidamente en las pestañas y acceder a la deseada. Los motores de búsqueda los utilizan para mostrar junto al nombre de la página en los resultados de búsqueda.
Para establecer este tipo de icono en una página, se utiliza la etiqueta <link>, que tiene dos atributos:
relpara especificar el contenidohrefpara especificar la URL del icono
<link rel="icon" href="/favicon.png">
Diferentes dispositivos pueden mostrar iconos de diferentes tamaños y formatos, por lo que ahora se agregan varios iconos a la vez. La etiqueta <link> permite especificar el tipo de imagen y su tamaño. Esto se hace mediante los atributos type y sizes.
Indiquemos que el icono es de formato png y tiene un tamaño de 32x32
<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">
Después de este, se pueden agregar más iconos con diferentes tamaños:
<link rel="icon" href="/favicon64.png" type="image/png" sizes="64x64">
<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon16.png" type="image/png" sizes="16x16">
Al especificar los tamaños, el primer número indica el ancho en píxeles y el segundo número indica la altura.
Ahora los navegadores en diferentes dispositivos podrán trabajar de manera más precisa con los iconos y cargar el que les corresponda.
La etiqueta <link> permite no solo agregar un favicon, sino también vincular archivos de estilo, fuentes, indicar a los navegadores la siguiente (o anterior) página de un artículo. El ejemplo más común es la vinculación de un archivo CSS a una página HTML:
<link rel="stylesheet" href="style.css">
Tarea
Agrega un link para el favicon https://www.w3schools.com/favicon.ico con un tamaño de 64x64.
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.
Consejos útiles
Puedes ver todas las posibilidades de la etiqueta
<link>en MDN Web DocsAl igual que otros metadatos, la etiqueta
<link>se coloca en la secciónhead