Customize the favicon

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

• The store that you're modifying must be on a Shopify Plus plan.
• You've created a new development store with the Checkout Extensibility preview enabled.
• You've completed the GraphQL and REST Admin API getting started guide.
• You've either installed the GraphiQL app on your store or created an app, with the read_checkout_branding_settings and write_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.

Customizing the checkout favicon requires you to first upload the icon to Shopify as a stagedUpload or your own hosting.

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.

Checkout styling properties apply to a checkout profile ID. In this step, you'll retrieve the checkout profile to which you'll apply favicon changes.

1. Query checkoutProfiles to retrieve a list of checkout profile IDs.

   The is_published parameter indicates which checkout profile is currently applied to your store's live checkout.

2. Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations.

Call the checkoutBrandingUpsert mutation, passing the mediaImageId. This is the id value that the fileCreate mutation returned.

You can view the favicon in its draft and published state. You might need to refresh the page to see changes.

1. In the Shopify admin, click Settings.

2. Click Checkout.

3. In the Checkout page, click ....

4. Select one of the following:

   • If your checkout profile is live, select View.
   • If your checkout profile is in draft, select Preview.

• Explore the GraphQL Admin API to learn more about customizing checkout's favicon.