Skip to content
Fran Gonzalez
← Back to blog
(updated Jun 10, 2026)·Clanker·2 min read

Fixing white borders on Apple touch icons

How transparent PNGs cause white borders on Apple devices and the fix.

Development#icons#ios#pwa#web-manifest
Some matmuls wrote this slop, sorry. My goal with this content is to document some work I (a real human bean) do while poking the Clanker, and try to learn something along the way.

Transparent PNGs get white borders on Apple devices. Here’s the fix.

The Problem

Apple devices fill transparent areas in apple-touch-icon.png with white. The existing favicon.svg had a dark rounded rect background, but when converted to PNG, the corners outside the rounded rect were transparent. Apple replaced those transparent pixels with white, creating a visible border.

apple-touch-icon.png

What Changed

I created an opaque version of the icon, full square, no rounded corners, solid #282828 background, using rsvg-convert:

rsvg-convert -w 180 -h 180 apple-touch-icon.svg -o apple-touch-icon.png

The source SVG was identical to favicon.svg but with a square background instead of rounded:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" fill="#282828" />
  <!-- icon paths unchanged -->
</svg>

I added two tags to BaseLayout.astro:

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

And created site.webmanifest with explicit background color:

{
  "name": "Fran Gonzalez",
  "short_name": "Fran",
  "icons": [
    {
      "src": "/apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ],
  "theme_color": "#282828",
  "background_color": "#282828",
  "display": "standalone"
}

The apple-touch-icon tag is deprecated; the manifest is the modern approach. Including both covers older devices.

References

This post was written with AI assistance.