> Shopify Plus:
> Checkout styling customizations are available only to [Shopify Plus](https://www.shopify.com/plus) merchants.


You can use the GraphQL Admin API to add the favicon that displays at checkout, for a visual representation of your brand.

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/apps/checkout/favicon-55371f7464776be0a6c0aa5d32bfed4f98298c87f0d9c3fc18dc61846cefc4c5.png" class="lazyload" alt="The checkout page favicon displaying a stylized Monstera Deliciosa plant leaf" width="512" height="86"></figure>


> Tip:
> You can reset styles to their defaults by writing parent fields to `null` with the GraphQL Admin API. Refer to examples of resetting [some](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_color_schemes_to_the_defaults) and [all](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_all_styling_to_defaults) values to the defaults.



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

## Requirements

- The store that you're modifying must be on a [Shopify Plus plan](https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plan).
- You've created a new [development store](/docs/api/development-stores#create-a-development-store-to-test-your-app) with the [Checkout and Customer Accounts Extensibility developer preview enabled](/docs/api/developer-previews#enable-a-developer-preview).
- You can make [authenticated requests](/docs/api/admin-graphql#authentication) to the GraphQL Admin API.
- You've either [installed the GraphiQL app](https://shopify-graphiql-app.shopifycloud.com/login) on your store or [created an app](/docs/apps/build/scaffold-app), with the `read_checkout_branding_settings` and `write_checkout_branding_settings` [access scopes](/docs/api/usage/access-scopes).
- You're using API version `2023-10` or higher.
- You're familiar with the [GraphQL Admin API's branding types](/docs/apps/build/checkout/styling#data-structures).


## Step 1: Upload the icon

Customizing the checkout favicon requires you to first upload the icon [to Shopify as a stagedUpload](/docs/apps/build/online-store/product-media#step-1-upload-media-to-shopify) or your own hosting.

## Step 2: Create the file asset

Make a request to the GraphQL Admin API's [`fileCreate`](/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 add the image as the favicon.


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




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




```json
{
  "data": {
    "fileCreate": {
      "files": [
        {
          "id": "gid://shopify/MediaImage/34829967327254",
          "alt": "Our logo, a leaf from the Monstera Deliciosa plant",
          "filename": "favicon-image",
          "createdAt": "2023-11-107T02:44:06Z"
        }
      ]
    }
  },
}
```





## Step 3: Retrieve the store's published checkout profile ID

Checkout styling properties apply to a [checkout profile ID](/docs/apps/build/checkout/styling#checkout-profile). In this step, you'll retrieve the checkout profile to which you'll apply favicon changes.

1. Query [`checkoutProfiles`](/docs/api/admin-graphql/latest/queries/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.

    <p>
    <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
    <script data-option="title" data-value="POST https://{shop}.myshopify.com/admin/api/{api_version}/graphql.json"></script>

    
    <p>
    <div class="react-code-block" data-preset="basic">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar basic-codeblock"></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>

    <script data-option="title" data-value="GraphQL query"></script>

    <script type="text/plain" data-language="graphql">
    RAW_MD_CONTENTquery checkoutProfiles {
      checkoutProfiles(first: 1, query: "is_published:true") {
        edges {
          node {
            id
            name
          }
        }
      }
    }
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


    <p>
    <div class="react-code-block" data-preset="basic">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar basic-codeblock"></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>

    <script data-option="nocopy" data-value="true"></script>
    <script data-option="title" data-value="JSON response"></script>

    <script type="text/plain" data-language="json">
    RAW_MD_CONTENT{
      "data": {
        "checkoutProfiles": {
          "edges": [
            {
              "node": {
                "id": "gid://shopify/CheckoutProfile/1",
                "name": "Default checkout profile"
              }
            }
          ]
        }
      }
    }
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


    
    </div>
    </p>


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


## Step 4: Set the favicon image

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


```graphql
mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
  checkoutBrandingUpsert(
    checkoutBrandingInput: $checkoutBrandingInput
    checkoutProfileId: $checkoutProfileId
  ) {
    checkoutBranding {
      customizations {
        favicon {
          image {
            id
          }
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}
```




```json
{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/{profile_ID}",
  "checkoutBrandingInput": {
    "customizations": {
      "favicon": {
        "mediaImageId": "gid://shopify/MediaImage/34829967327254"
      }
    }
  }
}
```




```json
{
  "data": {
    "checkoutBrandingUpsert": {
      "checkoutBranding": {
        "customizations": {
          "favicon": {
            "image": {
              "id": "gid://shopify/ImageSource/34839857299478"
            }
          }
        }
      },
      "userErrors": []
    }
  },
}
```





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

1. In the Shopify admin, click **Settings**.

1. Click **Checkout**.

1. In the **Checkout** page, click **...**.

1. Select one of the following:
  - If your checkout profile is live, select **View**.
  - If your checkout profile is in draft, select **Preview**.

## Next steps

- Explore the [GraphQL Admin API](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) to learn more about customizing checkout's favicon.