Saltar al contenido principal
Móvil Tutorial Capacitor

Cómo cambiar los iconos de las apps en iPhone: paso a paso (2026)

Cambia los iconos de apps en iPhone paso a paso: personaliza la pantalla de inicio con iconos oscuros, tintados o claros, o usa Atajos para cualquier foto. Además, iconos alternativos para devs.

Cómo cambiar los iconos de la app en la pantalla de inicio de iPhone, estilos y atajos Capgo ilustración del blog

Puedes cambiar los iconos de las apps en iPhone de dos maneras. En las versiones actuales de iOS, mantén pulsada la pantalla de inicio y abre Personalizar, y aplica Oscuro, Tintado, Transparente, o más grandes iconos a todas las apps compatibles a la vez (Guía de la pantalla de inicio de Apple). Para usar tu propia foto en una app, crea un Atajos launcher y Añadir a la pantalla de inicio con una imagen personalizada (Guía de Shortcuts de Apple). Los desarrolladores de apps también pueden incluir iconos alternativos dentro de la app mediante el API nativo de Apple, incluso desde Capacitor con un puente nativo.

Las secciones siguientes explican cada ruta, cuándo elegirla y qué se rompe si te equivocas.

Tabla de contenidos

Guía para personalizar el icono de la app en iPhone

La pantalla de inicio del iPhone dejó de ser solo una cuadrícula de apps hace tiempo. La gente la usa como un escritorio, un dashboard y, en algunos casos, un mood board. Eso cambia lo que significa “personalización”. No se trata solo de hacer que las cosas se vean diferentes. Se trata de hacer que el dispositivo dé la sensación de estar organizado a propósito.

Ese cambio importa para ambos lados del producto. Los usuarios quieren iconos que encajen con un tema, combinen con widgets o reduzcan el desorden visual. Los desarrolladores quieren habilitarlo sin romper la sensación nativa de la app ni generar problemas de soporte por ajustes que no se comportan como los usuarios esperan.

Ahora hay dos capas distintas de personalización de iconos en iPhone. Una es la user-controlled Home Screen styling, que Apple ahora admite directamente en dispositivos compatibles. La otra es la de iconos alternativos controlados por la app, donde el desarrollador incluye variantes de iconos dentro de la app y permite al usuario elegir entre ellas. Están relacionadas, pero no son la misma función.

Regla práctica: Si vas a cambiar el aspecto de muchos iconos a la vez, empieza con las herramientas integradas de pantalla de inicio de Apple. Si intentas reemplazar una sola app con una imagen totalmente personalizada, usa la vía de los atajos o un icono alternativo que ofrezca el desarrollador.

Esa distinción también se refleja en la experiencia de usuario. Una pantalla de inicio bien cuidada es parte de la experiencia general de la app, no algo aparte. Los equipos que se preocupan por la retención y el acabado suelen tratar la personalización visual como una parte de la experiencia de usuario de la app móvil, no como un ajuste novedoso escondido en un menú.

Para usuarios: personaliza los iconos de tus apps del iPhone

La respuesta más clara depende de lo que quieras. Si quieres un estilo a nivel de sistema que mantenga el comportamiento normal de tus apps, usa los controles nativos de Apple. Si quieres una imagen personalizada concreta para una app, usa Shortcuts.

Usa los controles integrados de Apple para iPhone

Apple documenta el estilo nativo de iconos de la pantalla de inicio en Personaliza apps y widgets en la pantalla de inicio del iPhone. Puedes hacer los iconos más grandes, cambiarlos a Oscuro o Automático, hacerlos Transparente (translúcido), o aplica un Tintado color.

El proceso integrado sigue los pasos de Apple:

  1. Ve a la pestaña Pantalla de inicio.
  2. Mantén pulsado el fondo de la Pantalla de inicio hasta que los iconos empiecen a moverse.
  3. Toca Editar, luego elige Personalizar.
  4. Toca Oscuro, Automático, Transparente, o Tintado, o toca el control para crear iconos más grandes (los nombres de apps se ocultan en tamaño grande).
  5. Si elegiste Tintado, usa los deslizadores de color y saturación. También puedes usar el cuentagotas para tomar un color de tu fondo de pantalla y luego elegir Claro, Oscuro, o Automático.
  6. Si elegiste Transparente, selecciona Claro, Oscuro, o Automático cuando se te solicite.
  7. Toca Listo o pulsa el botón Inicio para salir del modo de edición.

