> ## Documentation Index > Fetch the complete documentation index at: https://help.agentsy.pro/llms.txt > Use this file to discover all available pages before exploring further. # Logo, Images and Brand Colors > Prepare your logo, favicon, and website images, and apply the color palette suggested by the Agentsy AI Experience Builder. Your Agentsy AI Experience should look and feel like an extension of your brand. You can personalize its logo, favicon, images, and website colors without having to design a website from scratch. The **Agentsy AI Experience Builder** can help you get started: share your logo and any existing brand guidelines with the Builder, and it will suggest an initial color palette for you to copy into Agentsy's color settings. ## 1. Prepare your visual assets Agentsy accepts specific file formats and sizes for each type of image. | Asset | Accepted formats | Maximum file size | Recommended dimensions | | - | - | - | - | | **Logo** | `.png`, `.jpg`, `.jpeg` | **1 MB** | **200 × 5 px** (horizontal) | | **Favicon** | `.png`, `.ico` | **1 MB** | **32 × 32 px** or **16 × 16 px** | | **Website images** | `.png`, `.jpg`, `.jpeg` | **2 MB per image** | **640 × 426 px** | > [!TIP] > > For logos and website illustrations, a **PNG with a transparent background** often looks best. It lets the image blend naturally into the page instead of appearing inside a white or colored rectangle. JPEG files do not support transparency. ### Logo Use your official business or personal logo. A horizontal layout is recommended so it fits comfortably in the website header. Choose a version that remains readable on mobile and contrasts with the navbar background. > [!NOTE] > > The recommended logo dimensions provided for this guide are **200 × 5 px**. This is an unusually short height for a logo; confirm the intended height in the Agentsy upload interface before resizing your original artwork. ### Favicon A favicon is the small icon displayed in browser tabs and bookmarks. Use a simplified symbol or mark rather than a detailed horizontal logo. Upload a `.png` or `.ico` file at **32 × 32** or **16 × 16 pixels**, up to **1 MB**. ### Website images Website images can help explain your expertise and make the experience more engaging. Use `.png`, `.jpg`, or `.jpeg` files, up to **2 MB each**, ideally at **640 × 426 pixels**. Transparent-background PNGs work particularly well for people, products, and illustrations placed alongside text. Check that subjects are not cropped and that images remain clear on mobile. ## 2. Generate a starting color palette with the Builder You do not have to choose every website color on your own. 1. Open the [Agentsy AI Experience Builder](https://www.agentsy.pro/build-your-ai) in your preferred conversational AI. 2. Share your **logo** and, if available, your **brand guidelines** with the Builder. 3. Ask it to recommend a website color palette that fits your brand and remains easy to read. 4. Use its suggested HEX color values as your **first draft** for Agentsy's color styling. 5. Preview your website and adjust colors if necessary. The Builder's recommendations are a starting point, not a requirement. If your company has official brand colors, prioritize those while maintaining readable contrast. ## 3. Understand the available color settings Agentsy provides the following website color controls: | Setting | What it affects | | - | - | | **Primary Background Color** | Main page background | | **Secondary Background Color** | Alternate background areas or sections | | **Button Background Color** | Background of buttons | | **Button Text Color** | Text displayed on buttons | | **Cards Background Color** | Background of card-style content | | **Primary Text Color** | Main headings and body text | | **Secondary Text Color** | Supporting or less prominent text | | **Link Hover** | Link appearance when a visitor hovers over it | | **Navbar Color** | Navigation/header background | The appearance of each color can vary with the selected template. The easiest way to evaluate your palette is to apply it and preview the result. ### Keep your colors readable * Make sure **Button Text Color** contrasts with **Button Background Color**. * Check **Primary Text Color** and **Secondary Text Color** against both background colors and card backgrounds. * Ensure your logo remains visible against **Navbar Color**. * Use **Link Hover** to make interactive text distinguishable without sacrificing readability. * Preview the page on mobile as well as desktop. As a useful accessibility target, aim for at least **4.5:1 contrast** for normal text and **3:1** for large text. ## 4. Apply your branding in Agentsy 1. Open your AI Experience's website customization settings in Agentsy. 2. Select **Classic**, **Modern**, **Impact**, or **Minimalist**. 3. Upload your **logo** and **favicon** in the accepted formats. 4. Upload the number of website images requested by your selected template, if any. 5. Copy the suggested HEX values from the Builder into the corresponding **color styling** fields. 6. Save your changes and preview the website. 7. Adjust any images or colors that do not look right on desktop or mobile. > [!NOTE] > > The **AI Experience Builder** helps you prepare branding recommendations. You still apply the suggested colors and upload the files in Agentsy yourself. ## 5. Troubleshoot common branding issues | Issue | What to check | | - | - | | Image upload is rejected | Confirm the accepted extension and maximum file size for that asset. | | Logo looks stretched or too small | Use a clean horizontal source image and preserve its proportions. | | White rectangle appears behind an image | Use a transparent PNG rather than a JPEG or an opaque PNG. | | Logo is hard to see | Check contrast between the logo and **Navbar Color**. | | Buttons are difficult to read | Adjust **Button Background Color** and **Button Text Color**. | | A template asks for fewer images than expected | This is normal; image requirements differ by template. | | No image upload is needed | **Minimalist** does not require website images. | | Colors look different from the Builder's suggestion | Confirm the HEX values were pasted into the matching color fields, then preview the selected template. | ## Before you publish * [ ] Logo is in `.png`, `.jpg`, or `.jpeg` format and is **1 MB or less**. * [ ] Favicon is `.png` or `.ico`, **1 MB or less**, and ideally **32 × 32** or **16 × 16 px**. * [ ] Each website image is `.png`, `.jpg`, or `.jpeg` and is **2 MB or less**. * [ ] Website images are approximately **640 × 426 px**, where appropriate. * [ ] The selected template has all its required images, if any. * [ ] The nine color settings have been reviewed for brand consistency and readability. * [ ] Logo, buttons, text, and images look good on mobile and desktop. ## Related guides * [Customize Your AI Website](/branding-and-website/customize-your-ai-website) * [Images and Visual Assets](/branding-and-website/images-and-visual-assets) * [Landing Page Content](/branding-and-website/landing-page-content) * [Mobile Experience](/branding-and-website/mobile-experience) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.