Apple Touch Icon Transparent Background: Fix the White Square on iOS
You upload a perfect PNG with a transparent background for your Apple Touch Icon. On desktop, it looks crisp. On your iPhone, Safari shows a white square around your logo. It looks like a sticker on a white piece of paper.
I've been there. It's frustrating because you did everything right — or so you thought. The fix is simpler than you'd expect, and it doesn't require redesigning your icon.
Quick Fix: Add the Correct HTML Tag
The most common reason your apple touch icon transparent background shows as a white square is that iOS Safari is falling back to a default icon. You're probably missing the rel='apple-touch-icon' tag, or you're using the wrong size.
That's it. One line. The sizes='180x180' attribute tells iOS to use this specific file. Without it, Safari might ignore your icon and render a white placeholder.
Why 180x180?
Apple recommends 180x180 pixels for modern iPhones (iPhone 6s and later). Older devices fall back gracefully. If you're generating multiple sizes, read our Apple Touch Icon Sizes Guide — but honestly, 180x180 covers almost everything.
Root Cause: Why Transparency Breaks
Even with the correct HTML, you might still see a white background. Here are the three real culprits:
iOS caches aggressively. Safari on iPhone stores icons in a SQLite database. If you previously uploaded a version with a white background, iOS remembers it. You need to clear Safari's cache or rename the file.
Your PNG isn't truly transparent. Some image editors save transparent areas as white pixels with zero opacity. iOS renders them as white. Use a tool like Mzu favicondl to verify your PNG's alpha channel.
You're using a JPG or a non-PNG format. iOS only supports PNG for Apple Touch Icons. A JPG always has a solid background.
How to Verify Your PNG's Transparency
Open your icon in a browser. If you see a checkerboard pattern, your transparency is intact. If you see a solid white or gray background, your PNG has a problem. Re-export from your design tool with 'Transparency' checked.
Prevention Tips: Stop the White Square Forever
Once you fix it, you don't want it to break again. Here's my battle-tested approach:
Use SVG for Apple Touch Icons (Yes, It Works)
iOS 14+ supports SVG for Apple Touch Icons. SVG handles transparency natively — no white squares, no alpha channel issues. Here's the tag:
I switched to SVG on my personal site six months ago. Zero issues. The only catch: older iOS versions (iOS 13 and below) ignore SVG. Keep a PNG fallback.
Cache-Busting: Rename Your File
Every time you update your icon, change the filename. Instead of apple-touch-icon.png, use apple-touch-icon-v2.png. This forces iOS to download the new file instead of serving the cached white-background version.
Test on a Real Device
Don't trust the simulator. Add your site to the iPhone home screen and check the icon. If it shows a white square, you'll know immediately. For a full checklist, see our Apple Touch Icon Complete Setup Guide.
What About the 'precomposed' Attribute?
You might see old tutorials recommending rel='apple-touch-icon-precomposed'. This was for iOS 6 and earlier, which added a glossy effect to icons. Modern iOS ignores it. Don't use it — it's dead weight.
The white square problem is almost always a missing tag, a cached old icon, or a non-transparent PNG. Fix those three things, and your icon will look native on every iPhone.
Subes un PNG perfecto con fondo transparente para tu Apple Touch Icon. En el escritorio se ve nítido. En tu iPhone, Safari muestra un cuadrado blanco alrededor de tu logo. Parece una pegatina sobre un papel blanco.
Yo también he pasado por eso. Es frustrante porque hiciste todo bien — o eso creías. La solución es más simple de lo que esperas, y no requiere rediseñar tu icono.
Solución Rápida: Añade la Etiqueta HTML Correcta
La razón más común por la que tu apple touch icon transparent background se muestra como un cuadrado blanco es que iOS Safari está usando un icono por defecto. Seguramente te falta la etiqueta rel='apple-touch-icon', o estás usando el tamaño incorrecto.
Eso es todo. Una línea. El atributo sizes='180x180' le dice a iOS que use este archivo específico. Sin él, Safari podría ignorar tu icono y mostrar un marcador de posición blanco.
¿Por qué 180x180?
Apple recomienda 180x180 píxeles para iPhones modernos (iPhone 6s y posteriores). Los dispositivos más antiguos hacen un fallback sin problemas. Si estás generando múltiples tamaños, lee nuestra Guía de Tamaños de Apple Touch Icon — pero honestamente, 180x180 cubre casi todo.
Causa Raíz: Por Qué se Rompe la Transparencia
Incluso con el HTML correcto, podrías seguir viendo un fondo blanco. Aquí están los tres verdaderos culpables:
iOS cachea agresivamente. Safari en iPhone guarda los iconos en una base de datos SQLite. Si previamente subiste una versión con fondo blanco, iOS la recuerda. Necesitas limpiar la caché de Safari o renombrar el archivo.
Tu PNG no es realmente transparente. Algunos editores de imagen guardan áreas transparentes como píxeles blancos con opacidad cero. iOS los renderiza como blancos. Usa una herramienta como Mzu favicondl para verificar el canal alfa de tu PNG.
Estás usando un JPG o un formato que no es PNG. iOS solo soporta PNG para Apple Touch Icons. Un JPG siempre tiene un fondo sólido.
Cómo Verificar la Transparencia de tu PNG
Abre tu icono en un navegador. Si ves un patrón de tablero de ajedrez, tu transparencia está intacta. Si ves un fondo blanco o gris sólido, tu PNG tiene un problema. Vuelve a exportar desde tu herramienta de diseño con la opción 'Transparencia' marcada.
Consejos de Prevención: Elimina el Cuadrado Blanco para Siempre
Una vez que lo arregles, no querrás que se vuelva a romper. Aquí está mi enfoque probado en batalla:
Usa SVG para Apple Touch Icons (Sí, Funciona)
iOS 14+ soporta SVG para Apple Touch Icons. SVG maneja la transparencia de forma nativa — sin cuadrados blancos, sin problemas de canal alfa. Aquí está la etiqueta:
Cambié a SVG en mi sitio personal hace seis meses. Cero problemas. La única pega: las versiones antiguas de iOS (iOS 13 y anteriores) ignoran SVG. Mantén un PNG como fallback.
Cache-Busting: Renombra tu Archivo
Cada vez que actualices tu icono, cambia el nombre del archivo. En lugar de apple-touch-icon.png, usa apple-touch-icon-v2.png. Esto obliga a iOS a descargar el nuevo archivo en lugar de servir la versión cacheada con fondo blanco.
Prueba en un Dispositivo Real
No confíes en el simulador. Añade tu sitio a la pantalla de inicio del iPhone y comprueba el icono. Si muestra un cuadrado blanco, lo sabrás al instante. Para una lista de verificación completa, consulta nuestra Guía Completa de Configuración de Apple Touch Icon.
¿Qué Pasa con el Atributo 'precomposed'?
Puede que veas tutoriales antiguos que recomiendan rel='apple-touch-icon-precomposed'. Esto era para iOS 6 y versiones anteriores, que añadían un efecto brillante a los iconos. El iOS moderno lo ignora. No lo uses — es peso muerto.
El problema del cuadrado blanco casi siempre es una etiqueta faltante, un icono antiguo en caché, o un PNG sin transparencia real. Arregla esas tres cosas, y tu icono se verá nativo en cualquier iPhone.
투명 배경의 PNG 파일을 Apple Touch Icon으로 업로드했다고 가정해보자. 데스크탑에서는 깔끔하게 보인다. 그런데 아이폰에서 사파리로 확인해보면 로고 주변에 하얀 사각형이 나타난다. 마치 흰 종이 위에 스티커를 붙인 것처럼 보인다.
나도 겪어본 일이다. 모든 걸 제대로 했다고 생각했는데도 이런 현상이 발생하니 정말 답답하다. 하지만 해결 방법은 생각보다 간단하며, 아이콘을 다시 디자인할 필요도 없다.
빠른 해결책: 올바른 HTML 태그 추가하기
Apple Touch Icon 투명 배경이 하얀 사각형으로 표시되는 가장 흔한 이유는 iOS 사파리가 기본 아이콘으로 대체(fallback)하기 때문이다. 아마도 rel='apple-touch-icon' 태그가 누락되었거나, 잘못된 크기를 사용하고 있을 가능성이 높다.
한 줄이면 끝이다. sizes='180x180' 속성은 iOS에게 이 특정 파일을 사용하라고 지시한다. 이 속성이 없으면 사파리가 아이콘을 무시하고 흰색 플레이스홀더를 렌더링할 수 있다.
왜 180x180인가?
Apple은 최신 아이폰(iPhone 6s 이상)에 180x180 픽셀을 권장한다. 구형 기기에서는 문제없이 대체된다. 여러 크기를 생성해야 한다면 Apple Touch Icon 크기 가이드를 참고하라. 하지만 솔직히 180x180만으로도 거의 모든 상황을 커버할 수 있다.
근본 원인: 투명도가 깨지는 이유
올바른 HTML을 사용했음에도 여전히 흰색 배경이 보일 수 있다. 실제 원인은 다음 세 가지다:
iOS의 공격적인 캐싱. 아이폰의 사파리는 아이콘을 SQLite 데이터베이스에 저장한다. 이전에 흰색 배경이 있는 버전을 업로드했다면 iOS가 이를 기억한다. 사파리의 캐시를 지우거나 파일 이름을 변경해야 한다.
PNG가 진정한 투명이 아님. 일부 이미지 편집기는 투명 영역을 알파값이 0인 흰색 픽셀로 저장한다. iOS는 이를 흰색으로 렌더링한다. Mzu favicondl 같은 도구를 사용해 PNG의 알파 채널을 확인하라.
JPG 또는 PNG가 아닌 형식을 사용함. iOS는 Apple Touch Icon에 PNG만 지원한다. JPG는 항상 단색 배경을 가진다.
PNG 투명도 확인 방법
브라우저에서 아이콘을 열어보자. 체커보드 패턴이 보이면 투명도가 정상이다. 단색 흰색 또는 회색 배경이 보이면 PNG에 문제가 있는 것이다. 디자인 도구에서 '투명도' 옵션을 체크하고 다시 내보내라.
예방 팁: 흰색 사각형을 영원히 없애는 방법
한 번 수정한 후에 다시 깨지지 않게 하려면, 내가 검증한 접근 방식을 따르라:
Apple Touch Icon에 SVG 사용하기 (가능하다)
iOS 14 이상은 Apple Touch Icon에 SVG를 지원한다. SVG는 투명도를 기본적으로 처리하므로 흰색 사각형이나 알파 채널 문제가 없다. 태그는 다음과 같다: