Mobile
Give your site an icon instead of a blank tab
Your site has no icon, so browsers show a blank page symbol in the tab, in bookmarks, and in open tabs.
Why it matters
The small icon in the browser tab is the trust signal that stays on screen the whole time someone reads your site. A blank one looks like a page nobody finished, which is exactly the impression you do not want while a customer is entering payment details. It is also the image that appears when someone adds you to their phone home screen or picks your site out of a row of open tabs.
How you would notice it
- The browser tab shows a blank page symbol or a generic globe.
- Bookmarks for your site look the same as bookmarks for unrelated sites.
- Adding the site to a phone home screen produces a screenshot rather than your logo.
What to do
Stage 1
- Check whether you already have one by visiting your own address followed by /favicon.ico, and see whether an image loads.
If an image appears you already have a favicon. The rest of this page is then only about brand consistency, not about fixing a fault.
https://www.example.com/favicon.icoStage 2
- Make a square image from your logo, ideally 512 by 512 pixels. Most image editors and free favicon generators export every size needed from one file.
Keep it bold and simple. At 16 pixels across, fine detail and small text turn into an unreadable smudge.
- Upload it to the top level of your site, next to your main page, and name the file exactly favicon.ico.
Browsers request this exact file name at this exact place on their own, so with the file in position nothing else is needed.
https://www.example.com/favicon.icoStage 3
- If you want to declare it explicitly, or you need a larger version for phone home screens, add the links to the head section.
A link tag whose href is blank or is an empty data value tells browsers you deliberately have no icon. That is a common cause of a globe appearing even though an icon tag is present.
<head>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>How to check it worked
Confirm it worked
Reload your site and look at the browser tab. Your icon should appear beside the page title, and it should still be there after you close and reopen the browser. Re-run the Siege Test and confirm the Favicon check turns green.