❖ Heads up! This article is intended for Site Managers. Only Site Managers can make changes to a site's branding.
Do you want to get creative with the look and feel of your site? Are you looking to brand your site? You can from the Main Settings! 
Use banners, colors, and logos to attract volunteers to your site and the Agencies registered on your site.
- You or another Site Manager are the only ones who can edit or update a site's branding.
✏️ 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.
- Plus, they offer wonderful tutorials to help start your creative journey!
Here we cover:
How to add 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. You can select your primary and secondary colors:
- The primary color is applied to:
- Most buttons—e.g., Respond to Need, RSVP, and Submit or Update
- Search icons
- Hyperlinks
- Any calls-to-action you want users to take
- The secondary color is applied to:
- Side and top navigation links
- Tabs in the Edit Profile and Manage Agencies sections
- Tooltips—i.e., the helpful tips built into the site to guide you and Agency Managers through forms, etc.
- Icons that represent details within a Need or event posting—this excludes the icons for causes or interests
Ready to add some color to your site?
1. Go to Settings > Main Settings. 
2. Under Site Design, select your Primary Color and Secondary Color with the color selector. 
3. Be sure to click Update Settings to save your changes!
✏️ Quick tips: Here are a couple of options you can use to find the right colors for your site:
- Use the color selector to click and drag to find the right color for you:
- Check with your marketing team to see if they have a list of approved hex codes to choose from.
- There may be restrictions as to what colors you can and can't use.
- Do you have some awesome colors but aren't sure of the hex codes?
- You can download Google's ColorPick Eyedropper extension for Chrome, or find one compatible with your device.
- With this tool, you can select color values from other sites and it gives you the hex code for them.
- You can download Google's ColorPick Eyedropper extension for Chrome, or find one compatible with your device.
✅ Best practice: 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 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.)
- The Banner Image Accessibility Text field is only available if you check Yes to Make Banner Clickable.
- 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
Your site's main banner is one of the first things a volunteer sees when they visit your site:
Banner requirements and tips
Here are a few things to keep in mind for your banners:
- Make them eye-catching
- Make sure they 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
While we've already mentioned our love of Canva, you can use any graphics editor you prefer to make stunning banners!
How to upload a banner
To add or edit a banner:
1. Go to Settings > Main Settings.
3. Under Site Design, scroll until you see Banners and Icons. 
4. Upload your banners for both desktop and mobile.
- Check Yes by Make Banner Clickable to add a URL and accessibility text to your banners.
- This is great if you want to direct volunteers to a specific page on your site when they click the banner.
5. Click Update Settings to save your changes.
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. It also makes it easier for users to locate your site if they've 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 small.
How to upload your favicon
To add your favicon:
1. Go to Settings > Main Settings.
2. Under Site Design, scroll until you see Favicon under Banners and Icons. 
3. Upload your favicon.
5. Be sure to click Update Settings to save your changes.
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.
2. Under Site Design, scroll until you see Site Logo under Favicon.
3. Upload your logo and be sure to click Update Settings! 
✏️ 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.