A visitor clicks “Buy tickets” on your website, and the browser tab switches from your logo to a generic icon, or to someone else’s. It’s a small thing, but people do notice. A tab that suddenly looks different is one more reason to wonder whether they’ve left your site, and that doubt shows up when it’s time to enter a card number.
A favicon is easy to change on a website you control. With Altru web forms it’s harder, because you don’t fully control the page that serves the form. Here’s how favicons work, why Altru forms behave the way they do, and what you can realistically do about it.
How a browser picks the tab icon
The browser looks for the icon in two places, in this order:
- A <link rel=”icon”> tag in the page’s
<head>, pointing to an image file. - If there isn’t one, a file named favicon.ico at the root of the domain serving the page.
So the icon belongs to whoever controls the page’s head and the domain. If you can’t edit either, you can’t set the favicon directly.
Why Altru web forms are different
Altru web forms are hosted by Blackbaud. You can customize a good deal of how they look, usually through the form’s template, header and footer content, and stylesheet. Those options control what appears on the page, not the document’s head or the domain’s root files. When a form opens on its own page at a Blackbaud address, the browser asks that domain for the icon, and you have no say over what’s there.
We can’t confirm whether every Altru setup offers a way to inject tags into the head of a hosted form. If your options have changed or you’re unsure, ask Blackbaud support directly and test any answer in your environment before going live.
Options that actually work
1. Embed the form on a page you own
This is the most reliable fix. If the form appears inside a page on your own website, the browser tab belongs to your page, so it shows your favicon no matter where the embedded content comes from. Check how your forms are currently placed:
- Linked: your “Buy tickets” button sends people to a separate Blackbaud page. The tab shows Blackbaud’s icon (or a blank one).
- Embedded: the form loads inside a page on your domain. The tab shows your icon and your page title.
If you’re linking, consider moving the main forms (tickets, memberships, donations) onto dedicated pages on your site. Before switching, test the full purchase on a phone. Embedded forms can scroll awkwardly, cut off at the bottom, or leave the confirmation screen trapped in a small frame, so make sure the experience works on small screens.
2. Try a link tag in the form’s header content
Some admins add a <link rel="icon" href="https://yoursite.org/favicon.png"> tag to the form’s header HTML. Since that content usually lands in the page body rather than the head, it’s technically in the wrong place, and browsers handle it inconsistently. It might work in one browser and not another, or stop working after a platform update. If you try it:
- Host the icon on your own site with an absolute HTTPS URL.
- Test in Chrome, Safari, Firefox, and Edge, on desktop and mobile, in a private window so a cached icon doesn’t fool you.
- Treat it as a nice-to-have, not something you promise your marketing team.
3. Make the rest of the page unmistakably yours
Even if the tab icon won’t change, the page itself can still feel like part of your site. Use your logo in the header, match your site’s fonts and colors in the stylesheet, and link back to your homepage in the footer. Visitors judge trust far more by the page than by a 16-pixel icon.
What to prepare either way
- A square icon file in PNG format (32×32 and 180×180 cover most browsers and home-screen shortcuts), plus an .ico version for older browsers.
- A short, descriptive page title for each form page, such as “Buy Tickets | Your Museum,” because the title appears right next to the icon in the tab.
- A list of every public form URL, so you know which pages people actually land on.
If you want full control of the page
Some organizations decide the hosted form is the wrong place to fight this battle and move the purchase page somewhere they control. Social Good’s Checkouts is one way to do that. It’s a branded, mobile-friendly checkout for tickets, memberships, and donations that replaces Altru web forms, and the data still writes back to Altru. Since the checkout carries your branding, the tab icon is no longer something you need to work around.
Quick answers
Can I upload a favicon in Altru’s web form settings?
We aren’t aware of a dedicated favicon setting for hosted forms. Confirm with Blackbaud support, since options can change.
I changed the icon, but I still see the old one.
Browsers cache favicons aggressively. Check in a private window or a different browser before assuming the change failed.
