Acerca de esta herramienta
Apple Touch Icon es el icono que puede usar un sitio al añadirse a la pantalla de inicio de un dispositivo Apple. Coloca tu logotipo sobre un fondo cuadrado de un color sólido y obtén los PNG y su HTML correspondiente.
Cómo usarla
- Selecciona o arrastra una imagen PNG, JPG/JPEG o WebP sin animación.
- Mantén el fondo blanco o elige otro color sólido. Ajusta cómo encajar o recortar la imagen y el margen interior.
- Usa el tamaño inicial de 180×180 o marca otros tamaños que necesites antes de generar.
- Descarga los PNG o el ZIP, copia el HTML y comprueba las rutas de los archivos.
Tamaños disponibles
- Por defecto se crea apple-touch-icon.png de 180×180, una opción útil para muchos sitios.
- También puedes elegir 120×120, 152×152 y 167×167 para ajustarte a distintos dispositivos o a una configuración de iconos existente.
Consejos para crear iconos
- Ajustar la imagen completa mantiene sus proporciones y rellena el espacio libre con el fondo elegido. Recortar el centro toma el cuadrado central. Ninguna de las dos opciones deforma la imagen.
- El margen se calcula por cada lado del tamaño de salida. Con un 10 % de margen, la imagen ocupa aproximadamente el 80 % central del ancho y del alto.
- Para tamaños como 16×16 convienen siluetas sencillas y un contraste claro. Las fotos complejas o los textos pequeños pueden perder legibilidad; comprueba las vistas a tamaño real.
Admite PNG, JPG/JPEG y WebP sin animación. El límite es de 100 MiB por archivo, 40 millones de píxeles por imagen y 16.384 píxeles por lado. Las imágenes grandes pueden necesitar más tiempo y memoria.
Cómo usar Apple Touch Icon
- La configuración inicial usa un fondo blanco y un margen del 10 % por lado. Los logotipos transparentes se colocan sobre el color elegido para evitar fondos inesperados en otros entornos.
- La imagen se mantiene cuadrada, sin recortar las esquinas. El dispositivo aplica su propio aspecto y redondeado; un margen adecuado ayuda a alejar el motivo de los bordes.
- El HTML usa apple-touch-icon y solo incluye los tamaños generados. Coloca los archivos en las ubicaciones indicadas por esas referencias.
Privacidad
Las imágenes, los emojis y los iconos generados se procesan únicamente en tu navegador y no se envían a ningún servidor.
La herramienta no guarda automáticamente las imágenes ni los resultados. Descarga los iconos que quieras conservar antes de borrar o salir de la página y guarda también el material original.
Preguntas frecuentes
¿Qué es Apple Touch Icon?
Es el icono PNG que se usa al añadir un sitio a la pantalla de inicio de un dispositivo Apple. Normalmente se indica mediante una referencia apple-touch-icon en la página.
¿Qué tamaño debo elegir?
Puedes empezar con el tamaño predeterminado de 180×180. Selecciona otros si necesitas adaptar los iconos a una configuración existente o a tamaños de dispositivos concretos.
¿Por qué conviene usar un fondo opaco?
Un color sólido te permite controlar el fondo alrededor de un logotipo transparente y evita que otros entornos asignen un color inesperado a esas zonas.
¿Debo redondear las esquinas antes?
Normalmente no hace falta. La herramienta crea un PNG cuadrado estándar para que el dispositivo aplique su propio aspecto al icono.
¿Cómo uso los iconos descargados?
Copia el HTML de los resultados y coloca cada icono en la ruta correspondiente. El archivo de 180×180 se llama apple-touch-icon.png; los demás usan sus respectivos nombres generados.