❖ Heads up! This article is intended for site managers. If you're a program facilitator looking for more information about how to review your programs, click here!
There are features on your site that allow you to get creative in telling your organization's story through branding! Colors and logos can attract users to your site and inform them of your organization's mission and purpose. Establishing your site's branding is crucial in promoting more volunteer engagement and setting the tone for your site. For example:
- If your organization oversees outdoor activities, like gardening, landscaping, or land restoration—you might want to consider using greens and browns that give your site an earthy feel.
- If your organization helps foster animals or offers medical services—you might consider using cool tones, like blues.
- Alternatively, you can set your site's banners, colors, logos, etc., to match that of your organization's established branding!
ⓘ So you know: 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. Plus, they offer wonderful tutorials to help get you started on your creative journey!
We do want you to get the most out of your site and the features and tools available, so in this article, we'll cover:
Adding colors to your site
You can select a primary and secondary color for your site in your site's Settings > Main Settings > Site Design area. When selecting colors, you can either work with the ones your organization's branding already uses or select colors to reflect the tone of your mission and objectives! Let's talk about the types of colors and where they apply first:
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 skills.
How to add colors to your site
When you're ready to add or update colors on your site:
1. Navigate to Settings from your site manager panel.
2. Click Main Settings.
3. Under Site Design, select your primary and secondary colors by clicking into the fields to open the color selector:
4. Remember to click Update Settings to save your changes!
✏️ 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: 
How to find your colors
Here are a couple of options available to you for finding the right colors for your site:
- Check with your marketing team to see if they have a list of approved hex codes for your to choose from. There may be restrictions as to what colors you can and can't use, so it's best to see what those might be.
- Do you have some awesome colors but aren't sure of the hex codes? You can download Google's ColorPick Eyedropper extension. With this tool, you can select color values from other sites and it will give you the hex code for them.
This isn't a comprehensive list but hopefully, it can help get you started on picking the right colors for your site. There are several articles online that cover more of the fundamentals—like the psychology of color or color in marketing—which can help you express your brand creatively and efficiently!
✏️ Quick tip: If you don't see any of the changes that you've made to your site right away, 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 sometimes you'll 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 will 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 really 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, you'll want to 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. Navigate to Settings from your site manager panel.
2. Click Main Settings.
3. Under Site Design, you'll see Banners and Icons. 
4. Upload your banners for both desktop and mobile.
5. 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 navigate 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 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. From your site manager panel, select 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. Just like the favicon, 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 from your site manager panel.
2. Under Site Design, you'll see 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 personal logo will appear in the in-app messaging inbox.
✏️ Quick tip: If you don't see it or any of the other changes that you've made to your site right away, you may need to clear your browsing history or cache.