Skip to main content

Add a favicon with Checkout and Accounts Configuration API

Plus

Checkout styling customizations are available only to Shopify Plus merchants.

You can use the Checkout and Accounts Configuration API to add a favicon that displays across checkout, customer accounts, and sign-in. The favicon is configured on branding.components.favicon and applies to all surfaces.

For an introduction to the API, see About the Checkout and Accounts Configuration API. For the equivalent guide using checkoutBrandingUpsert, see Add the favicon.

The checkout page favicon displaying a stylized Monstera Deliciosa plant leaf
Tip

You can reset styles to their defaults by writing parent fields to null with the checkoutAndAccountsConfigurationUpdate mutation.

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.
  • Retrieve a Checkout and Accounts Configuration ID.
  • Apply the favicon and view it in checkout.

Anchor to RequirementsRequirements

  • Your app has the write_files access scope to upload images via the fileCreate mutation.

Anchor to Step 1: Upload the iconStep 1: Upload the icon

Customizing the favicon requires you to first upload the icon to Shopify as a staged upload 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 set the favicon.

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL mutation

mutation fileCreate($files: [FileCreateInput!]!) {
fileCreate(files: $files) {
files {
id
alt
createdAt
}
}
}

Query variables

{
"files": [
{
"alt": "Our logo, a leaf from the Monstera Deliciosa plant",
"filename": "favicon-image",
"originalSource": "https://{example}.com/custom-favicon-for-checkout"
}
]
}

JSON response

{
"data": {
"fileCreate": {
"files": [
{
"id": "gid://shopify/MediaImage/34829967327254",
"alt": "Our logo, a leaf from the Monstera Deliciosa plant",
"createdAt": "2026-04-01T12:00:00Z"
}
]
}
}
}

Anchor to Step 3: Retrieve a Checkout and Accounts Configuration IDStep 3: Retrieve a Checkout and Accounts Configuration ID

Use the checkoutAndAccountsConfigurations query to retrieve the ID of the configuration you want to update.

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL query

query {
checkoutAndAccountsConfigurations(first: 5) {
edges {
node {
id
name
}
}
}
}

Anchor to Step 4: Set the favicon imageStep 4: Set the favicon image

Call the checkoutAndAccountsConfigurationUpdate 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

mutation UpdateFavicon($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
configuration { id }
userErrors { field message code }
}
}

Query variables

{
"id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
"configuration": {
"branding": {
"components": {
"favicon": {
"mediaImageId": "gid://shopify/MediaImage/34829967327254"
}
}
}
}
}

Anchor to Differences from the Checkout Branding APIDifferences from the Checkout Branding API

Checkout Branding APICheckout and Accounts Configuration API
customizations.favicon.mediaImageIdbranding.components.favicon.mediaImageId
Uses checkoutProfileIdUses configuration id
Favicon applies to checkout onlyFavicon applies across all surfaces (checkout, customer accounts, sign-in)

Anchor to Next stepsNext steps

  • Explore the GraphQL Admin API to learn more about customizing favicon across checkout, customer accounts, and sign-in.
Was this page helpful?