I saw an old post with a solution that no longer appears to work so wanted to post my solution. The old solution required an HTML header snippet but it didn’t work because it came after the Bubble app’s default favicon snippet which was loaded first so the dynamic snippet couldn’t override it.
Sticking this in your HTML header should do the trick:
<script>
document.addEventListener('DOMContentLoaded', function() {
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/png';
link.rel = 'icon';
link.href = 'Dynamic datas favicon';
document.getElementsByTagName('head')[0].appendChild(link);
});
</script>
Where dynamic data’s favicon is your dynamic data. Have fun. There might be a tiny amount of time the default logo is displayed when the page is loaded but that’ll only happen the first time the page is loaded - refreshes will load the dynamic image straight away.
6 Likes
This worked, thank you so much.
Hi @georgecollier. I had also found the previous solution and it still works for me, but I can’t get it to work on two pages: our login page and the 404 default page when users are not logged in.
Then, I saw your post about an alternative solution and tried it on those two pages, but it doesn’t work for me. I’ve also tested it on our index page, which requires users to be logged in to access, without success (while the other solution works fine on that page).
Do you have another solution or are you using a plugin now? I’ve attached the code I’m using and the search criteria for the favicon link. Maybe I’m doing something wrong or the code just doesn’t work anymore. If not, do you have any other solutions? Thank you very much.
Works fine on the index page:
Does not work on our login page:
Check your regex is good
This method should work on all pages.
Try it with a simple static image URL first, and if it works, then you know it’s something to do with your dynamic expression.
@georgecollier, it’s strange because the subdomain name is extracted correctly as shown in the first screenshot. I should be able to find it in the database as shown in the second screenshot. However, if I add a static link as the favicon, it works and uses that link instead of the global application favicon.
So, and you’re right, this could be a regex issue. I’ll try using different regex to see if that fixes it. If I figure it out, I’ll post my findings.
Thanks!
I’m not sure why, but instead of using This URL, I’m using Website home URL (documentation here) and it shows the dynamic favicon correctly. So I didn’t change my regex because it worked fine. I just changed the Bubble expression before it. You can see my final solution in the screenshot. I’m sharing this in case someone else has the same problem and needs to get a dynamic favicon using the website URL. Thank you for your help @georgecollier.
