Simple dynamic favicon

Tips
1

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.

3 Likes