Safari Smart App Banner: Setup, Testing and Best Practices

Quick answer: A Smart App Banner is Safari's built-in strip at the top of a web page that promotes your iOS app. Add <meta name="apple-itunes-app" content="app-id=123456789"> to the head of each page, using your numeric App Store ID. Add app-argument= with a URL to deep link people who already have the app. Test on a real iPhone or iPad, because the banner never appears in the Simulator.

The banner is drawn by Safari, not by your website. It pulls your app's details from the App Store, uses a standard look people recognize, and has a prominent close button. You cannot restyle it, change its copy or move it. That uniformity is the point: visitors trust that tapping it leads to the App Store, not to an ad.

Its behavior depends on the visitor's situation:

Apple documents the banner as an iOS feature in Safari. Don't count on it in other browsers, in-app browsers or on the Mac. Plan a separate approach for those visitors (see the Android and other browsers section below).

The whole setup is one line of markup per page.

1. Find your app ID. In App Store Connect, open your app, go to General, then App Information. The number listed as Apple ID is your app ID. It's the same number that follows id in your App Store link.
2. Choose the pages. Apple's instructions are to put the tag in the head element of each page where you want the banner, so you decide where it appears. A site-wide layout template is the easiest place if you want it everywhere.
3. Add the tag. The minimal version is <meta name="apple-itunes-app" content="app-id=123456789">.
4. Add an app-argument (optional). Extend the content attribute with a comma: <meta name="apple-itunes-app" content="app-id=123456789, app-argument=https://example.com/recipes/42">.
5. Deploy and test on a device (see the testing checklist below).

Apple documents two parameters for the content attribute:

Render the tag in your server-side HTML rather than injecting it with JavaScript after the page loads. Server rendering is the setup Apple's documentation describes, and it removes one variable when you troubleshoot.

Without app-argument, the Open button only launches your app at its home screen. With it, people continue exactly where they were on the web. Apple suggests three common patterns, and you can generate the value per page on your server:

The value can be any valid URL. Using your real page URL is usually simplest, because the routing logic already exists on the web side.

In the app, Apple's sample code reads the URL in the app delegate's open-URL callback and routes on its path and query. If your app is scene-based or written in SwiftUI, send the URL through the same deep-link handler you use for universal links or custom URL schemes, and confirm on a device that it arrives.

Most "my banner isn't showing" reports come down to the test setup, not the tag. Apple's documentation spells out two limits: banners don't appear in the iOS Simulator, and they can't be displayed inside a frame.

Use this checklist on a physical iPhone or iPad running Safari:

• The page is opened directly in Safari, not inside an iframe or another app's web view.
• The app-id is the numeric Apple ID, not your bundle ID.
• The app is live and available in the App Store country or region the test device uses.
• The device can run the app. An iPad-only app won't show a banner on an iPhone.
• The tester hasn't closed the banner on this site already. Safari remembers that choice, so test with a device or browser state that hasn't dismissed it.
• The tag is in the delivered HTML. View the page source or check it with Safari's Web Inspector from a Mac.

Then test both states. Without the app installed, View should open your product page. With the app installed, Open should launch it, and your handler should receive the app-argument URL.

Put it where the app is the better experience. Content an app does better, such as saved lists, editing, offline use or notifications, is the natural home for the banner. On pages where you'd rather people finish a task on the web, like a one-time checkout, you can simply leave the tag out.

Don't stack prompts. The Smart App Banner is small and dismissible by design. Adding your own full-screen "Get the app" pop-up on top of it annoys Safari visitors twice. Google Search also discourages intrusive interstitials on mobile pages, so keep any custom prompt modest.

Use it alongside, not instead of, store badges. Visitors on desktop and Android never see the Smart App Banner. Keep official App Store and Google Play badges on your landing page; the badge guidelines cover sizing and wording. Our app landing page guide shows where the banner and badges fit together.

Make the destination convert. The banner only delivers a visitor to your product page. The icon, the first screenshots and the ratings do the rest, so treat those like any other landing page. If the screenshots still look like raw UI, these screenshot best practices are the place to start.

Watch the numbers. In App Store Connect, downloads that start from a link on a website are attributed to the Web Referrer source type, and individual referring sites appear once they pass Apple's minimum data thresholds. Compare that source before and after you add the banner. Our App Store Connect analytics guide explains where to look.

Chrome on Android ignores the apple-itunes-app tag, and there is no identical built-in banner you can rely on. Combine these instead:

1. Android App Links. Verified App Links let https links to your domain open directly in your app when it's installed. That's the Android equivalent of the banner's Open behavior. Google documents the setup on the Android Developers site.
2. A lightweight custom banner. Show a small, dismissible bar to Android visitors only, link it to your Google Play listing, and remember the dismissal. Don't show it to iPhone Safari visitors, who already get Apple's banner.
3. Campaign tags. Add utm_source and utm_campaign to the Google Play link in your custom banner. Play Console can then break down store listing traffic by UTM source and campaign, so you can see how much the banner contributes.

Keep the custom banner's design restrained. A system-like strip with your icon, app name and one button reads as helpful. A flashing overlay reads as an ad.