¿Debería un favicon tener fondo transparente?
Un fondo transparente le va bien al favicon de la pestaña del navegador, dejando que la marca se asiente limpiamente sobre un chrome claro u oscuro. Pero iOS ignora la transparencia en el apple-touch-icon y lo compone sobre negro, así que un icono de pantalla de inicio transparente puede convertirse en una forma flotando sobre un cuadrado negro. Usa transparencia para el favicon de la pestaña, y un fondo sólido para el apple-touch-icon y los demás tamaños de la pantalla de inicio.
Transparente donde ayuda, sólido donde no
Para el favicon de la pestaña, la transparencia es una ventaja: la marca se adapta al color que tenga el chrome del navegador, claro u oscuro. Esa es la única superficie donde un fondo transparente ayuda de verdad.
Los iconos de la pantalla de inicio son lo contrario. iOS descarta el canal alfa y compone el apple-touch-icon sobre negro, y los iconos maskable de Android quieren un fondo a sangre completa para recortar en una forma. En ambos, un origen transparente se ve mal.
Preguntas frecuentes sobre la transparencia del favicon
¿Debería mi favicon tener fondo transparente?
Para la pestaña del navegador, sí. Se adapta al chrome claro y oscuro. Para el apple-touch-icon y los demás tamaños de la pantalla de inicio, no. Usa un fondo sólido.
¿Por qué mi icono de la pantalla de inicio de iOS está sobre un cuadrado negro?
Porque iOS ignora la transparencia y compone el apple-touch-icon sobre negro. Vuelve a exportar ese icono con un relleno de fondo sólido.
¿Los iconos maskable necesitan un fondo?
Sí. Los iconos maskable se recortan a una forma mediante el lanzador, así que necesitan un fondo a sangre completa con la marca dentro de la zona segura.