How to Change the Favicon of the Studio

Yes! You can definitely change the favicon of your Sanity Studio. Here's how:

Individual Files Needed

To customize your Studio's favicon, you'll need to place five different files in the static folder within your studio folder:

• favicon.svg - A square vector file in SVG format (scales well and can support light/dark mode)
• favicon.ico - A small, square ICO file (fallback for older browsers)
• favicon-512.png - A 512x512px PNG (for web manifests and mobile bookmarks)
• favicon-192.png - A 192x192px PNG (smaller icon variant)
• apple-touch-icon.png - A 180x180px PNG (for iOS bookmarks)

Generating the Files

You can create these files manually, or use the create-favicon tool to generate them all from a single SVG source:

# From the studio root folder:
npm create favicon -- <path-or-url-to.svg> static

Once the files are in the static folder, your Studio will automatically use them. Note that browsers may cache the old favicons for a while.

Troubleshooting

If your custom favicons aren't showing up:

• Verify all files are in the static folder with correct casing
• When running sanity build, check the dist/static folder to confirm the icons are there
• Try a hard refresh (Command+Shift+R on Mac, Ctrl+F5 on Windows/Linux)
• Use the "Disable cache" feature in your browser's network tab

More details in the official Sanity documentation on favicons.