Este método es el mejor punto de partida por ser nativo. No estás creando lanzadores falsos, sino cambiando cómo el propio sistema presenta los iconos compatibles.

Algunas notas prácticas importantes:

  • Ideal para consistencia visual a pantalla completa: Si buscas un tema cohesivo en varias apps, esto es más rápido que reconstruir cada icono manualmente.
  • Limitado para arte personalizado: Puedes personalizar los iconos, pero no puedes asignar cualquier imagen de tu biblioteca de Fotos a una app desde este menú.
  • Más seguro para apps de uso diario: Mail, Messages y otras apps con muchos badges se sienten más naturales si las dejas como iconos de app reales.

Si combinas el tinte del icono con el fondo de pantalla y los widgets, elige primero el fondo. La opción Tintado eyedropper puede muestrear un color de ahí para que los iconos coincidan con tu tema.

El método de Shortcuts sigue siendo relevante porque resuelve un problema diferente.

Esta guía visual muestra el proceso clásico:

Guía visual de seis pasos que muestra cómo personalizar los iconos de las apps de iPhone con la app Shortcuts.

Usa el método de Shortcuts para cualquier imagen

Antes del estilo nativo, la ruta estándar para un icono de app de iPhone totalmente personalizado era la app Shortcuts . Aún así, creas un atajo que abre la app real y luego lo añades a la pantalla de inicio con una foto personalizada.

Aquí tienes la versión práctica que funciona:

  1. Abrir Atajos y toca + para crear un nuevo atajo.
  2. Añade la Abrir app acción y elige la app que quieres lanzar.
  3. Toca el nombre del atajo o … para abrir Detalles.
  4. Toca Añadir a la pantalla de inicio.
  5. Pulsa el icono en el Nombre e icono de la pantalla de inicio área.
  6. Elige Tomar foto, Elegir foto, o Elegir archivo para la imagen del icono.
  7. Opcionalmente, renombra la etiqueta de inicio y pulsa Añadir.

Eso te da la libertad visual que el estilo predeterminado de Apple no permite. Puedes usar un pack de iconos monocromáticos, tus propios PNG o assets exportados de una herramienta de diseño.

La razón principal por la que se sigue usando este enfoque es el control. Si quieres que Spotify parezca un glifo dibujado a mano, o que todas tus apps de trabajo usen la misma paleta neutra, Shortcuts es la clave.

Los iconos de imagen personalizados lucen mejor si estandarizas la forma, el padding y el color de fondo antes de añadirlos. Una mezcla aleatoria de assets de distintos packs suele verse peor que la Home Screen por defecto.

Si estás creando una web app con aspecto nativo y quieres que tu interfaz sea más consistente con iOS, esta guía sobre configuración básica de JS y CSS para un aspecto de app nativa es un complemento útil para la personalización de iconos.

¿Qué método de usuario tiene más sentido?

Usa esta comparativa rápida para decidirte:

Objetivo Mejor método Por qué
Cambiar el estilo de toda la Home Screen Controles integrados de Apple Más rápido y mantiene el comportamiento nativo
Usa cualquier imagen como icono de una app Shortcuts Te permite elegir una foto o archivo
Mantén prácticas las apps centradas en notificaciones Controles integrados de Apple Mejor para el comportamiento normal de la app
Crea una pantalla temática desde cero Shortcuts Control visual total

Si solo necesitas un aspecto más limpio, no lo compliques. Los controles nativos de Apple son más fáciles. Si quieres una dirección de arte real sobre cada icono, Shortcuts sigue cumpliendo su función.

Comprender las ventajas y desventajas de los iconos personalizados

Un icono personalizado puede hacer que tu Home Screen se vea impecable en un minuto, pero luego puede molestarte toda la semana. El compromiso suele aparecer después de la configuración, no durante ella.

