Cómo configurar el Favicon para Agregar a la Pantalla de Inicio

¿Alguna vez has tocado 'Compartir' y luego 'Agregar a la pantalla de inicio' en tu iPhone, esperando ver un ícono de aplicación elegante, pero en su lugar obtuviste una captura de pantalla en miniatura e ilegible de la página web? Veo esto constantemente en sitios en producción. Tus pestañas de escritorio pueden verse bien, pero es muy probable que la configuración de tu ícono de pantalla de inicio (add to home screen icon favicon) para móviles esté incompleta.

Mira a Stripe o GitHub. Cuando guardas sus aplicaciones web en tu teléfono, el ícono se asienta en tu pantalla de inicio luciendo exactamente como una app nativa descargada de la App Store. Ellos no dejan esto al azar ni confían en los valores predeterminados del navegador. Definen explícitamente qué debe mostrar el sistema operativo.

Los navegadores móviles son notoriamente perezosos. Si no le dices explícitamente a iOS Safari o Android Chrome qué imagen usar para el acceso directo, entran en pánico. Safari toma una captura de pantalla literal de tu sitio. Chrome intenta estirar tu diminuto favicon de escritorio de 32x32 hasta convertirlo en un enorme cuadrado de 192x192. Ambos resultados se ven terribles y destruyen la credibilidad de tu marca.

La configuración de 3 pasos para la perfección en la pantalla de inicio

No necesitas un bloque masivo de etiquetas HTML heredadas para arreglar esto. En 2026, solo necesitamos satisfacer a dos grandes jugadores: Apple (iOS) y Google (Android). Aquí te explico exactamente cómo hacerlo.

Paso 1: Crea el Apple Touch Icon (iOS)

Apple ignora obstinadamente los manifiestos web estándar para los íconos de la pantalla de inicio. Tienes que darle a Safari una etiqueta link específica. La imagen debe ser un PNG de 180x180 píxeles.

(No uses transparencia aquí — iOS rellena las áreas transparentes con negro sólido, haciendo que tu logo parezca una nota de rescate. Usa siempre un color de fondo sólido).

<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>

Coloca esta etiqueta justo dentro de tu <head>. Para profundizar en las peculiaridades de iOS, revisa nuestra guía de configuración del Apple Touch Icon.

Paso 2: Configura el Web Manifest (Android)

Los dispositivos Android buscan un archivo site.webmanifest. Este archivo JSON le dice a Chrome exactamente cómo debe comportarse tu sitio cuando se guarda en la pantalla de inicio, incluyendo qué ícono usar y si debe ocultar la interfaz del navegador.

Crea un archivo llamado site.webmanifest en tu directorio raíz y agrega este código:

{
  "name": "Nombre de tu App",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Nota la propiedad display: standalone. Esta es la línea mágica que elimina la barra de URL cuando un usuario abre tu sitio desde su pantalla de inicio, dándole esa sensación de app nativa.

Paso 3: Vincula el Manifest en tu HTML

Necesitas apuntar tu documento HTML a ese archivo manifest. Agrega esto justo debajo de tu etiqueta de Apple touch icon:

<link rel='manifest' href='/site.webmanifest'>

Errores comunes a evitar

Incluso los desarrolladores senior se equivocan en esto. Aquí están las trampas en las que veo a la gente caer cada semana:

• Usar SVGs para iOS: Safari todavía no soporta completamente SVG para el ícono de la pantalla de inicio. Quédate con PNG. Lee nuestra guía de favicon SVG para ver dónde pertenecen realmente los SVGs (pista: pestañas de escritorio).
• Olvidar el color de fondo: Como mencioné, iOS odia la transparencia. Rellena el fondo de tu PNG con un color sólido de tu marca.
• Pesadillas de caché: Si actualizas tu ícono, iOS se aferrará obstinadamente al antiguo. Agrega una cadena de consulta de versión como ?v=2 a la ruta del archivo en tu HTML para forzar una actualización.

Probando tu implementación

No confíes en las herramientas de desarrollo de tu navegador de escritorio para esto. La única forma real de probar tu ícono de pantalla de inicio es en un dispositivo físico.

Abre tu sitio en un iPhone, toca el botón Compartir y selecciona 'Agregar a la pantalla de inicio'. Mira el ícono de vista previa. Si es tu nítido PNG de 180x180, has ganado. Haz lo mismo en un dispositivo Android usando el menú de Chrome. Si el ícono se ve pixelado, revisa las rutas de tu manifest.

No compliques demasiado este proceso. En 2026 necesitas exactamente tres archivos: un ícono de escritorio estándar, un Apple Touch Icon de 180px y un manifest con íconos de Android. Si necesitas generar estos archivos exactos a partir de un solo logo de alta resolución, pásalo por Mzu favicondl y suelta el resultado en tu directorio raíz. Maneja el tamaño y el formato automáticamente.