Skip to main content

Main Site Settings: Banners & Icons

How Amplify Site Managers can add branding through banners and icons on their site

Brittany Crow avatar
Written by Brittany Crow
Updated over a month ago

❖ Heads up! This article is only intended for Amplify Site Managers.

Add your organization's branding to your Get Connected site by uploading personalized banners and a favicon!

Banner requirements

Banners must be saved as a .jpg or .png and meet the necessary dimensions:

  • Desktop Banner: 1600 x 300px

  • Mobile Banner: 960 x 360px

How to add a banner

  1. Go to Settings > Main Settings > Site Design > Banners and Icons.

  2. Click Choose File for the banner you want to upload and select your file.

  3. Click Update Site Design Settings to save your changes.

  4. 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.

  1. Go to Settings > Main Settings > Site Design > Banners and Icons.

  2. Beside the Make Banner Clickable field, click Yes.

  3. Copy and paste a URL in the field beside Banner Link URL.

  4. 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.

  1. Go to Settings > Main Settings > Site Design > Banners and Icons.

  2. Enter easy-to-read text that describes the banner image in the Banner Image Accessibility Text field.

  3. 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

  1. Go to Settings > Main Settings > Site Design > Banners and Icons.

  2. Look for the Favicon field.

  3. Select Choose File and select the file you wish to upload.

  4. 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.

  1. Access your browser’s settings.

  2. Clear cache or browsing data.

  3. 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:

  1. Double-check admin settings to ensure saving is complete.

  2. Refresh the site and verify updates.

4. Perform a Hard Refresh

If updates seem unsuccessful, try:

  1. Pressing Ctrl+F5 (Windows) or Command+Shift+R (macOS).

  2. Test across multiple browsers if necessary. For persistent issues, contact support through the Messages Widget for further assistance.

Did this answer your question?