Un infográfico que compara las ventajas y desventajas de usar iconos de app personalizados en la pantalla de inicio del móvil.

Lo que ganas y lo que pierdes

El enfoque con Shortcuts sigue siendo útil porque te da libertad visual total. Pero no sustituye al icono de la app en la App Store a nivel de sistema. Crea un acceso directo en la pantalla de inicio que lanza la app mediante una ruta de acceso directo.

Esa diferencia tiene consecuencias reales.

  • Insignias poco fiables: Si dependes de los contadores de no leídos en apps de chat, correo o tareas, los iconos de acceso directo no son una buena opción.
  • Fricción al abrir: Algunos usuarios notan una breve transición cuando el acceso directo transfiere el control a la app.
  • Configuración manual: Repite el proceso para cada app que personalices.
  • Mayor mantenimiento: Si más adelante rediseñas tu pantalla de inicio, cada acceso directo será otro objeto que revisar.

Esas desventajas no son teóricas. Se derivan directamente de cómo funciona el método de Shortcuts. No estás modificando el bundle de la app, sino añadiendo un lanzador.

Si abres una app solo por las alertas, no la escondas detrás de un acceso directo cosmético salvo que tengas claro que no echarás de menos el comportamiento del badge.

Dónde difieren los iconos soportados por desarrolladores

Cuando una app ofrece iconos alternativos internamente, la experiencia es más limpia porque la propia app participa en el cambio. Esto suele implicar menos confusión y mejor alineación con la plataforma.

Desde el punto de vista del usuario, los iconos alternativos con soporte del desarrollador son el punto ideal entre la amplia personalización de la pantalla de inicio de Apple y la libertad total de Shortcuts. No tienes elección ilimitada de imágenes, pero sí un interruptor que se siente intencional y no improvisado.

Para los equipos de diseño, ese es el punto medio interesante. Lanzas un conjunto pequeño de iconos aprobados y los usuarios siguen sintiendo la app como suya. Además, proteges la calidad de marca, el contraste y el reconocimiento.

Los buenos packs de iconos suelen compartir tres rasgos:

  • Lenguaje de formas coherente: Redondeados, cuadrados, con contorno o rellenos, pero sin mezclarlos.
  • Peso visual estable: Grosor de trazo y espaciado interno similares.
  • Disciplina de tema: Modo claro, modo oscuro o una familia de estilos específica.

Por eso muchos desarrolladores acaban añadiendo iconos alternativos dentro de la app, en lugar de pedirles a los usuarios que gestionen todo con atajos.

Para desarrolladores que implementan iconos alternativos en iOS nativo

Si estás publicando una app iOS nativa, los iconos alternativos son una función pequeña con un gran valor de pulido. La implementación no es difícil, pero los detalles importan. La mayoría de los problemas provienen de la configuración de assets y del plist, no de la llamada a API en sí.

Un MacBook Pro mostrando Swift code en Xcode junto a un iPhone con iconos de aplicación iOS nativa.

Preparar assets de iconos y entradas del plist

Empieza con tus archivos de icono. Mantén la nomenclatura predecible. Si tu icono principal es el icono predeterminado de la app, nombra claramente los conjuntos alternativos, como DarkIcon, HolidayIcon, o MinimalIcon. No improvises etiquetas que producto, diseño e ingeniería interpretarán de manera diferente.

Tu app también necesita la estructura correcta de Info.plist. Como mínimo, iOS espera un CFBundleIcons diccionario con una definición de icono principal y un diccionario de iconos alternativos.

Un ejemplo simplificado se ve así:

<key>CFBundleIcons</key>
<dict>
  <key>CFBundlePrimaryIcon</key>
  <dict>
    <key>CFBundleIconFiles</key>
    <array>
      <string>AppIcon</string>
    </array>
  </dict>
  <key>CFBundleAlternateIcons</key>
  <dict>
    <key>DarkIcon</key>
    <dict>
      <key>CFBundleIconFiles</key>
      <array>
        <string>DarkIcon</string>
      </array>
    </dict>
    <key>MinimalIcon</key>
    <dict>
      <key>CFBundleIconFiles</key>
      <array>
        <string>MinimalIcon</string>
      </array>
    </dict>
  </dict>
