Apple Touch Icon vs Favicon: Differences and When to Use Each
How an Apple touch icon differs from a favicon, where each appears, which formats suit them, and how dark mode affects your vector logo exports.
Contents
The short answer
A favicon and an Apple touch icon are both small renderings of a site's logo or brand mark, but they serve different places. The favicon is the tiny icon browsers show in tabs, bookmarks, history and address-bar suggestions. The Apple touch icon is the larger image Apple devices use when someone saves a website to the home screen, and some other platforms reuse it as a bookmark or shortcut tile. You normally need both. They come from the same master logo artwork, but they are exported and designed differently.
How the two assets differ
| Aspect | Favicon | Apple touch icon |
| Main role | Identifies the site in browser tabs, bookmarks and history | Represents the site as an app-like icon on an Apple device home screen |
| Display size | Very small, so detail is lost quickly | Much larger, so it can carry more detail |
| Typical formats | ICO, PNG and, in browsers that support it, SVG | PNG raster image |
| Can it be vector? | Yes, as an SVG favicon where supported, with raster fallbacks | No, it is delivered as a raster image |
| Background | Often transparent so it sits on the tab color | Should have a solid, intentional background |
| Shape | Shown as supplied | The device applies its own rounded-corner mask |
| Dark mode | An SVG favicon can adapt its colors with a media query | No reliable built-in way to swap versions by color scheme |
Where each one comes from: vector master versus raster exports
Both icons should be derived from editable vector logo artwork rather than redrawn from a screenshot or a low-resolution image. From that master you export separate files: raster PNG or ICO favicons at small sizes, a larger raster PNG for the Apple touch icon, and optionally an SVG favicon.
Do not assume an SVG file is true vector artwork because of its extension. An SVG can wrap an embedded bitmap, which brings none of the benefits of vector paths and may look blurry when scaled. Open the file in a vector editor and confirm the mark is built from paths and shapes before using it as an SVG favicon or as the source for exports.
Designing for each size
- Favicon: simplify the mark aggressively. A full logo lockup with wordmark and tagline becomes unreadable at tab size, so a symbol, monogram or single letter usually works better.
- Favicon: check legibility at the smallest export, not only in the editor at large zoom. Thin strokes and fine gaps tend to disappear.
- Apple touch icon: give the mark breathing room inside a solid background. The device rounds the corners, so anything placed tight to the edges risks being clipped.
- Apple touch icon: avoid relying on transparency. Transparent areas may be filled with a color you did not choose, so set the background yourself.
- Both: keep colors and proportions consistent with the master logo so the icons read as the same brand.
Dark mode variants
Dark mode mainly affects the favicon, because it sits directly on browser interface colors that change between light and dark themes. A dark mark on a transparent background can vanish on a dark tab bar, and a light mark can vanish on a light one.
An SVG favicon can include a style rule that responds to the prefers-color-scheme media query, switching fills when the system uses a dark theme. This works only in browsers that support SVG favicons and honor that query inside the icon, so keep raster fallbacks. Where switching is not available, the safer design choice is a mark with enough contrast to survive on both light and dark backgrounds, for example by adding a subtle outline or a small solid backing shape.
The Apple touch icon is a fixed PNG with its own background, so it carries its contrast with it and is less exposed to theme changes. The supplied material did not confirm whether or how current Apple operating systems apply automatic dark or tinted treatments to saved website icons, so verify this on target devices rather than relying on assumptions.
Declaring the icons in a page
Each icon is referenced with a link element in the page head. The placeholders below stand in for your own file paths.
<link rel="icon" href="[path to ICO or PNG favicon]" sizes="any">
<link rel="icon" href="[path to SVG favicon]" type="image/svg+xml">
<link rel="apple-touch-icon" href="[path to Apple touch icon PNG]">Browsers that understand the SVG version can prefer it, while others fall back to the raster favicon. The apple-touch-icon declaration is read separately and does not replace the favicon.
Rights to the logo artwork
If the icons are based on someone else's logo, being able to download the artwork does not mean you may simplify, recolor or crop it into a favicon, or use its typeface or trademark. Those permissions come from the brand owner's guidelines or license, not from file availability.
Gaps in this overview
No subject-specific evidence was supplied, so this article relies on general, widely documented principles. It does not cite tested browser-version support, exact recommended pixel dimensions or device behavior measured for this piece. Confirm current platform guidance and test on real browsers and devices before finalizing your exports.