html - webapp - El icono de Apple Touch no aparece en la pantalla de inicio

web app manifest ios (6)

En la Guía de contenido web de Apple Safari , sugieren colocar los iconos en la "carpeta de documentos raíz".

Para especificar un icono para todo el sitio web (cada página en el sitio web), coloque un archivo de icono en formato PNG en la carpeta del documento raíz llamada apple-touch-icon.png o apple-touch-icon-precomposed.png.

Intenté esto y no funcionaría hasta que finalmente moviera los íconos a una carpeta ''img'' y los vinculara allí.

Sin embargo, sospecho que la razón por la que funcionó el ícono html5boilerplate y el suyo no fue porque está usando un directorio virtual como:

http://localhost/myvirtualdirectory/apple-touch-icon.png

mientras que el comportamiento predeterminado de iOS es mirar el dominio raíz incluso cuando está alojado fuera del directorio virtual:

http://localhost/apple-touch-icon.png

Esperemos que otros puedan verificar esto.

Estoy usando el siguiente código para obtener íconos táctiles para dispositivos móviles; se basa en el ejemplo html5boilerplate / mobile:

Pero por alguna razón, el iPhone todavía me está dando problemas con el ícono de la pantalla de inicio. Todo lo que consigo es ese molesto icono de captura de pantalla.

He incluido las otras metaetiquetas aquí en caso de que aclaren por qué no funciona. He intentado reordenar las etiquetas.

¿Alguien puede pensar en algo que pueda detener el uso de los iconos?

He usado html5boilerplate / mobile como un caso de prueba: puedo navegar por su sitio y agregar el ícono a la pantalla de inicio de mi iPhone (4S iOS5). He intentado copiar su código, estructura de carpetas e íconos en mi propio sitio, pero esto no funcionó.

¿Algunas ideas?

No pude hacer que esto funcionara hasta que ingresé a mi iPhone en Configuración-> Safari y luego ''Borrar historial y datos del sitio web'' y luego intenté agregarlo a mi página de inicio.

Puse la misma página y el ícono en otros dos sitios y funcionó perfectamente, así que creo que quizás sea porque los dos servidores de prueba originales en los que estaba trabajando estaban protegidos con contraseña, aunque obviamente ingresé las credenciales para navegar por la página. así que no estoy completamente seguro de por qué sería un problema. Sin embargo, los resultados parecen sugerir que este fue el caso.

Tuve el mismo problema cuando mis íconos estaban en mi carpeta ui / img, a pesar de que mi sitio no estaba protegido por contraseña. Después de moverlos a mi carpeta raíz (y borrar el caché) comenzó a funcionar.

Tuve el mismo problema, y la fuente del problema es que tenía un archivo htaccess con protección de contraseña para mi sitio, por lo que el ícono de webclip no funcionará, para resolver este problema y aún tengo la protección de contraseña, necesita agregar este código :

SetEnvIf Request_URI "(/apple-touch-icon/.png)$" allow Order allow,deny Allow from env=allow Satisfy any

De esa manera, tendrá acceso completo a http://www.example.com/apple-touch-icon.png sin necesidad de contraseña.

Si todavía tiene problemas, aquí hay un ejemplo con el archivo htaccess completo:

AuthUserFile /home/mysite/.htpasswds/.htpasswd AuthType Basic AuthName "Password Protected" Require valid-user SetEnvIf Request_URI "(/apple-touch-icon/.png)$" allow Order allow,deny Allow from env=allow Satisfy any

Eso debería arreglar el problema.

¡¡Aclamaciones!!

Yo tuve el mismo problema. La solución es eliminar la protección de contraseña en el sitio web.