</dict>

Algunos equipos prefieren gestionar esto en la pipeline de assets de Xcode. Otros editan los valores del plist directamente para mayor claridad en la revisión de code. Cualquiera de las dos opciones funciona. Lo importante es la consistencia entre los nombres de los assets y los nombres de iconos que pasas en runtime.

Si planeas iconos alternativos para una app de cliente, incluye tiempo de diseño y QA en tu alcance desde el principio. Es una de esas funciones que parecen triviales por fuera, pero que requieren arte, pruebas y decisiones de producto.

Llama a la API de iOS desde Swift

El runtime API es la parte fácil. iOS expone el cambio de iconos alternativos a través de UIApplication.

Una implementación simple:

import UIKit

func setAppIcon(to iconName: String?) {
    guard UIApplication.shared.supportsAlternateIcons else {
        return
    }

    UIApplication.shared.setAlternateIconName(iconName) { error in
        if let error = error {
            print("Failed to change icon: \(error.localizedDescription)")
        } else {
            print("Icon changed successfully")
        }
    }
}

Usa nil para volver al icono primario. Pasa la cadena de nombre del icono alternativo para cambiar a uno definido.

Algunas notas de ingeniería importan aquí:

  • Verifica el soporte primero: supportsAlternateIcons evita una ruta de llamada incorrecta.
  • Coincide las cadenas exactamente: El nombre en runtime debe coincidir con la entrada del plist.
  • Maneja los errores de forma limpia: Una configuración de assets incorrecta o estados no compatibles deben fallar visiblemente en desarrollo.
  • Treat icon choice like user preference: Persiste el nombre seleccionado si tu interfaz de configuración necesita reflejar la elección actual.

Nota de implementación: La llamada API es pequeña, pero tus modos de fallo suelen no serlo. Prueba instalaciones nuevas, actualizaciones y el comportamiento de restablecimiento a valores predeterminados antes de publicar.

Si mantienes un stack híbrido o el cumplimiento de la app store forma parte de tu pipeline de release, estos Apple policy updates for Capacitor apps valen la pena seguir junto con cualquier función de personalización nativa.

Crea una UI de ajustes que no confunda al usuario

Las mejores pantallas de selección de iconos son aburridas. Es un cumplido. Los usuarios deben ver una vista previa, un nombre y un área de toque clara.

Un patrón sólido es:

  • Muestra una cuadrícula de vista previa pequeña: Los usuarios comparan las opciones visualmente más rápido que mediante etiquetas de texto.
  • Mantén los nombres literales: «Oscuro», «Claro», «Retro», «Festivo» es mejor que nombres en clave internos de marca.
  • Ofrece una opción de restablecer: Haz obvio cómo volver al valor predeterminado.
  • No satures el menú: Un conjunto corto y curado se siente intencional.

Si quieres un elemento de configuración en el que los usuarios confíen, presenta la función como personalización, no como optimización. La gente entiende la elección de icono de inmediato cuando la interfaz es simple.

Para desarrolladores: una guía para Capacitor e Ionic

En una app de Capacitor, el cambio de icono sigue ocurriendo en iOS nativo. Tu capa web no puede reemplazarlo. Lo que la capa web puede hacer es disparar el API nativo a través de un bridge y mantener el resto de la experiencia de configuración en TypeScript.

Un espacio de trabajo moderno con un monitor de ordenador que muestra code, un teclado y un smartphone sobre el escritorio.

Mantén la fuente de verdad en iOS nativo

La primera regla es simple. Coloca los recursos de iconos alternativos y la configuración plist en el proyecto de iOS, no solo en el proyecto web. Capacitor envuelve una app nativa. Los iconos alternativos pertenecen a ese bundle de la app nativa.

Eso significa que tu flujo de trabajo suele ser así:

  1. Añade los recursos de iconos alternativos en el target de iOS.
  2. Regístralos en CFBundleIcons.
  3. Expón un método nativo a través de un plugin de Capacitor.
  4. Llama a ese método desde tu pantalla de configuración de Ionic, React, Vue o web puro.

