Favicon Settings In Landing Page

A favicon ("favorite icon") is the tiny little picture that shows up on your browser tab — right next to the page title — and in people's bookmarks. Think of it like the small logo sticker you put on a folder so you can spot it instantly in a big pile.

It's small, but it does a big job: it makes your page look professional, helps people find your tab when they have ten open, and builds trust in your brand. This guide shows you how to add your own favicon to a landing page — and how to fix the #1 problem people hit (the favicon "not changing").

? Prefer to watch? There's a short walkthrough video at the top of the live article. The steps below cover everything in it, plus a few things it doesn't.

Before you start: get your image ready

A good favicon is square and simple. It's shown at a tiny size, so fine detail and small text just turn into a blur.

• Size: use a 50 × 50 pixel image.
• Shape: make it square (same width and height). A non-square image gets squished.
• Design: keep it bold and simple — a single logo mark or letter works far better than your full logo with text.
• Format: a PNG (ideally with a transparent background) or JPG works well.

? Why square matters: the browser squeezes your image into a tiny square slot. If your image is a wide rectangle, it'll look stretched or pinched. Start square and you'll never fight this.

Step-by-Step Guide

Step 1 — Open Your Editor Space

Open the landing page you want to add the favicon to, and click into the page editor (the drag-and-drop building screen).

? New to the editor? Start with the Landing Page Editor Overview.

Step 2 — Open the Gear (Page) Settings

Find the gear ⚙️ icon on the lower-left side of your editor space and click it to open the settings menu.

? Heads up — there are two kinds of gear icons. The gear on the lower-left opens the whole-page settings (favicon, SEO, tracking codes, etc.). The gear that appears on an element when you click it only changes that element. For the favicon, you want the lower-left one.

Step 3 — Select “Favicon” and Upload Your Image

1. In the settings menu, find and click the option labeled “Favicon.”
2. Click the Favicon image box to upload your custom favicon (the square image you prepared earlier).
   
   Why this matters: This is the setting that tells the browser, "here's the little tab icon for this page." Without it, visitors see the generic default icon.

Step 4 — Click PUBLISH

Click the “PUBLISH” button to push the change live.

⚠️ This is the make-or-break step. Your favicon will not appear until you publish. And it shows up on the live, published page — not inside the editor or the editor preview. After publishing, always check the real page URL in a browser tab.

✅ Open your live page in a browser, look at the tab, and you should see your favicon.

? Note on size, again: use 50 × 50 pixels, and keep the design simple and recognizable for the clearest result.

Common Situations & Quick Fixes

Try these first — most favicon issues are not bugs, they're caching or setup, and you can fix them yourself in a minute.

“I published, but the tab still shows the old icon (or no icon).”

This is the #1 favicon issue, and it's almost always your browser remembering the old one (caching). Browsers hold onto favicons stubbornly. Fix it:

1. Do a hard refresh on the live page (Ctrl + F5 on Windows, Cmd + Shift + R on Mac).
2. Still stuck? Open the page in an Incognito / Private window — this ignores the cache.
3. Give it a few minutes and check again on a different device.

If it shows correctly in Incognito, it is working — your normal browser just cached the old one.

“The favicon looks blurry, squished, or pixelated.”

Your image probably isn't square, or it has too much fine detail for such a tiny size. Re-upload a square 50 × 50 image with a bold, simple design (one mark or letter, not your full logo with text).

“It shows on this page but not on my other pages.”

The favicon you set in the page editor applies to that landing page. If you want the same favicon across your whole project, set it at the project level instead. See How to add the Favicon in Project?

“I see it in the editor but not on the live site.”

Two usual causes: you didn't click PUBLISH, or you're checking the editor preview instead of the live page URL. Publish, then open the real URL.

“I can't find the Favicon option.”

You're likely in an element's settings. Click the gear ⚙️ on the lower-left of the editor for page settings, where the Favicon option lives.

“My image won't upload.”

Check the file format (use PNG or JPG) and keep the file small. A 50 × 50 PNG is tiny and should upload instantly.

Quick Recap

1. Prepare a square, simple, 50 × 50 image.
2. Open the editor.
3. Click the lower-left gear ⚙️ → Favicon.
4. Upload your image.
5. Click PUBLISH.
6. Check the live page — and hard-refresh if you still see the old icon.

Still need help?

If you've published, hard-refreshed, and checked in Incognito and your favicon still won't appear, we're glad to help. Please submit a ticket and include:

• The live page URL where the favicon should appear
• The favicon image you're trying to use (attach it)
• What you see vs. what you expected
• Whether it appears correctly in an Incognito window

Those details let us pinpoint whether it's a caching, image, or setup issue on the first reply.