Logo and Favicon (Lofty AOS)

Introduction

Two branding elements appear across your entire website:

• Logo — Your company or personal brand image, displayed in the header on every page and optionally in the footer.
• Favicon — The small icon that appears in browser tabs, bookmarks, and search results next to your site name.

Both are set once and apply everywhere on your site automatically.

Part 1: Uploading Your Logo

Your logo is uploaded inside the Header editor, which is accessed only from the Home Page.

Steps

1. Open the Website CMS (from Lofty top nav: Content > Websites, then click your site).
2. Navigate to the Home Page in the Pages panel.
3. Click the header at the top of the page to select it, then click the Edit icon.
4. Click the Content tab at the top of the header settings panel.
5. Upload your Logo 1 (primary logo). If you need a second logo (for co-branding), upload it in the Logo 2 field.
6. Set the Alt Text for accessibility.
7. Optionally, set the Logo Link if you want clicks on the logo to go somewhere other than the Home Page. Use relative paths for internal pages (e.g., /about) or full URLs with https:// for external links.
8. Adjust Logo Size to control how large the logo appears in the header.
9. Click Publish to apply changes to your live site.

To add your logo to the footer: Scroll down past the header settings and find the footer's logo upload section. See [Customizing Your Website Footer] for full footer logo configuration.

Logo File Requirements

Part 2: Setting Your Favicon

The favicon is the small icon displayed in browser tabs, bookmarks, and search results. By default, Lofty displays its own logo — uploading yours replaces it with your brand.

Steps

1. Open the Website CMS (from Lofty top nav: Content > Websites, then click your site).
2. In the CMS, go to Settings > Basic Info.
3. Find the Favicon field and click Upload an image.
4. Upload your favicon image.
5. Click Save (or Publish — ).

Favicon File Requirements

Tips

• Use a transparent PNG for your logo. A transparent background ensures your logo blends cleanly with any header background color you choose.
• Test your logo on mobile. The header logo scales responsively — check it on a phone after uploading to make sure it's readable.
• Keep your favicon simple. At 16–32px display size, a small, clean icon is more recognizable than a detailed full logo.
• Update both when rebranding. If you change your company logo, update both the site logo and the favicon to keep everything consistent.

Troubleshooting

My logo looks blurry. Upload a higher-resolution PNG at the correct ratio. If your logo is 96px tall, the source file should be at least 200–300px wide for clarity.

My logo is being cropped. The aspect ratio of your logo may not match what the header style expects. Try a logo with a 3:2 width-to-height ratio, or adjust the Logo Size setting.

My favicon isn't updating in the browser tab. Browsers often cache favicons aggressively. After publishing, try a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear your browser cache.

Frequently Asked Questions

Can I use a different logo on different pages? No — the logo in the header is site-wide. All pages display the same header logo.

Can I use a square logo? Yes, but the system may compress or crop it depending on the header style and aspect ratio. A 3:2 (width:height) ratio works most reliably across all styles.

Why isn't my favicon showing on Google search results? Google may take time to discover and display your new favicon in search results. Make sure your favicon is uploaded and your site is published. Google's crawlers will pick it up during their next index of your site.

Questions?

If you have any questions regarding this topic or any others, please reach out to our Support Team via email at support@lofty.com, by phone at 1 (855) 981-7557, or by chat with us through your Lofty CRM.