Si omites el paso uno o dos, ninguna cantidad de JavaScript lo arreglará.

Expón el cambio de icono a TypeScript

Una interfaz de plugin mínima puede ser pequeña.

Lado de Swift:

import Capacitor
import UIKit

@objc(AppIconPlugin)
public class AppIconPlugin: CAPPlugin, CAPBridgedPlugin {
    public let identifier = "AppIconPlugin"
    public let jsName = "AppIcon"
    public let pluginMethods: [CAPPluginMethod] = [
        CAPPluginMethod(name: "setIcon", returnType: CAPPluginReturnPromise)
    ]

    @objc func setIcon(_ call: CAPPluginCall) {
        let iconName = call.getString("iconName")

        guard UIApplication.shared.supportsAlternateIcons else {
            call.reject("Alternate icons are not supported on this device.")
            return
        }

        UIApplication.shared.setAlternateIconName(iconName) { error in
            if let error = error {
                call.reject(error.localizedDescription)
            } else {
                call.resolve()
            }
        }
    }
}

Definición en TypeScript:

import { registerPlugin } from '@capacitor/core';

export interface AppIconPlugin {
  setIcon(options: { iconName: string | null }): Promise<void>;
}

export const AppIcon = registerPlugin<AppIconPlugin>('AppIconPlugin');

Si necesitas construir este bridge desde cero, esta guía sobre implementar un native bridge para iOS en Capacitor explica el patrón principal.

Conéctalo a una pantalla de ajustes en Ionic

Una vez creado el bridge, la UI de code es sencilla. Ahí es donde Capacitor destaca. Mantienes la lógica de producto en la capa web mientras iOS gestiona la llamada específica del sistema.

Ejemplo de uso:

async function changeIcon(iconName: string | null) {
  try {
    await AppIcon.setIcon({ iconName });
  } catch (err) {
    console.error('Failed to change icon', err);
  }
}

Algunas decisiones de producto hacen que la función se sienta completa:

  • Refleja la opción actual en la UI: No obligues al usuario a adivinar qué icono está activo.
  • Restringe los controles específicos de iOS: Oculta o desactiva la opción en plataformas donde no aplique.
  • Mantén las etiquetas compartidas con diseño: Usa los mismos nombres de iconos en code, las notas de QA y las capturas.
  • Planifica con cuidado las actualizaciones de assets: Si el arte del icono cambia tras el lanzamiento, coordina las expectativas de web y nativo.

Este es también el punto en el que una herramienta de release puede resultar relevante. Si tu pantalla de ajustes, las etiquetas de los iconos, el copy o los assets de preview cambian más adelante, herramientas como Capgo pueden actualizar JavaScript, CSS, copy, config y assets en una app Capacitor sin cambiar el bundle de iconos nativo. Eso no sustituye el mecanismo de iconos alternativos de Apple, pero sí ayuda a iterar en la interfaz que los rodea.

El futuro de la personalización es colaborativo

La personalización de iconos en iPhone solía estar dividida en dos mundos. Los usuarios tenían hacks; los devs, APIs de plataforma. Ahora esa línea es más fina.

Para los usuarios, la conclusión práctica es simple. Si buscas un toque visual rápido, el estilo de Home Screen de Apple es lo más fácil. Si quieres libertad visual total para un icono concreto, Shortcuts sigue funcionando, siempre que aceptes las contrapartidas.

Para los devs, los iconos alternativos ya no son un truco estacional. Son parte del polish del producto. Un selector de iconos bien hecho da a los usuarios una sensación de pertenencia sin forzarles workarounds que debiliten la experiencia.

Las mejores funciones de personalización no obligan a los usuarios a elegir entre estética y usabilidad. Cerran la brecha entre ambas.

Eso importa aún más en stacks híbridos. La capacidad nativa y la iteración de producto impulsada por web no tienen por qué competir. Los equipos pueden mantener el cambio de icono en iOS donde corresponde, y luego mejorar la experiencia de configuración circundante con el tiempo mediante prácticas de lanzamiento cuidadosas y un enfoque de despliegue segmentado, especialmente en apps que ya usan actualizaciones en tiempo real con segmentación de usuarios.

