Home >> Móvil >> Consejos y trucos >> IOS

Crear y poner icono retina (apple-touch-icon) para web en iOS

Webmasters: definid apple-touch-icon retina-ready. Es el icono que ve el usuario al hacer "Añadir a pantalla de inicio" en iPad/iPhone/iPod. Sin él: miniatura fea de la web. Sin retina: pixelado en iPad 3+.

Pasos

  1. Crea icono 512×512 px (PSD plantilla "DIY retina icon kit" facilita). Pega logo. Photoshop CS6 beta gratis hasta salida final.
  2. Guarda como PNG con nombre:
    • apple-touch-icon.png = iOS le pone burbuja brillante.
    • apple-touch-icon-precomposed.png = tu icono tal cual (recomendado si ya tiene brillo/plano).
  3. Sube a raíz del servidor (mismo nivel que index). Verifica: https://TUWEB.com/apple-touch-icon.png carga.
  4. En iPad 3 (ideal), abre web en Safari > Flecha compartir > Añadir a pantalla de inicio > nombre > OK. Comprueba en Home.

El 512×512 escala bien en dispositivos antiguos/no-retina. Opcional: CSS/HTML para servir tamaños distintos según device, pero no necesario.

Ya lo tratamos antes, pero con iPad 3 es crítico.