---
title: Add a favicon with Checkout and Accounts Configuration API
description: >-
  Learn how to set the favicon for checkout, customer accounts, and sign-in
  using the Checkout and Accounts Configuration API.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration/add-favicon
  md: >-
    https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration/add-favicon.md
api_name: checkout-ui-extensions
---

# Add a favicon with Checkout and Accounts Configuration API

**Plus:**

Checkout styling customizations are available only to [Shopify Plus](https://www.shopify.com/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`](https://shopify.dev/docs/api/admin-graphql/latest/input-objects/CheckoutAndAccountsConfigurationBrandingImageInput) and applies to all surfaces.

For an introduction to the API, see [About the Checkout and Accounts Configuration API](https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration). For the equivalent guide using `checkoutBrandingUpsert`, see [Add the favicon](https://shopify.dev/docs/apps/build/checkout/styling/add-favicon).

![The checkout page favicon displaying a stylized Monstera Deliciosa plant leaf](https://shopify.dev/assets/assets/images/apps/checkout/favicon-BN_EuOQ6.png)

**Tip:**

You can reset styles to their defaults by writing parent fields to `null` with the [`checkoutAndAccountsConfigurationUpdate`](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutAndAccountsConfigurationUpdate) mutation.

***

## What 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.

***

## Requirements

* You're [authenticated with the GraphQL Admin API](https://shopify.dev/docs/apps/build/authentication-authorization).
* Your app has access to the `read_checkout_and_accounts_configurations` and `write_checkout_and_accounts_configurations` access scopes.
* You have a Checkout and Accounts Configuration ID. To learn how to retrieve one, see [About the Checkout and Accounts Configuration API](https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration).

- Your app has the `write_files` access scope to upload images via the [`fileCreate`](https://shopify.dev/docs/api/admin-graphql/latest/mutations/fileCreate) mutation.

***

## Step 1: Upload the icon

Customizing the favicon requires you to first upload the icon [to Shopify as a staged upload](https://shopify.dev/docs/apps/build/product-merchandising/products-and-collections/manage-media) or your own hosting.

***

## Step 2: Create the file asset

Make a request to the GraphQL Admin API's [`fileCreate`](https://shopify.dev/docs/api/admin-graphql/latest/mutations/fileCreate) mutation, passing an external URL or a [staged upload URL](https://shopify.dev/api/admin-graphql/latest/mutations/stageduploadscreate) 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

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

## Query variables

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

## JSON response

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

***

## Step 3: Retrieve a Checkout and Accounts Configuration ID

Use the [`checkoutAndAccountsConfigurations`](https://shopify.dev/docs/api/admin-graphql/latest/queries/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

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

***

## Step 4: Set the favicon image

Call the [`checkoutAndAccountsConfigurationUpdate`](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutAndAccountsConfigurationUpdate) mutation, passing the `mediaImageId`. This is the `id` value that the [`fileCreate` mutation returned](#step-2-create-the-file-asset).

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL mutation

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

## Query variables

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

***

## Differences from the Checkout Branding API

| Checkout Branding API | Checkout and Accounts Configuration API |
| - | - |
| `customizations.favicon.mediaImageId` | `branding.components.favicon.mediaImageId` |
| Uses `checkoutProfileId` | Uses configuration `id` |
| Favicon applies to checkout only | Favicon applies across all surfaces (checkout, customer accounts, sign-in) |

***

## Next steps

* Explore the [GraphQL Admin API](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutAndAccountsConfigurationUpdate) to learn more about customizing favicon across checkout, customer accounts, and sign-in.

***