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.”
Press Copy, then paste it into your AI and fill in the [bracketed] parts. First time? Connect your AI to bernard first - a one-time setup in bernard → your site → Use your own AI.
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 is the icon in the browser tab called?
- It's called a favicon - short for favourite icon, a name left over from when browsers first showed them next to bookmarks. It's the same little image that appears in the tab, in bookmark lists, in search results on some phones, and on a home screen if someone saves your site there. One small file, seen everywhere.
- 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.