Favicon

A favicon is the small icon that represents your site in the browser. It shows up in browser tabs, bookmarks, history, home-screen shortcuts on phones and sometimes next to your site in search results. A clear favicon makes your show easy to spot when someone has a lot of tabs open.

How it works in ShowHub

Go to Design → Brand and find Favicon under Identity. Next to it is a Use profile picture toggle.

A few details worth knowing:

• Your saved custom favicon is kept while the toggle is on. Switch the toggle off again and it comes back, so you don’t need to paste it again.
• If the toggle is off and you haven’t set a custom favicon, ShowHub falls back to your profile picture.
• The custom favicon URL must start with http:// or https://.

What makes a good favicon

• Keep it simple. Use a single mark, symbol or initial rather than your full show name or a photo. Text and fine detail disappear at small sizes.
• Use strong contrast. A bold shape against a contrasting background reads best.
• Make it square. Favicons are displayed as squares, so start from a square image.
• Check it at 16x16. That is roughly how big it appears in a browser tab. If you can’t tell what it is at that size, simplify it further.
• Test on light and dark tabs. Many people use dark mode. A dark icon on a transparent background can vanish on a dark tab, so check both.
• Use a transparent background where it helps. Transparency suits icons with a clear outline. If your mark is thin or dark, a solid background tile is often safer.
• Match your brand. Use the same colors as your logo and site so the icon feels like part of your show.

Recommended sizes and formats

Start from a square source image of at least 512x512 pixels. From that, these are the common sizes:

For the URL you paste into ShowHub:

• PNG is the safest choice. It works in every major browser.
• SVG works in most modern browsers, but not everywhere. Some browsers, including older versions of Safari, don’t show SVG favicons, so PNG is the more reliable option.
• Keep the file small, ideally under about 100KB. A favicon doesn’t need to be large, and a small file loads faster.

How to create one

1. Start from your logo. Open it in a design tool such as Canva or Figma.
2. Crop to a square and remove anything that won’t read at small sizes, such as taglines or thin text. Often just your initial or symbol is enough.
3. Export as PNG at 512x512 or larger.
4. Optional: use a generator. Free tools such as RealFaviconGenerator can turn one image into all the common sizes and let you preview how it looks in different browsers.
5. Host the image somewhere public, for example your own website or an image host, and copy its address. It must start with http:// or https://.
6. In Design → Brand, turn Use profile picture off and paste the URL into the favicon field.

Troubleshooting

I changed my favicon but still see the old one. Browsers cache favicons aggressively. Try a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or open your site in a new private window. It can take a while for every browser and device to pick up the change.

My favicon doesn’t show at all. Make sure the URL is publicly reachable: paste it into a private browser window and check that the image loads without signing in. Also check that the Use profile picture toggle is off; when it’s on, ShowHub ignores the custom URL.

My favicon looks stretched or squashed. The image probably isn’t square. Crop it to equal width and height and upload it again.

My favicon is hard to see. Test it on both light and dark browser tabs, then increase the contrast or add a solid background.