how to cache favicon javascript

Question

I'm trying to cache my favicon image just like any other image, but I'm not seeing it in the cache, nor getting my confirmation console.log, nor seeing it when I disconnect from the internet (basically it is not caching).

I want to cache it so I can access it offline, so I can dynamically change the icon if the internet disconnects.

My html:

<link id="favicon" rel="icon" type="image/png" src="assets/favicon-red-16x16.ico.png">

My js:

// cache images
function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        console.log('caching image...')
        var img = new Image();
        img.onload = function() {
            console.log('image cached')
            var index = list.indexOf(this);
            if (index !== -1) {
                // remove image from the array once it's loaded
                // for memory consumption reasons
                list.splice(index, 1);
            }
        }
        list.src = array[i];
    }
}
preloadImages(["../assets/favicon-green-16x16.ico.png", "../assets/favicon-red-16x16.ico.png"]);

question: Is it possible to cache the favicon client side? Is there another way to store it locally?

if i convert to base64 how do I store and grab it from local storage?

ps. using Chrome latest

<___ UPDATE ___>

Though the question is technically answered, How can I do this two store 2 (more than one) base64 image? I can't figure out how to draw 2 onto a canvas or 2 canvases.

Why do you try to cache images by yourself? This is a task for the web browser. — lilezek, Jan 26 '18 at 21:38
You can try converting image to base64 and storing it in the localStorage of the browser. — Harun Diluka Heshan, Jan 26 '18 at 21:52
@lilezek because it is a requirement for this application, if it goes offline I want to be able to change the icon to a red dot to signal disconnect to the user even if they aren't on the page — FussinHussin, Jan 26 '18 at 22:03
@HarunDilukaHeshan how would I do that? and once it's encoded how would I call it from the cache? — FussinHussin, Jan 26 '18 at 22:03
You can directly use base64 encoded string on src attributes of the link to display the favicon. https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html — Harun Diluka Heshan, Jan 26 '18 at 22:17
So you are trying to develop an offline application. That should appear in your questions. You are trying to set up manually a favicon, not really trying to cache things. — lilezek, Jan 26 '18 at 22:18
i am trying to cache things, let me update my q. If my question is how to cache something, I shouldn't have to specify why, it could be for no reason at all, it's just a question — FussinHussin, Jan 26 '18 at 22:19
I disagree. My question has nothing to do with changing the favicon, I already can do that, my question is how to store the favicon in the cache for offline access. — FussinHussin, Jan 26 '18 at 22:21
https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html — lilezek, Jan 26 '18 at 22:22

score 2 · Accepted Answer · answered Jan 27 '18 at 09:38

Try this code pal. You can hide iconImage img element. The other img tag i have used, is for testing only, so you can remove it.

<!DOCTYPE html>
<html>
<link id="favicon" rel="icon" href="img_the_scream.jpg" />
<body>

<img id="iconImage"  src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<br />
<img id="img" width="220" height="277"/>
<script>

function onLoadHandler() {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("iconImage");
    var base64Image = localStorage.getItem("lsFavicon");
    var favicon = document.getElementById("favicon");
    var img2 = document.getElementById("img");

    if (base64Image == null && document.navigator.onLine) {
        ctx.drawImage(img, 0, 0);
        base64Image = canvas.toDataURL();
        localStorage.setItem("lsFavicon", base64Image);
        favicon.setAttribute("href", base64Image);
    }
    else if (base64Image != null) {
        favicon.setAttribute("href", base64Image);
        img2.setAttribute("src", base64Image);
    }
}

window.onload = onLoadHandler;
</script>

</body>
</html>

hey thanks for actually trying to answer my question, I'll give it a shot, this looks like a good solution. I'll get back to you once I have tried it — FussinHussin, Jan 28 '18 at 00:18
This worked great! just one question, how do I do this for two separate favicons? I guess I'm missing the concept for setting one, so I can't seem to repeat it for two icon images — FussinHussin, Jan 29 '18 at 15:52

how to cache favicon javascript

1 Answers1