Icono de Apple Touch se vuelve negro

Question

¿El fondo blanco en mi icono de Apple Touch se vuelve negro? Mi fondo blanco no es transparente. El ícono tiene un triángulo blanco, un círculo rojo y un texto negro. Lo único que puedo distinguir es el triángulo blanco y el círculo rojo. ¿Alguna idea de lo que está causando esto y cómo hacer que el ícono mantenga su fondo blanco? Muy apreciado.

Answer 1

No estoy seguro exactamente de qué se trataba, pero es posible que lo haya reducido. La primera vez que cargué las imágenes, pueden haber tenido el fondo transparente. La segunda vez que los cargué, agregué el fondo blanco, pero la configuración de png guardar para dispositivos aún tenía la transparencia marcada. La tercera vez que los cargué los guardé sin la transparencia marcada pero aún así obtuve el fondo negro. Todo el tiempo creo que el navegador iOS Safari tenía el primer conjunto de imágenes almacenadas en caché. Después de clearing the cache apareció la nueva imagen sin problema.

Editar: Es el fondo transparente que lo convierte en negro.

Answer 2

Como gstricklind encuentra, si su png tiene transparencia de canal alfa, el IOS, lamentablemente ignorar cualquier directiva "precompuesto" y aplicar todos sus efectos habituales, en adddition para dar el icono de un fondo negro (blanco no parecía como una mejor opción ??).

La solución es, por supuesto, precompilar los iconos sin transparencia. Esto hace que sea bastante difícil utilizar el soporte de Android de los canales alfa, al mismo tiempo que ofrece iconos de iTouch si un fondo negro no funciona para usted. He encontrado esta herramienta útil al componer: http://www.gieson.com/Library/projects/utilities/icon_slayer

mismo problema se ve aquí: How to get iOS to properly respect the "apple-touch-icon-precomposed" link attribute for a "web app"

Answer 3

transparentes de Apple tocar los iconos son de hecho posible. Lo que necesita hacer es eliminar todo el exceso de información de PNG utilizando ImageOptim para Mac https://imageoptim.com/mac o un programa similar en Windows. Hice una investigación exhaustiva y tropecé con la respuesta mirando el ícono de toque de manzana que utiliza el sitio de Virtual DJ. Este icono mantiene su fondo transparente en iOS y MacOS Sierra. Miré el tamaño del archivo y me di cuenta de lo pequeño que era comparado con los íconos personalizados de Apple con la transparencia que hice para mis favoritos en Safari. Luego miré la información del archivo usando el inspector en la aplicación Vista previa de Mac. Todos mis iconos personalizados de Apple Touch tenían cuatro pestañas en la sección de inspector llamada General, exif, PNG y TIFF. El ícono de DJ virtual solo tenía dos pestañas llamadas PNG y General. Una vez que ejecuté mis imágenes personalizadas a través de ImageOptim, los tamaños de los archivos cayeron en picado más del 90% y las pestañas adicionales TIFF y EXIF ​​desaparecieron del inspector en Vista previa. Efectivamente una vez que recargué mis imágenes personalizadas y lancé Safari, todas las pestañas de mis Favoritos tienen fondos transparentes. Por favor, ver la imagen adjunta para la prueba. Transparent Apple-Touch-Icons