Get a proper icon in the browser tab
Open your site in a browser tab next to a few others. Is there a crisp little icon — or a blank grey page symbol? That icon (the "favicon") shows up in tabs, bookmarks, browser history, and on a phone's home screen when someone saves your site. It's tiny, but it's one of those finish-line details that separates "someone's project" from "a real business".
What bernard does
Ask, and bernard first looks at what you have now — whether there's an icon at all, whether it's wired up properly, and which images on your site could make a good one. Then it builds the complete set from the source you choose:
- Your logo or another image from your site — bernard resizes and prepares it for every context: the browser tab, the iOS home screen, Android and installable-app icons, all wired into your pages properly.
- A monogram — a clean single-letter tile in your site's colours. If you don't have a logo that survives being 16 pixels tall, this is usually the better-looking choice, and it stays consistent with the rest of your palette.
There's a quality check on the way through: if the image you picked would come out blurry or illegible at icon size, bernard tells you why and suggests an alternative rather than shipping a smudge.
How it works
- Connect bernard to your AI (once). Log in to bernard, open your site, go to Use your own AI, and paste the setup prompt into your AI to connect it — a one-time setup.
- Paste it into your AI — ChatGPT, Claude, Gemini, whichever you already use — then ask in your own words, or use the prompt below.
- Approve. The wiring lands on your draft with a preview link. Check it, press Approve, and it's live — though browsers cache old icons, so the new one can take a little while to appear in your own tab.
If you're refreshing your look more broadly — new palette, new imagery — do the icon in the same sitting so it matches: see Change the colours and Swap the homepage image.
The prompt
“Give my site a proper icon for the browser tab and phone home screens — use [my logo / the letter of my business name] in my site's colours, and make sure it works everywhere.”
The [bracketed] parts are yours to fill in. First time? Connect bernard to your AI over MCP — a one-time setup in bernard → your site → Use your own AI — then paste the prompt above.
Questions people ask
- What is a favicon and do I really need one?
- It's the little icon in the browser tab, next to bookmarks, and on a phone's home screen if someone saves your site there. Without one you get a blank page symbol — which quietly says 'unfinished'. With one, your site looks like it belongs among the professional tabs it's sitting next to.
- What if my logo doesn't shrink well to a tiny icon?
- Bernard checks that first — if the image would turn to mush at tab size, it says so and offers alternatives: a different image, or a clean one-letter monogram in your site's colours, which reads beautifully small. Detailed logos with fine text almost always do better as a monogram.
- Will I see it before it goes live?
- Yes — the change lands on your draft with a preview for you to approve, like any other edit. One thing to know: browsers hang on to old tab icons for a while, so give it a day and a hard refresh before deciding it hasn't worked.