Preguntas frecuentes sobre favicons
¿Un favicon debería ser transparente?
Dale a la pestaña del navegador favicons un fondo transparente para que se asienten en tiras de pestañas claras y oscuras. Mantenga opacos el ícono táctil de Apple y los íconos enmascarables, porque esas plataformas llenan o recortan el espacio vacío por usted.
La transparencia ayuda en las pestañas del navegador
Los navegadores pintan la barra de pestañas con el color del tema del usuario y ese color cambia entre el modo claro y oscuro. Un fondo transparente permite que su marca se asiente en lo que sea que dibuje el navegador. Un cuadrado blanco integrado en la obra de arte aparece como un bloque brillante sobre una pestaña oscura.
ICO, PNG y SVG tienen un canal alfa, por lo que pueden almacenar transparencia por píxel. JPEG no puede, que es una de las razones por las que constituye una fuente de favicon débil. Ver es un favicon un PNG o JPEG para la comparación de formatos. Si su arte fuente tiene un fondo transparente, el Generador de favicon lo mantiene en los archivos PNG e ICO exportados.
Donde cada ícono necesita un fondo
| Icono | ¿Transparente? | Razón |
|---|---|---|
favicon.ico y pestaña PNG | Sí | Se adapta a tiras de pestañas claras y oscuras. |
| SVG favicon | Sí | Misma ubicación de pestaña, dibujada en cualquier tamaño |
apple-touch-icon | No | iOS representa los píxeles transparentes en negro |
| Icono de manifiesto enmascarable | No | Los lanzadores lo recortan hasta darle forma de plataforma. |
Mantenga opaco el ícono táctil de Apple
El icono de la pantalla de inicio de Apple es la excepción más clara. iOS combina áreas transparentes con negro, por lo que un logotipo transparente puede aparecer en la pantalla de inicio como un mosaico oscuro. En su lugar, exporte un PNG de 180x180 con un fondo relleno.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />Apple documenta las reglas de los iconos en Configurar aplicaciones web. El Generador de iconos táctiles de Apple le permite elegir ese color de fondo y descargar el archivo aplanado.
Los íconos enmascarables necesitan un fondo sin sangrado
Los lanzadores de Android recortan íconos enmascarables en círculos, ardillas y otras formas. Rellena todo el lienzo con un color de fondo y mantén el logotipo dentro de la zona segura, con el círculo centrado cubriendo el 80% del ancho. Todo lo que esté fuera de ese círculo puede ser cortado.
Aún puedes enviar un ícono de manifiesto transparente con purpose: "any" junto al enmascarado. MDN cubre ambos valores en el referencia de iconos de manifiesto, y el generador de iconos enmascarables muestra el área segura mientras coloca la obra de arte.
Compruebe el contraste en ambos temas.
La transparencia traslada el problema del contraste al navegador. Una marca casi negra desaparece en una tira de pestañas oscura y una marca pálida desaparece en una clara. Elija colores que combinen con ambos o coloque una pequeña forma redondeada detrás del logotipo para que tenga su propio contraste.
Algunos navegadores aplican prefers-color-scheme reglas dentro de un SVG favicon, aunque el soporte varía, así que trate un SVG que tenga en cuenta el tema como una actualización en lugar de una solución. Obtenga una vista previa del ícono en pestañas claras y oscuras con el Vista previa de favicon, luego confirme qué ofrece un sitio en vivo con el favicon corrector.
¿Listo para crear tu favicon?
Genere los archivos comunes y un fragmento HTML listo para pegar.