Nota: el orden es importante. Si lo haces al revés, el favicon claro siempre se mostrará, incluso si el modo de color del usuario es oscuro.
Puedes cambiar tanto el type
como el href
según el formato y la ubicación de tus favicons.
Esto es posible gracias a la propiedad media
que permite aplicar estilos condicionales según una media query. En este caso, estamos aplicando el favicon oscuro cuando la preferencia de color del usuario es oscura.
Por qué al icono claro no le ponemos la media query?
Con el segundo link
estamos sobreescribiendo el primer link
y si la media query no se cumple, no se aplicará el segundo link
por lo que seguirá mostrando el favicon claro. Por lo tanto podríamos decir que el primer link
es el favicon por defecto.
Se podría también usar la media query light
para el favicon claro, pero no es necesario ya que si no se cumple la media query del segundo link
, se aplicará el primer link
.
media
Este atributo tiene muchos usos, practicamente se puede aplicar cualquier query de CSS.
El caso de uso que me parece más interesante es el de los screen sizes and widths, ya que puedes hacer que carguen ciertos estilos o recursos según el tamaño de la pantalla. Esto es muy útil cunado tenemos estilos diferentes para pantallas grandes y pequeñas.
Por ejemplo:
<link rel="stylesheet" type="text/css" href="./common.css" />
<link rel="stylesheet" type="text/css" href="./mobile.css" media="screen and (max-width: 425px)" />
<link rel="stylesheet" type="text/css" href="./tablet.css" media="screen and (min-width: 426px) and (max-width: 768px)" />
<link rel="stylesheet" type="text/css" href="./desktop.css" media="screen and (min-width: 769px)" />
De esta forma, se cargara el archivo common.css
en todas las pantallas, mobile.css
en pantallas menores a 425px, tablet.css
en pantallas entre 426px y 768px y desktop.css
en pantallas mayores a 769px.
Incluso podrías tener un archivo de estilos para impresión:
<link rel="stylesheet" type="text/css" href="./print.css" media="print" />
Lo bueno de esto es que solo se cargaran los estilos necesarios para el tamaño de pantalla del usuario o cuando se cumpla la query, lo que mejora el rendimiento.
media
link
style
source
a
area