Why Your Favicon Looks Broken on iPhone (and How to Fix It)

Quick answer: iOS Safari never uses favicon.ico or your regular tab icon for the home screen — it looks specifically for <link rel="apple-touch-icon">, and if that PNG has transparency, iOS fills the transparent areas solid black instead of leaving them see-through, which is why the icon can look broken or inverted after someone adds it to their home screen.

If your favicon looks fine in Chrome and Firefox but turns into a black square or a screenshot of your webpage on an iPhone, you're not looking at a bug in your favicon — you're looking at Apple's completely separate icon system, which most sites never configure on purpose.

iOS doesn't read the icon you think it does

Every other platform discussed in favicon guides — favicon.ico, <link rel="icon"> PNGs, the web app manifest — is ignored by iOS Safari for one specific purpose: the icon used when someone taps "Add to Home Screen." Apple has its own tag for that:

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

Without this tag present, iOS doesn't fall back to your regular favicon. It falls back to taking a screenshot-style render of the current page and using that as the home-screen icon instead — which looks unfinished and unprofessional next to every other app on someone's home screen. See favicon vs. apple-touch-icon for the full breakdown of how these two systems diverged.

Why the icon looks black instead of transparent

This is the most common complaint once people do add an apple-touch-icon: the icon shows up, but with an ugly black background instead of the transparent one they exported.

Here's what's actually happening: iOS does not respect alpha transparency in apple-touch-icon.png files. Any transparent pixel gets filled in solid black when iOS renders the home-screen icon, regardless of what your PNG's alpha channel says. A logo that was designed as a transparent mark meant to sit on any background now sits inside a black square, which can look inverted, broken, or just wrong depending on the artwork.

The fix is not to remove transparency and hope for the best — it's to design for this deliberately. Flatten the icon onto an explicit background color before exporting, so there's no alpha channel for iOS to fill in. If your brand mark is dark, put it on a white or brand-colored square background. If it's light, do the same with a darker background. The goal is a fully opaque PNG where you chose the background, not iOS.

The size to use: 180×180px

Apple's current recommended size for apple-touch-icon is 180×180 pixels, which covers the highest-resolution iPhone displays without upscaling. Smaller sizes get scaled up by iOS if that's all you provide, which can look soft. If you're setting up your full icon set from scratch, our favicon size guide covers where 180×180 fits alongside every other size a modern site needs.

apple-touch-icon-precomposed is legacy — skip it

You may still see apple-touch-icon-precomposed mentioned in older tutorials. On very old iOS versions, Apple automatically applied a glossy overlay and rounded corners to touch icons, and the -precomposed variant told iOS to skip that effect and use the image exactly as provided. Modern iOS no longer applies that gloss effect at all, so apple-touch-icon-precomposed has nothing left to disable. A plain apple-touch-icon tag is all current iOS versions need.

The exact tag to add

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

No sizes attribute is required if you're only providing one 180×180 file, though you can add sizes="180x180" for clarity if you're also serving other apple-touch-icon sizes for older devices.

Confirm it before assuming it's a design problem

A broken-looking icon on iPhone isn't always a transparency issue — sometimes the tag is simply missing, misspelled, or pointing at a file that 404s, in which case iOS never gets an icon to render in the first place and falls back to the page-screenshot behavior regardless of how well-designed your PNG is. Before redesigning anything, run the live URL through the favicon checker to confirm the apple-touch-icon tag is actually present and the file actually loads. If it loads clean but still looks wrong on-device, then it's the transparency/background issue above — not a missing tag.

The converter can generate a properly flattened 180×180 apple-touch-icon from an existing logo in one pass, with an explicit background color instead of transparency, so you don't have to fix this by hand in an image editor.