Airtable Reactive Favicon

✋ What is it?

This is a solution found in the Airtable web app. When a user changes the name, color, and iconography of a base (a.k.a database), the favicon changes in real time, reflecting those changes.

🤲 How does this interaction or solution work?

Airtable is a productivity web app that allows users to build complex databases with the ease and familiarity of a traditional spreadsheet. Users in Airtable can create bases which are smart spreadsheets that can be set to track workflows or processes. Each base has a name and users can assign them specific colors or iconography to facilitate their identification.

This feature is particularly useful for large teams that are sharing and working on several bases simultaneously.
One particular behavior of this feature is that the resulting visual identifier (color + icon) is used as the favicon of the page when visualizing that specific base.

When a user has several bases open across multiple tabs, favicons can be crucial to differentiate those bases.

Airtable adds extra detail to this feature by updating the favicon in real time when a user makes changes to the base identifier (color + icon).


🙌 How does this interaction or solution work?

Learnability, Visibility and Recall Aid.

This simple behavior is a fantastic example of the value proposition and differentiation of Airtable.
Airtable understood that working with multiple spreadsheets is a tedious and cognitively expensive activity. This particular feature allows users to create mental models that can help them the identify specific documents faster.
The real-time update of the favicon serves as a reiteration of this concept and helps users to create a strong connection between the visual identifier and the content of a base.
It's also an excellent way to teach users that they can rely on the favicons to locate and differentiate bases across multiple tabs.


That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.