❖ Heads up! This article is only intended for Amplify Site Managers.
By the end of this article, you will be able to:
Upload and manage desktop and mobile banners for your site.
Make a banner clickable and add accessibility text.
Add a favicon to your site and troubleshoot upload issues.
Overview
Add your organization’s branding to your Get Connected site by uploading personalized banners and a favicon. Banners help your site stand out visually, while a favicon gives your site a professional touch in browser tabs and bookmarks.
Banner Requirements
File type: .jpg or .png
Desktop Banner: 1600 x 300px
Mobile Banner: 960 x 360px
How to add a banner
Go to Settings > Main Settings > Site Design > Banners and Icons.
Click Choose File for the banner you want to upload and select your file.
Click Update Site Design Settings to save your changes.
If the banner doesn't appear after uploading, try refreshing your browser or clearing your cache. Refer to the troubleshooting section below for more details.
How to make an interactive banner
You can make a banner interactive by adding a clickable URL to it.
Go to Settings > Main Settings > Site Design > Banners and Icons.
Beside the Make Banner Clickable field, click Yes.
Copy and paste a URL in the field beside Banner Link URL.
Click Update Site Design Settings to save your changes.
Banner Image Accessibility Text
Add text that a screen reader will read out loud when a user hovers over the banner in the Banner Image Accessibility Text field.
Go to Settings > Main Settings > Site Design > Banners and Icons.
Enter easy-to-read text that describes the banner image in the Banner Image Accessibility Text field.
Click Update Site Design Settings to save your changes.
Adding a favicon to your site
A favicon is a small icon displayed in the browser tab and bookmarks bar. It helps users identify your site and makes it easier to find among their favorites. To create a favicon, you can either design a custom icon or resize your existing logo.
Favicon requirements
The favicon can be any size since it will be auto-adjusted to 15 x 15px after you upload it. The file must be a .jpg or .png. Ensure the favicon is clear and recognizable even at small sizes to avoid rendering issues.
How to add a favicon
Go to Settings > Main Settings > Site Design > Banners and Icons.
Look for the Favicon field.
Select Choose File and select the file you wish to upload.
Click Update Site Design Settings to save your changes.
Troubleshooting Banner and Favicon Issues
When managing banners and favicons on your Get Connected site, you may encounter issues during uploading, replacing, or updating. Below is a guide to help resolve common problems:
Common Issues with Banners
Old Banner Still Displays: This can happen due to browser caching. Clearing your cache can force a refresh.
Banner Upload Failure: Ensure images follow specified formatting requirements (.png or .jpg) and are the correct dimensions.
Icons or Banners Don’t Render Properly: Verify scaling and platform requirements if issues persist.
Step-by-Step Troubleshooting Guide
1. Clear Your Browser Cache
Outdated banners may display due to caching issues.
Access your browser’s settings.
Clear cache or browsing data.
Reload the site to check for updates.
2. Verify File Formatting and Image Size
Check that images meet these criteria:
Dimensions: Follow specified sizes.
Format: Use .png or .jpg.
Scaling: Ensure images render properly across devices.
3. Confirm Upload and Save Process
After uploading images:
Double-check admin settings to ensure saving is complete.
Refresh the site and verify updates.
4. Perform a Hard Refresh
If updates seem unsuccessful, try:
Pressing Ctrl+F5 (Windows) or Command+Shift+R (macOS).
Test across multiple browsers if needed. For persistent issues, contact support via the Message Widget and ask to speak to a human agent for further help.