icon

Add Website Favicons

Add favicons to your site so it looks professional in search results, browser tabs, and device shortcuts. This also improves branding and supports SEO.

Posted by@Sujal Vanjare
Published on @
Updated on @

Favicons help your website stand out. They appear in browser tabs, bookmarks, search previews, mobile home screens, and more. Without them, your site may look unfinished or generic.

Step 1: Open the Site Configuration View

Go to your main Notion database.

At the top of the table, select Site Configuration.

Right after the Website Domain row, you’ll see several favicon entries such as:

  • favicon-512x512
  • favicon-192x192
  • favicon-32x32
  • favicon-16x16
  • favicon ico file
  • apple icon

Each one represents a specific format and size required for different browsers and devices.

Step 2: Upload Favicons in the Correct Size

Open each favicon row one by one.

Inside each page, there is a Thumbnail URL field.

Upload or paste an image with the correct size that matches the page name. For example:

Page NameImage Size Needed
favicon-512x512512 x 512
favicon-192x192192 x 192
favicon-32x3232 x 32
favicon-16x1616 x 16

You only need to set each one once.

Step 3: Create the .ICO File

There is one page called favicon ico file.

This file format is needed for some browsers and older systems.

To create it:

  1. 1.a.i.
    Go to this tool:

    https://picflow.com/convert/png-to-ico

  2. 2.b.ii.
    Upload a 256 x 256 PNG version of your icon
  3. 3.c.iii.
    Download the generated .ico file
  4. 4.d.iv.
    Upload it to the Thumbnail URL field in this row

This takes a few seconds and ensures full compatibility.

Step 4: Add the Apple Touch Icon

One row is named apple icon.

This is used for iPhones, iPads, and Apple devices when someone adds your site to their home screen.

This file must be:

  • PNG format
  • 180 x 180 size

Upload it to the Thumbnail URL field.

Step 5: Category Name Must Match

Each favicon page already has the correct category set.

Do not modify it.

The file name must match the category so the system knows which size to insert in the final metadata.

If the names do not match, the favicon will not work.

Step 6: Done

Once all icons are added, your site will automatically use them for:

  • Browser tabs
  • Mobile device shortcuts
  • Safari pinned icons
  • Google search listing
  • Metadata previews

No additional setup required.

Your site now looks polished, professional, and optimized for search engines and user experience.