Add the favicon
Checkout styling customizations are available only to Shopify Plus merchants.
You can use the GraphQL Admin API to add the favicon that displays at checkout, for a visual representation of your brand.

Anchor to What you'll learnWhat you'll learn
In this tutorial, you'll learn how to do the following tasks:
- Upload an image for the favicon that displays at checkout.
- Retrieve a list of your store's checkout profile IDs.
- Apply the favicon and view it in checkout.
Anchor to RequirementsRequirements
- The store that you're modifying must be on a Shopify Plus plan.
- You've created a new development store with the Checkout and Customer Accounts Extensibility developer preview enabled.
- You can make authenticated requests to the GraphQL Admin API.
- You've either installed the GraphiQL app on your store or created an app, with the
read_checkout_branding_settings
andwrite_checkout_branding_settings
access scopes. - You're using API version
2023-10
or higher. - You're familiar with the GraphQL Admin API's branding types.
Anchor to Step 1: Upload the iconStep 1: Upload the icon
Customizing the checkout favicon requires you to first upload the icon to Shopify as a stagedUpload or your own hosting.
Anchor to Step 2: Create the file assetStep 2: Create the file asset
Make a request to the GraphQL Admin API's fileCreate
mutation, passing an external URL or a staged upload URL as the originalSource
. You'll use the id
value when you add the image as the favicon.
POST https://{shop}.myshopify.com/api/{api_version}/graphql.json
GraphQL mutation
Query variables
JSON response
Anchor to Step 3: Retrieve the store's published checkout profile IDStep 3: Retrieve the store's published checkout profile ID
Anchor to Step 4: Set the favicon imageStep 4: Set the favicon image
Call the checkoutBrandingUpsert
mutation, passing the mediaImageId
. This is the id
value that the fileCreate
mutation returned.
POST https://{shop}.myshopify.com/api/{api_version}/graphql.json
GraphQL mutation
Query variables
JSON response
Anchor to Step 5: View the favicon in checkoutStep 5: View the favicon in checkout
You can view the favicon in its draft and published state. You might need to refresh the page to see changes.
-
In the Shopify admin, click Settings.
-
Click Checkout.
-
In the Checkout page, click ....
-
Select one of the following:
- If your checkout profile is live, select View.
- If your checkout profile is in draft, select Preview.
Anchor to Next stepsNext steps
- Explore the GraphQL Admin API to learn more about customizing checkout's favicon.