Favicon for Notion Site: Add a Custom Icon

If you've ever published a Notion page as a website and noticed the browser tab still shows a generic Notion logo or a blank square, you're not alone. Notion sites use the page's icon as the favicon, but only if you set it correctly. Here's how to make your Notion site stand out with a custom favicon.

Prerequisites

• A Notion account with a published site (Public page or Notion Site).
• An image file for your icon (PNG or JPG, square, at least 64x64 pixels recommended).
• Optional: a custom domain connected to your Notion site for a branded URL.

Step-by-Step: Set a Favicon for Your Notion Site

1. Open your Notion page in the desktop app or web browser. Make sure you're in edit mode.
2. Hover over the page title and click the Add icon button (or click the existing icon).
3. Upload your image by selecting the Upload tab and choosing your file. Notion will use this as the page icon.
4. Publish or update your site. If you're using Notion Sites, click Share > Publish and confirm. For a public page, just toggle Share to web.
5. Verify the favicon by opening your site URL in a new browser tab. The icon should appear within a few seconds. If not, try a hard refresh (Ctrl+F5 or Cmd+Shift+R).

That's it—Notion automatically uses the page icon as the favicon for your site. There's no separate favicon upload field.

Using a Custom Domain

If you've connected a custom domain to your Notion site, the favicon will still come from the page icon. No extra steps are needed. Just ensure your domain is properly configured in Notion's settings.

Common Pitfalls

• Icon not updating: Browsers cache favicons aggressively. Clear your cache or test in an incognito window. See our favicon cache clear guide for details.
• Icon appears blurry: Use a square image with a minimum size of 64x64 pixels. Larger images (e.g., 256x256) scale down better.
• Icon missing on mobile: Notion sites may not show favicons on mobile home screens. For a more robust icon setup, consider using a custom domain with a web manifest.
• Using an emoji as icon: Notion allows emojis as page icons. These will appear as favicons, but they may not render consistently across browsers. For a professional look, upload a custom image.

For a deeper dive into favicon formats and best practices, check our favicon guide.

Conclusion

Setting a favicon for your Notion site is straightforward: just set a page icon. With a square image and a quick refresh, your site will have a recognizable tab icon. If you need to generate multiple favicon sizes for other platforms, try Mzu favicondl to create a complete icon set.

Check the documented requirements

The HTML Standard defines rel='icon' as the link relationship for an icon representing the current page.