--- title: Adding a logo to your website description: Add a logo to your B12 website. Generate one with the AI Agent, upload your own file, and use it as your favicon. --- [Skip to content](https://support.b12.io/en/v3/adding-a-logo-to-your-website#main-content) ![b12 logo](https://support.b12.io/hubfs/b12%20logo.svg) - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) Open main navigation Close main navigation - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) - [Start for free](https://b12.io/signup/) [Start for free](https://b12.io/signup/) How can we help? - There are no suggestions because the search field is empty. 1. [B12 Help Center](https://support.b12.io/en?hsLang=en) 2. [Working with B12's AI Agent](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en) # Adding a logo to your website ## Start your site with a logo, swap in a new one, and adjust how it looks in your header. | ![ronnel](https://support.b12.io/hs-fs/hubfs/Ronnel%20DG.png?width=60&height=60&name=Ronnel%20DG.png) Written by: Ronnel DG Last updated: 01 Oct., 2026 | | --- | Your logo sits in your website's header and is often the first thing a visitor notices. You can add one when you first describe your website, swap in your own file later, or ask the AI Agent for a new one whenever you like. **Note:** Logo changes show up on your staging site straight away, but visitors won't see them until you click `Publish`. ### Starting your site with a logo The easiest time to add a logo is when you first describe your website. If you already have one, click the paperclip icon in the prompt box to attach your logo file, and say in your description that it's your logo: ``` Build a website for [your business name], a [what your business does]. Use the attached image as my logo. ``` If you don't have a logo yet, ask for one in the same description and the AI Agent creates it along with your site: ``` Build a website for [your business name], a [what your business does]. Create a simple logo for it using [your colors], with a [modern, playful, classic] feel. Make sure the background is transparent. ``` **Tip:** Name your colors and the mood you're after. "Warm earthy greens, simple enough to read at small sizes" gives the AI Agent far more to work with than "make it look good." ### Replacing your logo You can replace your logo at any time. Swap in an image yourself in Visual edit, or ask the AI Agent to create a new one. #### Replacing your logo in Visual edit 1. In the chat input, select `Visual edit`. 2. Click your logo in the website preview. 3. In the left sidebar, under Content, click `Replace`. 4. Pick where the replacement comes from: `Library` for media already on your site, `Search` for stock photography, or `AI Agent` to have one generated for you. ![](https://support.b12.io/hs-fs/hubfs/image-png-Sep-22-2026-09-59-38-4434-PM.png?width=274&height=175&name=image-png-Sep-22-2026-09-59-38-4434-PM.png) 5. Choose your image, then click `Continue`. Replacing an image saves immediately. There's no unsaved-changes bar to confirm afterwards. **Note:** If the sidebar shows "Content not editable" instead of Replace, your logo is built into your site's code. Ask the AI Agent to change it instead. #### Uploading your own logo To use a file from your computer: 1. On the `Library` tab, click `Upload media`. 2. Choose your file. 3. Click `Continue`. A PNG with a transparent background works best, because it sits cleanly on any header color instead of showing a white box behind it. For the rest of what you can do to an image once it's in place, including background removal, cropping, and filters, see [Adjusting images with Visual edit](https://support.b12.io/en/v3/editing-images?hsLang=en). ### Generating a new logo with the AI Agent You can ask the AI Agent for a logo in two places: the chat, or the `AI Agent` tab inside the `Replace` picker. Either way, describe your business and the feeling you want, not the shapes you imagine. ``` Generate a logo for [your business name], a [what your business does]. Use [your colors] and keep it [simple, modern, playful]. Make sure the background is transparent. Use it in my site header. ``` The AI Agent creates the logo, puts it in your header, and saves it to your media library so you can use it elsewhere on your site. **Tip:** The AI Agent doesn't make the background transparent unless you ask. Not every logo needs a transparent background, but it usually looks cleaner than a white box around your logo on a colored header. If you don't like what comes back, ask for another version in the same conversation. Telling the Agent what to keep helps: "same colors, but drop the text and keep just the icon." **Caution:** A generated logo replaces the one in your header straight away. To go back, find the AI edits card for that change in your chat and select `Restore`. ### Customizing your logo Once your logo is in place, you can change its size, its position, and how much empty space sits around it. Cropping you do yourself in Visual edit. Size and placement go through the AI Agent. For other image edits, such as background removal and filters, see [Adjusting images with Visual edit](https://support.b12.io/en/v3/editing-images?hsLang=en). ### Changing your logo's size and placement The sidebar has no width or height field for your logo, so size and placement go through the AI Agent. With your logo selected in Visual edit, use the "Ask AI Agent for quick change…" box that appears on it in the preview, or type the same request in the chat. ``` Make the logo in my site header about 30% larger and add a little more space to the right of it. ``` ### Cropping your logo Trimming empty space around your logo makes it look larger without changing the header itself. 1. With your logo selected in Visual edit, click `Edit`. 2. Click `Crop image`. 3. Drag the frame to trim the empty space, then click `Crop`. 4. Click `Save`. ![](https://support.b12.io/hs-fs/hubfs/image-png-Sep-22-2026-10-01-26-2613-PM.png?width=670&height=250&name=image-png-Sep-22-2026-10-01-26-2613-PM.png) ### Frequently asked questions →Does my generated logo have a transparent background? ⇒Only if you ask for one. Add "make sure the background is transparent" to your request. You don't always need one, but it stops extra white space from showing around your logo. →Why can't I replace my logo in Visual edit? ⇒Your logo is drawn in your site's code rather than stored as an image file, so the sidebar shows "Content not editable" instead of the image controls. Ask the AI Agent to change it and it will handle the code for you. →Does generating a logo use AI credits? ⇒Yes. Asking the Agent to create a logo is an image-generation request, so it draws on your [AI credits](https://support.b12.io/en/v3/ai-message-credits?hsLang=en). →Is my logo the same as my favicon? ⇒No. Your favicon is the small icon in browser tabs, and it's set separately from your logo. See [favicon article](https://support.b12.io/en/v3/updating-your-websites-metadata?hsLang=en). →Can I go back to my previous logo? ⇒Yes. Select Restore on the AI edits card for that change in your chat. Your earlier logo also stays in your media library, so you can pick it again through Replace. ### Next steps - [Generating images with the AI Agent](https://support.b12.io/en/v3/generating-images-with-the-ai-agent?hsLang=en) - [Adjusting images with Visual edit](https://support.b12.io/en/v3/editing-images?hsLang=en) - [Previewing and publishing your B12 website](https://support.b12.io/en/v3/previewing-and-publishing-your-b12-website?hsLang=en) - [Getting started](https://support.b12.io/en/getting-started?hsLang=en#main-content) - [Introduction](https://support.b12.io/en/getting-started?hsLang=en#introduction) - [Detailed guides](https://support.b12.io/en/getting-started?hsLang=en#detailed-guides) - [Working with B12's AI Agent](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#main-content) - [Agent Skills](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#agent-skills) - [Built-in features](https://support.b12.io/en/built-in-features?hsLang=en#main-content) - [Visual edit](https://support.b12.io/en/built-in-features?hsLang=en#visual-edit) - [Code editor](https://support.b12.io/en/built-in-features?hsLang=en#code-editor) - [Data & users (Backends)](https://support.b12.io/en/built-in-features?hsLang=en#data-users-backends) - [Forms & submissions](https://support.b12.io/en/built-in-features?hsLang=en#forms-submissions) - [Commerce](https://support.b12.io/en/built-in-features?hsLang=en#commerce) - [Contact manager](https://support.b12.io/en/built-in-features?hsLang=en#contact-manager) - [eSignatures](https://support.b12.io/en/built-in-features?hsLang=en#esignatures) - [Email Marketing](https://support.b12.io/en/built-in-features?hsLang=en#email-marketing) - [Team](https://support.b12.io/en/built-in-features?hsLang=en#team) - [Analytics](https://support.b12.io/en/built-in-features?hsLang=en#analytics) - [Website settings](https://support.b12.io/en/built-in-features?hsLang=en#website-settings) - [Adding functionality](https://support.b12.io/en/adding-functionality?hsLang=en#main-content) - [Third-party integrations](https://support.b12.io/en/adding-functionality?hsLang=en#third-party-integrations) - [Publishing & growing](https://support.b12.io/en/publishing-growing?hsLang=en#main-content) - [Domains](https://support.b12.io/en/publishing-growing?hsLang=en#domains) - [Connecting your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#connecting-your-domain) - [Managing Your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#managing-your-domain) - [Email Forwarding & Sending](https://support.b12.io/en/publishing-growing?hsLang=en#email-forwarding-sending) - [Growth & Marketing](https://support.b12.io/en/publishing-growing?hsLang=en#growth-marketing) - [Troubleshooting](https://support.b12.io/en/troubleshooting?hsLang=en#main-content) - [FAQs](https://support.b12.io/en/troubleshooting?hsLang=en#faqs) - [Account & billing](https://support.b12.io/en/account-billing?hsLang=en#main-content) - [Account Login & Password](https://support.b12.io/en/account-billing?hsLang=en#account-login-password) - [Subscription & Payment Information](https://support.b12.io/en/account-billing?hsLang=en#subscription-payment-information) - [Your Account](https://support.b12.io/en/account-billing?hsLang=en#your-account) - [Managing Multiple Websites](https://support.b12.io/en/account-billing?hsLang=en#managing-multiple-websites) - [Multi-user](https://support.b12.io/en/account-billing?hsLang=en#multi-user) - [Getting support](https://support.b12.io/en/getting-support?hsLang=en#main-content) - [Professional & Advanced Plan Support (B12 2.0)](https://support.b12.io/en/getting-support?hsLang=en#professional-advanced-plan-support-b12-2-0) - [B12 2.0](https://support.b12.io/en/b12-2-0?hsLang=en#main-content) - [Website Structure and Content](https://support.b12.io/en/b12-2-0?hsLang=en#website-structure-and-content) - [Website Style & Design](https://support.b12.io/en/b12-2-0?hsLang=en#website-style-design) - [Sitewide Settings](https://support.b12.io/en/b12-2-0?hsLang=en#sitewide-settings) - [Using the B12 Editor](https://support.b12.io/en/b12-2-0?hsLang=en#using-the-b12-editor) - [Analytics & SEO](https://support.b12.io/en/b12-2-0?hsLang=en#analytics-seo) - [Integrations - General](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-general) - [Integrations - Communication](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-communication) - [Integrations - Language](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-language) - [Integrations - Ecommerce](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-ecommerce) - [Professional & Advanced Plan Features](https://support.b12.io/en/b12-2-0?hsLang=en#professional-advanced-plan-features) - [Troubleshooting & Resources](https://support.b12.io/en/b12-2-0?hsLang=en#troubleshooting-resources) - [Contact Forms](https://support.b12.io/en/b12-2-0?hsLang=en#contact-forms) - [Online Scheduling](https://support.b12.io/en/b12-2-0?hsLang=en#online-scheduling) - [Advanced Editing (Experts Only)](https://support.b12.io/en/b12-2-0?hsLang=en#advanced-editing-experts-only) [![B12\_logo\_2025](https://support.b12.io/hs-fs/hubfs/B12_logo_2025.png?width=53&height=24&name=B12_logo_2025.png "B12_logo_2025")](https://www.b12.io) © 2025 B12. All rights reserved. ×