Cómo crear un icono personalizado para tu web en iPhone (apple-touch-icon)

El iPhone genera gran tráfico móvil. Facilita que visitantes guarden tu web con un icono personalizado en pantalla de inicio. Sin icono propio, iPhone hace miniatura de tu home, poco reconocible. Un icono legible mejora recordatorio y marca.

Paso previo: en iPhone, al tocar + en Safari (centro abajo) para guardar, eliges "Añadir a pantalla de inicio". Verás tu icono personalizado en vez de miniatura.

Tres pasos para crear y publicar tu apple-touch-icon.png:

Qué necesitas

• Tu logo en formato cuadrado
• Software gráfico
• Programa FTP para subir icono
• Conocimientos básicos de HTML

Instrucciones

1. Prepara el icono: Si tienes logo adaptable a cuadrado 45×45 px, redimensiónalo en tu editor gráfico. Ej: reduje icono Twitter de 73px a 45px.
2. Guarda y sube: Guárdalo como PNG con nombre exacto apple-touch-icon.png. Sube a la raíz de tu web por FTP. El icono personalizado (con borde para ver bordes aquí) es mucho más reconocible que miniatura automática.
3. Enlaza en HTML: Añade esta línea en el <head> de tus páginas:
   <link rel="apple-touch-icon" href="/apple-touch-icon.png" />