App Clip Codes
App Clip Codes are the best way for people to discover your App Clip. Their distinct design is immediately recognizable, and they offer a fast, secure way to launch your App Clip.
App Clip Code with the App Clip logo
App Clip Code without the App Clip logo
App Clip Codes always use the designs Apple provides and follow size, placement, and printing guidelines. Choose between the badge design that uses the App Clip logo ( App Clip) or, when space is at a premium, a design without it. Create App Clip Codes that use a default color pair, or choose custom foreground and background colors. For developer guidance, see Creating App Clip Codes.
Interacting with App Clip Codes
App Clip Codes come in two variants: scan-only or with an embedded NFC tag (NFC-integrated).
The scan-only variant uses a camera icon in its center to let people know to use the Camera app or the Code Scanner in Control Center to scan the App Clip Code. The NFC-integrated variant uses an iPhone icon at its center that guides people to hold their device close to the App Clip Code or to scan it using the NFC Tag Reader in Control Center. People can also scan an NFC-integrated App Clip Code with the Camera app or the Code Scanner in Control Center. For example:
- A coffee shop could place an App Clip Code on their menu. A guest could hold their device close to the App Clip Code and instantly launch the shop’s App Clip to order a drink.
- A gas station could have an NFC-integrated App Clip Code attached to each pump. A traveler could hold their device close to it to launch the gas station’s App Clip and use it to pay for their refill.
- A video game creator could hand out marketing material at an industry event that includes an App Clip Code. An event attendee could scan the code to launch an App Clip that’s a playable demo of their latest video game.
Displaying App Clip Codes
When you start designing your App Clip Codes, choose the variant that works best for the way people use your App Clip. If people can physically access the App Clip Code, use the NFC-integrated variant. For example:
- On a tabletop at a restaurant
- Near a register at a retail store
- In a storefront window
- On signage
- On a gift card or coupon
If you need to place your App Clip Code in an area that’s physically inaccessible or you need to display it digitally, use a scan-only App Clip Code. For example:
- On posters or printed advertising
- On signage behind a counter or unreachable in a storefront
- On digital materials such as digital displays, in emails, or on images you post to social media
No matter which of the two variants you use, it’s important you carefully consider where you place your App Clip Code to ensure a reliable scanning experience.
Include the App Clip logo when space allows. The logo helps make it clear that the code launches an App Clip; however, if you can’t meet the clear space requirements, use the App Clip Code design without the App Clip logo. Also, use the design without the App Clip logo if you place the App Clip Code on disposable paper or plastic items, or on items associated with gambling or drinking. For example, use the App Clip Code without the App Clip logo on playing cards, poker chips, or bar coasters. The App Clip logo is always part of the badge design where it appears below the App Clip Code; never use the App Clip logo on its own.
Place your App Clip Code on a flat or cylindrical surface only. If you place your App Clip Code on a cylindrical surface — for example, on a scooter’s handlebar — make sure the width of the App Clip Code doesn’t exceed one-sixth of the cylinder’s circumference.
Help your App Clip Code remain as flat as possible so it’s easy for people to scan. To enable the best scanning experience, avoid displaying App Clip Codes on deformable materials that readily fold or crumple, such as paper, plastic, or fabric. If you need to make your App Clip Code available on a bag, flexible box, or other deformable object, display it on something rigid — like a card — that you attach to the object. If you create an App Clip Code sticker, make sure it adheres well to flat surfaces.
Place your App Clip Code in a location that helps ensure reliable scanning. For example, place a scan-only App Clip Code in a location that offers enough light to ensure reliable scanning, and don’t require people to scan from a wide angle.
Make sure the App Clip Code is unobstructed. Don’t overlay the App Clip Code with text, logos, or images. Never animate the App Clip Code or dim it.
Display the App Clip Code in an upright position. Don’t rotate the generated App Clip Code or display the center glyph at an angle.
Don’t create App Clip Codes that are too small. App Clip Codes must adhere to the following specifications.
| Type | Minimum Size |
|---|---|
| Printed communications | Minimum diameter of 3/4 inch (1.9 cm). |
| Digital communications | Minimum size of 256×256px. Use a PNG or SVG file. |
| NFC-integrated App Clip Code | The embedded NFC tag should be at least 35 mm in diameter or of equivalent size. For example, if your embedded NFC tag is 35 mm in diameter, your printed App Clip Code should be at least 1.37 inches (3.48 cm) in diameter. |
When determining the dimensions of your App Clip Codes, consider a distance to code size ratio of no more than 20:1. If possible, use a ratio of 10:1 to ensure reliable scanning. For example, an App Clip that people scan from 40 inches (101 cm) away should be at least 4 inches (10.16 cm) in diameter.
If you display an App Clip Code near a QR Code or other scannable item, choose a size for the App Clip Code that’s at least the other code’s or item’s size.
Provide enough space between an App Clip Code and adjacent App Clip Codes, graphics, or materials. The minimum clear space around an App Clip Code is equal to the space between the center glyph and the circular code. If you place your App Clip Code next to another App Clip Code or other machine-readable code, leave enough clear space to allow for reliable scanning of each code.
Using clear messaging
Add clear messaging that informs people how they can use the App Clip Code to launch your App Clip, especially if you use the design without the App Clip logo. For example, add a call to action next to an App Clip Code you display in an email or on a poster. Use the suggested call-to-action messaging or your own copy. Always use a simple, clear call to action.
For a scan-only App Clip Code, you can use the following call to action:
- Scan to [describe what users can do with your App Clip].
- Scan using the camera on your iPhone or iPad to [describe what users can do with your App Clip].
For an NFC-integrated App Clip Code, you can use the following call to action:
- Scan to [describe what users can do with your App Clip].
- Hold your iPhone near the [object name] to launch an App Clip that [describe what a user can do with your App Clip].
For more information, see Near-field communication.
Adhere to Guidelines for Using Apple Trademarks when referring to your App Clip and App Clip Codes. For example, Apple trademarks shouldn’t appear in your app name or imagery, always use title case when using the terms App Clips or App Clip Code, and so on. For additional information, see Legal requirements.
Customizing your App Clip Code
Use App Store Connect or the App Clip Code Generator command-line tool to create App Clip Codes, and follow best practices to ensure a reliable scanning experience.
Always use the generated App Clip Code. Don’t create your own App Clip Code design or modify a generated App Clip Code in any way. Don’t apply filters, augment its colors, or add glows, shadows, gradients, or reflections. They negatively impact people’s scanning experience. When scaling a generated App Clip Code, don’t change the generated code’s aspect ratio, and be sure to scale all attributes of the App Clip Code — for example the stroke widths.
Choose colors with enough contrast that ensure accurate scanning. Each App Clip Code uses three colors: a foreground color, a background color, and a third color that’s generated for you based on the foreground and background colors. Both App Store Connect and the App Clip Code Generator command-line tool offer a selection of default color pairs. Alternatively, you can choose custom foreground and background colors. Note that you can’t choose custom colors that will lead to a suboptimal scanning experience. If your color selection doesn’t work well, neither App Store Connect nor the command-line tool will generate an App Clip Code. To help you choose a color combination that works well, both tools contain functionality to suggest a different foreground color based on your custom background color. For more information, see Creating App Clip Codes with the App Clip Code Generator and Creating App Clip Codes with App Store Connect.
