Designing your mobile & favicon logo

Your mobile and favicon logo is the small square icon that represents your community in browser tabs, on phones, and on the loading screen. Because it's shown so small, a logo that looks great in your header can turn into a tiny, hard-to-read shape here. This article covers where your icon appears, how to design one that fills its space and reads clearly, and how to upload it.

Where your icon appears

You upload one image, and 360Alumni automatically creates each size it needs:

Browser tabs and bookmarks: shown as small as 16 × 16 pixels.
Mobile header: shown at about 40 × 40 pixels in place of your header logo on phones.
Loading screen: shown while your community loads.
Phone home screens: used when someone adds your community to their home screen.

If you haven't uploaded a mobile and favicon logo, browser tabs show your header logo instead. Header logos are usually wide, so they tend to look very small there. A square icon makes a big difference.

Do I need to upload a large image?

No. 360Alumni resizes your image for every place it appears, including the loading screen, so you don't need to create separate sizes. The largest version it uses is 180 × 180 pixels, so a bigger file won't look any sharper.

We recommend a square PNG that's 512 × 512 pixels. Anything 180 × 180 pixels or larger works, as long as the file is under 5MB.

How 360Alumni prepares your image

Before resizing, 360Alumni automatically trims empty space and any solid background color from the edges of your image. Then it fits what's left into a square.

That's why the shape of your icon matters more than the size of your file. A square or circular mark fills the whole space. A wide logo gets fit to the width of the square, so it ends up short, with empty space above and below. In a browser tab, that can leave your logo only a few pixels tall.

The same three uploads after 360Alumni trims and resizes them. Only the circle keeps its full size.

Tips for a clear, full-size icon

Use a simple version of your logo

Instead of your full logo, pick one simple element: your initials or a monogram, a symbol from your logo, or your seal or crest if it still reads when it's small. One to three letters works best. Leave out taglines, the word "Alumni," and any small text, since they won't be readable at this size.

Keep it square and fill the space

Design on a square canvas and let your mark run nearly edge to edge. You don't need to add padding, since extra space gets trimmed anyway. Just make sure nothing is cut off at the edges. The closer your mark is to a square or circle, the bigger it shows up.

Use a circle or rounded square for background color

A bold background color with white letters or a white symbol stands out in a row of tabs. To keep that color, make the background a circle or a square with rounded corners, and leave the corners transparent. If the color fills the image all the way to its edges, it's treated as background and trimmed away, leaving a tight crop around your letters.

Go bold, with strong contrast

Use thick shapes, bold letters, and strong contrast between your mark and its background. Thin lines, fine details, and subtle gradients disappear at small sizes. Your brand colors are a great choice, and one or two is plenty.

Check it on light and dark backgrounds

Browser tabs can be light or dark depending on each person's settings. If your icon has a transparent background, make sure your mark is visible on both. A colored circle or rounded square works on either.

Preview it at actual size

Before you upload, shrink your icon down to 32 × 32 and 16 × 16 pixels. If you can still recognize it, you're good to go.

The same icons in browser tabs, at actual size on a computer screen.

File checklist

PNG format
Square, ideally 512 × 512 pixels (at least 180 × 180)
Under 5MB
Transparent background, or a colored circle or rounded square with transparent corners
A simple, bold mark that fills the square

Upload your icon

Go to Customize > Theme.
In the Mobile and Favicon Logo section, open the logo panel.
Upload your PNG file, or click Replace to swap out your current one.
In Image Alt Text, enter a short description, such as your community's name. If it shows your file name, replace it.
Open your community in a new browser tab to check your new icon.

Browsers hold on to old icons for a while. If you still see your previous icon, try a private or incognito window, or check back later.

Do I need a favicon maker?

No. Favicon makers usually create a set of files in different sizes and formats, like .ico files, for websites you build yourself. 360Alumni does all of that for you from a single PNG.

A design tool can still help you create the icon itself:

Check with your marketing or communications team. Many organizations already have a square version of their logo, like the one used for social media profile pictures. If it's a full square of color, ask for a version with a circle or rounded corners on a transparent background.
Use a free icon generator. Tools like favicon.io can turn your initials into an icon. Choose a bold font, your brand colors, and a circle or rounded background, then upload the largest PNG from the download.

Configuring your community home page
Configuring features & welcome messages
Adding custom links to your community's navigation & footer