apple-touch-icon

Apple Touch Icon Generator

Create the apple-touch-icon (180×180) iOS uses for home-screen shortcuts — plus a full favicon set and the link tag — in your browser.

apple-touch-icon 180+ favicon set100% freeNo sign-up

Suelta una imagen para crear un favicon

Arrastra y suelta, pega o elige un archivo

PNG · JPG · WebP · SVG — iconos creados en tu dispositivo

The icon iOS shows on the home screen

When someone adds your site to their iPhone or iPad home screen, iOS looks for an apple-touch-icon — a 180×180 PNG referenced with a specific link tag. This tool generates it from your image, along with the rest of a modern favicon set so every device is covered.

Because iOS does not use transparency for these icons, you can set a solid background and a touch of padding so your logo fills the rounded tile nicely. The matching HTML line is included so you can paste and go.

How to make an apple-touch-icon

  1. Add your image — a square logo at high resolution gives the cleanest result.
  2. Set a background — pick a solid color, since iOS icons aren't transparent.
  3. Adjust padding — leave a small margin so the mark isn't cut by the rounded mask.
  4. Download & paste — copy apple-touch-icon.png to your root and add the provided link tag.

Tip: 180×180 covers modern iOS

A single 180×180 apple-touch-icon is enough for current iPhones and iPads; older devices downscale it. The generated HTML includes the correct rel="apple-touch-icon" line.

apple-touch-icon: sizes and where each is used

Cuando alguien añade tu sitio a la pantalla de inicio de su iPhone o iPad, iOS Safari busca un apple-touch-icon referenciado por una etiqueta link específica. Un solo tamaño cubre el iOS moderno:

Size File Where it's used
180 × 180 px apple-touch-icon.png El icono de la pantalla de inicio y del marcador en los iPhone y iPad actuales; iOS reduce este único archivo para contextos más pequeños.

Format & container

Guárdalo como PNG y mantenlo totalmente opaco: iOS ignora la transparencia en los iconos de la pantalla de inicio y representa cualquier canal alfa como negro, así que pon un fondo sólido y algo de margen dentro de la máscara redondeada.

How it's wired into your page

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

Tip

Hoy basta con un solo icono de 180 × 180 —los dispositivos antiguos lo reducen—, así que no hace falta la larga lista de tamaños heredados apple-touch-icon-precomposed que los sitios solían incluir.

Todas las herramientas de favicon e iconos

Preguntas frecuentes

What size is the apple-touch-icon?

180×180 px. That single size covers modern iOS devices, which downscale it as needed for smaller contexts.

Does it need a transparent background?

No — iOS ignores transparency for home-screen icons and adds its own rounded mask, so a solid background is recommended.

Where is the icon created?

In your browser, on your own device. How any data associated with the tool is handled is described in our privacy policy.

What HTML do I add?

A <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> tag in your page head — it's included in the snippet you can copy here.

Más herramientas de imagen