How to replace the default Sanity logo in the studio with a custom logo.

Yes, you can definitely replace the default Sanity logo in the top left corner of your Studio with a custom logo! As of Sanity Studio v3.23.0, the way to do this has been updated.

Here's how to add your custom logo in your sanity.config.ts or sanity.config.js file:

import { defineConfig } from 'sanity'
import { MyLogo } from './components/MyLogo'

export default defineConfig({
  icon: MyLogo,
  // ...rest of your config
})

Then create your logo component (e.g., MyLogo.tsx or MyLogo.jsx):

import logo from './logo.png?url'

export const MyLogo = () => (
  <img src={logo} alt='My Logo' width={25} height={25} />
)

Important notes:

• The icon is locked to a square format - you can't increase the width beyond the square dimensions
• If you need more control over the toolbar layout (like a wider logo), you'll need to create a custom Studio layout using Studio Components, which involves creating a wrapper for the Studio and designing your own toolbar

For most use cases, the simple icon property should work well. Just make sure your logo looks good in a square format!

If you want to explore more advanced customization options like custom colors and themes alongside your logo, you can also check out Sanity Themer, which is an open-source tool that helps you customize your Studio's appearance visually.

You can find more details in this community answer thread where this exact question was discussed.