La tendencia general es saludable. Apple ha hecho que la personalización de la pantalla de inicio sea más nativa. Los usuarios esperan más control. Los desarrolladores ahora pueden cumplir esa expectativa de forma limpia, ya sea que lancen apps puras en Swift o apps de Capacitor con un puente nativo bajo el capó.

Preguntas frecuentes

¿Cómo cambio el icono de la app en iPhone?

En iOS 18 y versiones posteriores, toca y mantén presionada la pantalla de inicio, toca Editar y luego Personalizar para cambiar los iconos a Oscuro, Claro, Tintado o tamaños más grandes. Para usar tu propia imagen, abre la app Acciones, crea una acción con la acción Abrir app, elige la app y luego añádela a la pantalla de inicio y toca el icono para seleccionar una foto. Los pasos están en la sección del método de Acciones.

¿Cómo cambio el icono de una web app en iPhone?

Una app web guardada con Añadir a la pantalla de inicio usa el icono que declara el sitio web, por lo que no puedes cambiarlo en Ajustes. Crea una acción en la app Acciones con la acción Abrir URLs apuntando al sitio, y luego añade esa acción a la pantalla de inicio con tu propia imagen. Si desarrollas la app web, configura un apple touch icon personalizado, o lánzala como app nativa con Capacitor para controlar el icono por completo.

::: faq

¿Puedes cambiar los iconos de las apps en iPhone?

Sí. En una versión de iOS compatible, puedes cambiar el estilo de todos los iconos de la pantalla de inicio con Oscuro, Automático, Tintado, Transparente o iconos más grandes desde Personalizar. Para usar tu propia imagen en una app, añade un lanzador de Atajos a la pantalla de inicio con una foto personalizada. :::

::: faq

¿Cómo cambio todos los iconos de las apps a la vez en iPhone?

Mantén pulsado el fondo de la pantalla de inicio hasta que los iconos empiecen a moverse, toca Editar, elige Personalizar y luego selecciona Oscuro, Automático, Transparente, Tintado o el tamaño de icono más grande. Para Transparente o Tintado, elige Claro, Oscuro o Automático para definir cómo se ve ese estilo. Apple lo documenta en su guía de personalización de la pantalla de inicio. :::

::: faq

¿Cómo uso una imagen personalizada como icono de app en iPhone?

Crea un atajo que abra la app, abre los detalles del atajo, toca Añadir a la pantalla de inicio, toca el icono y elige una foto o archivo. Eso añade un icono de la pantalla de inicio con tu imagen. Es un lanzador de atajos, no cambia el icono de la app en la App Store. :::

::: faq

¿Los iconos de atajos muestran insignias de notificación?

Normalmente no de forma fiable. Un atajo de la pantalla de inicio es un lanzador separado, así que los contadores de no leídos y las insignias de la app real a menudo no aparecen en el icono personalizado. Usa los estilos integrados de Apple para apps de correo, chat y tareas. :::

::: faq

Can Capacitor apps let users pick alternate icons?

Sí, cuando el target de iOS define iconos alternativos en Info.plist y los expone UIApplication.setAlternateIconName a través de un bridge nativo. La capa web activa el cambio; los assets de iconos permanecen en el bundle nativo. :::


Si mantienes una app de Capacitor y quieres mejorar la experiencia de configuración en funciones como la selección de iconos, el targeting de despliegue o las actualizaciones de assets, Capgo es una opción a considerar para publicar cambios en JavaScript, CSS, textos, configuración y assets sin esperar a la revisión de la tienda para cada ajuste de interfaz.

Live updates para apps Capacitor

Cuando un bug de la capa web está en producción, publica el fix a través de Capgo en lugar de esperar días a la aprobación de la app store. Los usuarios reciben la actualización en segundo plano mientras los cambios nativos siguen el flujo de revisión habitual.

Lo último de nuestro blog

Capgo te da la información clave que necesitas para crear una app móvil realmente profesional.