❖ Heads up! This article is intended for Site Managers. If you're an Advanced Program Manager looking for information about managing your Programs, click here. If you're a Program Facilitator looking for information about reviewing your Programs, click here.
Does your organization have its own established branding? If so, you can personalize your site to match your branding. This is crucial in promoting more volunteer engagement and setting the tone for your site. Even if you don't have an established brand already, you can quickly personalize your site with the available features from your site settings!
✏️ Quick tip: While we don't do the branding and design on your site, we highly recommend—and love—using Canva. With Canva, you can design banners, favicons, infographics, logos, and more with their templates or build your own.
We do want you to get the most out of your site and the features and tools available, so in this article, we cover:
Adding colors to your site
You can select a primary and secondary color for your site from the Settings > Main Settings > Site Design area. Use the colors your organization's branding already has or select colors to reflect the tone of your mission and objectives.
Primary color
The primary color is applied to the following items on your site:
- Most buttons, like the Respond to Opportunity, RSVP and Submit or Update buttons
- Search icon
- Hyperlinks
- Any calls-to-action you want users to take
Secondary color
The secondary color is applied to the following items on your site:
- Side navigation links
- Top navigation items
- Tabs in the Edit Profile and Manage Program sections
- Tooltips
- Icons that represent details within an opportunity or event posting—this doesn't include the icons for causes or skills
How to add colors
When you're ready to add or update colors on your site:
1. Go to Settings > Main Settings.
2. Under Site Design, select your primary and secondary colors by clicking into the fields to open the color selector:
✏️ Quick tip: You can click and drag to find the color you want or if you know the hex code for your organization's branding, you can type those codes into the color selector: 
4. Remember to click Update Settings to save your changes!
How to find your colors
Check with your marketing team to see if they have a list of approved hex codes. There may be restrictions to what colors you can and can't use, so it's best to see what those might be. You can also use our color picker tool or online tool that helps you pick hex codes.
✏️ Quick tip: If you don't see your edits immediately, you may need to clear your browsing history or cache.
Other things to consider
Something else to consider as you're designing your site is if your colors and design are compliant with the Americans with Disabilities Act (ADA), Voluntary Product Accessibility Template (VPAT®), and the Web Content Accessibility Guidelines (WCAG) 2.0. Some color contrasts aren't suitable for all viewers and you may want to include alternative text for images, etc. Be sure to consider carefully:
- Color contrasts
- Alt text (e.g., including banner image accessibility text, etc.)
- Font colors, sizes, and styles in the text editor for descriptions, etc.
These guidelines and considerations can help you craft a site that invites and includes all users!
ⓘ So you know: Editing fonts doesn't apply everywhere on the site.
Creating banners for your site
One of the first things your volunteers see when they navigate to your site is your site's main banner:
This is a fun way to showcase your organization's brand, mission, or story! You can include pictures, text, etc. The banner can be simple or complex in design—it's up to you and what you envision for your site.
Banner requirements
Since your banners are some of the first noticeable elements on your site, make sure they:
- Are eye-catching
- Meet the necessary dimensions
- The desktop banner should be 1600 x 300px
- The mobile banner should be 960 x 360px
- Banners must be saved as a .jpg or .png
- Are fully branded for your organization
We've mentioned our love of Canva, but that's not the only design tool you can use to create eye-catching banners. You can also use any graphics tools, like:
- Adobe Photoshop
- Adobe Illustrator
- Snagit
- Paint
How to upload a banner
To add or edit a banner:
1. Go to Settings > Main Settings > Site Design > Banners and Icons. 
2. Click Choose File and select your file.
3. Upload your banners for both desktop and mobile.
4. Click Update Settings to save your changes.
Want to make your banner interactive?
You also have the option to make your banner clickable. This is a great feature if you want visitors to your site to go to your main Opportunities page, a Custom Page you've created that features an About Us section or other important information, or your organization's main website.
To make your banner clickable:
1. Select Yes beside Make Banner Clickable.
2. Copy and paste the URL you want the banner to take a user to when they interact with it in the field beside the Banner Link URL.
3. Click Update Settings to save your changes.
Now that your banners are all set, continue branding and customizing your site with your own favicon and logos!
What is a favicon?
A favicon is an icon that shows in the browser tab when a user visits your site. It's also shown in the "Favorites" toolbar if your site is bookmarked. You can create a favicon or resize your current logo to use as one. Favicons are another great way you can personalize your site and make it more memorable for users who visit your site. It also makes it easier for them to locate your site when they have added it to their favorites.
Favicon requirements
The favicon can be any size but will auto-adjust to 15 x 15px once you upload it.
- Because the image is auto-adjusted to such a small size, it's best to use images that look good really small.
How to upload your favicon
To add your favicon:
1. Go to Settings > Main Settings.
2. Under Site Design, scroll down to the Favicon field under Banners and Icons.
3. Select Choose File to browse for your favicon. 
4. Click Open or double-click the file you want to upload.
5. Remember to click Update Settings to save your changes.
Now your favicon will appear on your settings page and in your browser tab!
Your site logo
Your site logo is larger than your favicon and appears in the in-app messaging inbox. This doesn't change the logo of the alert inbox from the site manager panel—only the in-app messaging inbox. The logo adds a touch of your organization's branding to your site. These are elements that create memorable impressions for your site's visitors. 
How to add a logo
To add or update a logo:
1. Go to Settings > Main Settings.
2. Under Site Design, scroll to Site Logo.
3. Click Choose File to upload your logo from your desktop. 
4. Once you find the file you want to upload, either double-click it or click it and select Open.
5. Remember to select Update Settings to save your changes!
- Now, your logo appears in the in-app messaging inbox.
✏️ Quick tip: If you don't see it the changes you made to your site right away, you may need to clear your browsing history or cache.