Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 43

Configuring General App Settings

Recommended resources

Welcome to the first lesson in our final module, "Deployment and Optimization." Having built a robust admin system with a publish/unpublish feature in our last session, your multi-tool platform is now functionally complete from a content management perspective. It's time to shift our focus from building to launching.

Today, we'll address the learning outcome: configuring general app settings for deployment, including the app name, favicon, and social sharing image. These settings are the digital equivalent of your platform's business card. They define your app's identity in a browser tab, in bookmarks, and most importantly, when it's shared across the web. For your goal of creating a popular multi-tool platform, getting these branding details right is a crucial first step toward creating a professional and memorable user experience.

App Identity: Favicon and General Appearance

First, let's give your app its unique visual signature. This starts with the favicon, the small icon that appears in a user's browser tab. It's a small detail that makes a big impact on brand recognition.

You'll find these settings in the main Settings tab of the Bubble editor. This area controls app-wide configurations, as opposed to settings for individual pages.

Settings tab - Bubble Docs

This section of the Bubble manual provides an overview of the General settings sub-tab, which is where we'll be working.

In the "General" sub-tab description, locate the "General appearance" list. Pay attention to the Favicon setting. This is where you'll upload your app's icon.

To set your favicon:

  1. Navigate to the Settings tab and then the General sub-tab.
  2. Under the "General appearance" section, you'll see the Favicon uploader.
  3. Click it to upload an image file.

For the best results, your favicon should be a square image. Common sizes are 32x32 pixels or 64x64 pixels, but modern browsers can handle larger resolutions. Given your background in graphic design, you can create a simple, clean logo or icon for your platform. This icon will instantly make your site look more professional and complete.

Social Media & Link Previews: Open Graph Settings

Next, let's control how your platform appears when a link to it is shared on social media sites like X, Facebook, or in messaging apps. This is managed by a protocol called Open Graph. By setting these "OG tags," you're essentially creating a default link preview for your entire application.

This is critical because a rich, informative preview with a compelling image is far more likely to be clicked than a plain URL.

The Bubble manual provides a good overview of what metadata is and why it's important.

SEO: Page | Bubble Docs

This article explains the core concepts behind page titles, descriptions, and social media images. Although it focuses on page-level settings, the principles are identical for the app-wide defaults we are setting now.

Read the initial section on what metadata is and its purpose. Then, review the definitions for Page Title, Title (for SEO / FB), Description (for SEO / FB), and Social Media Image. This will clarify what each field does.

These settings are found in a different sub-tab within the main Settings area.

  1. Navigate to Settings and then the SEO / metatags sub-tab.
  2. You will see a section titled "Social Media / Open Graph settings".
This is the panel in the `Settings > SEO / metatags` tab where you'll define the default title, description, and image for link previews across your entire application.

Here’s a breakdown of the fields and how to fill them out for your multi-tool platform:

  • Title: This is the main headline of the link preview. It should be concise and descriptive.
    • Example: ToolVerse - Your All-in-One Online Toolkit
  • Site name: The name of your platform.
    • Example: ToolVerse
  • Description: A short summary (around 150 characters is a good target) that explains what your site offers.
    • Example: A free collection of powerful online utilities, including converters, calculators, and text formatters. Boost your productivity with our easy-to-use tools.
  • Thumbnail used for links: This is your default social sharing image. This is arguably the most important element for grabbing attention. You can create a branded image that includes your logo and tagline. A good resolution is 1200x630 pixels, which works well on most platforms.

By configuring these, you've created a fallback for any page in your app. If a specific page doesn't have its own social sharing information, Bubble will use these defaults.

Preparing for Dynamic Content

The settings we've configured today are static and app-wide. They serve as an excellent default. However, for a multi-tool platform, the real power comes from making this information dynamic.

Imagine sharing a link directly to your "Word Counter" tool. You wouldn't want the generic site description to show up; you'd want a title and description specific to that tool. This is achieved by overriding the app-wide settings at the page level.

This image shows the property editor for a page, where you can set a dynamic title, description, and image. Notice how the values are being pulled from the 'Current Page's listing', making the metadata specific to the content being displayed.

We will cover this in detail in a future lesson, "Set up dynamic SEO meta tags," but it's important to understand the distinction now.

  • App-wide Settings (What we did today): Found in Settings > SEO / metatags. They act as a default or fallback.
  • Page-specific Settings (What we'll do later): Found in the property editor of each page. They override the app-wide defaults and can be populated with dynamic data (e.g., Current Page Tool's Name).

The documentation provides a quick primer on where to find these page-level settings.

SEO: Page | Bubble Docs

This part of the manual highlights the difference between app and page settings and shows you where to find the page-specific ones.

Read the section Metadata settings in Bubble, which reinforces the concept of app vs. page settings. Then, look at the instructions for accessing the settings in the page's element inspector. This is where we will work in a future lesson.

Conclusion

In this lesson, you've taken the first critical steps in preparing your platform for the public. You've established its core visual and textual identity, ensuring it looks professional from the moment a user sees it in their browser tab or as a link shared by a friend.

Here are the key takeaways:

  • App Identity: The app's Favicon is set in Settings > General and provides a visual anchor for your brand in browser tabs.
  • Social Previews: The default Title, Description, and Thumbnail for social media sharing are configured in Settings > SEO / metatags using Open Graph tags.
  • Defaults vs. Specifics: The settings configured today are app-wide defaults. They will be used unless overridden by more specific metadata on an individual page.

You've laid the branding groundwork for your platform. In our next lesson, we will continue the deployment process by tackling another essential step: connecting a custom domain to your Bubble application.