Dynamically generated favicon

Question

Would it be possible using only JavaScript and HTML to dynamically generate a favicon, using the current page's favicon as a background, and a random number in the foreground?

For example, lets say the current favicon looks similar to this:

======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X============X====
====X============X====
====XXXXXXXXXXXXXX====
======================

If possible, how would I get it to look something similar to this using only JavaScript and HTML:

======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X=========--111--=
====X=========--1-1--=
====XXXXXXXXXX----1--=
==============--1111-=

map:
= : white background
x : Original Favicon image
- : Red generated image with a number
1 : White text

Ideas:

Canvas?
Data Uri's?

Wow, the 1's actually are red... Want I want is the opposite though. The `1`'s would be white while the `-`'s would be red — Shaz, Aug 06 '11 at 01:15
Are you intending to modify the user's current favicon on their browser with this new image, or display it on the screen somewhere? — mellamokb, Aug 06 '11 at 01:17

Joe · Accepted Answer · 2011-08-06T02:27:00.847

EDIT: Got it working with

var canvas = document.createElement('canvas');
    canvas.width = 16;canvas.height = 16;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = '/favicon.ico';
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        ctx.fillStyle = "#F00";
        ctx.fillRect(10, 7, 6, 8);
        ctx.fillStyle = '#FFFFFF';
        ctx.font = 'bold 10px sans-serif';
        ctx.fillText('2', 10, 14);

        var link = document.createElement('link');
        link.type = 'image/x-icon';
        link.rel = 'shortcut icon';
        link.href = canvas.toDataURL("image/x-icon");
        document.getElementsByTagName('head')[0].appendChild(link);
    }

You can actually run chrome and paste this:

javascript: var canvas = document.createElement('canvas');canvas.width = 16;canvas.height = 16;var ctx = canvas.getContext('2d');var img = new Image();img.src = '/favicon.ico';img.onload = function() {ctx.drawImage(img, 0, 0);ctx.fillStyle = "#F00";ctx.fillRect(10, 7, 6, 8);ctx.fillStyle = '#FFFFFF';ctx.font = 'bold 10px sans-serif';ctx.fillText('2', 10, 14);var link = document.createElement('link');link.type = 'image/x-icon';link.rel = 'shortcut icon';link.href = canvas.toDataURL("image/x-icon");document.getElementsByTagName('head')[0].appendChild(link);}

into the browser and see it in action.

enter image description here

A few caveats: as explained [here](http://stackoverflow.com/questions/260857/changing-website-favicon-dynamically), this won't work on all browsers. This will also fail if the favicon is loaded from a different domain the page is on - see [this question](http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception) — Yi Jiang, Aug 06 '11 at 07:32
@Yi: Atm, this will only be used with Google Chrome, and on certain pages. Though, you have been more than helpful with the links you have provided me with so far. Thanks! — Shaz, Aug 06 '11 at 16:38
So I take it that a reasonable way to approach this if you really want your webapp to do this is to implement a favicon renderer on the serverside. Very cool though, even if it is chrome-only. — Steven Lu, Oct 23 '15 at 18:44
I get `SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.` — Michał Perłakowski, Mar 19 '16 at 13:41

score 16 · Answer 2 · edited Jul 07 '18 at 06:18

You might take a look at this question, which discusses how to change the favicon dynamically. Also here is a site that claims to play a game in the favicon using only JavaScript, canvas, and the data URI, which should work in all modern browsers except IE. Not sure if that would fulfill your requirements or not, but you can try reverse engineering how it works.

Here's an SO answer that explains how to use the canvas element to read the favicon data and get the image data out, which then can be modified and composed into a new icon.

score 4 · Answer 3 · answered Aug 06 '11 at 01:26

4

I don't know about doing it all in the browser, but it would be easy to have a server endpoint that accepted parameters in the URL and returned a composed favicon. Then Javascript could modify the favicon url to get the image it wanted.

answered Aug 06 '11 at 01:26

Ned Batchelder

364,293
75
561
662

Sadly, unless there is a public server that will serve something like this for free, a server is out of the option at the moment. :( – Shaz Aug 06 '11 at 01:31
Well what I'm getting at is I'd like it to be done in the browser itself, using a server as a last resort ;) – Shaz Aug 06 '11 at 01:47
@NedBatchelder I wonder if that is what WordPress dot com does with it's dynamically generated favicon-type images for Gravatar's for comments. Except it uses the IP address instead of the URL to generate the image, and the image is selected from a static (rather small) pre-limited set. That's kind of dumb, what I just said. It was gratuitous, cause I really wanted to say that I think it is so awesome to see you here on StackOverflow! I wrote a blog post today about a topic you covered in 2007. I got the idea from a back-end engineer for Tumblr, who suggested your 2007 post. So cool! – Ellie Kesselman Oct 06 '11 at 04:34

score 1 · Answer 4 · answered Sep 28 '17 at 21:29

1

favicon.js does exactly this. This library can display a counter in the bottom right corner of the favicon, among other features.

answered Sep 28 '17 at 21:29

philippe_b

38,730
7
57
59

Dynamically generated favicon

4 Answers4

Linked