dynamic生成的图标
是否有可能只使用JavaScript和HTMLdynamic生成一个图标，使用当前页面的图标作为背景，并在前台随机数字？
例如，让我们说当前的图标看起来像这样：
====================== ====XXXXXXXXXXXXXX==== ====X================= ====X================= ====X=====XXXXXXXX==== ====X============X==== ====X============X==== ====XXXXXXXXXXXXXX==== ====================== 如果可能的话，我将如何使用JavaScript和HTML来使它看起来类似于这个：
====================== ====XXXXXXXXXXXXXX==== ====X================= ====X================= ====X=====XXXXXXXX==== ====X=========--111--= ====X=========--1-1--= ====XXXXXXXXXX----1--= ==============--1111-=
地图：
= ：白色背景
x ：原始的Favicon图像
- ：红色与一个数字生成的图像
1 ：白色文字
思路：
- 帆布？
- 数据Uri的？
编辑：得到它的工作
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); }
你可以运行chrome并粘贴：
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);}
进入浏览器，并看到它的行动。
您可以看看这个问题 ，讨论如何dynamic改变图标。 这里还有一个网站声称只使用JavaScript，canvas和数据URI在favicon中进行游戏，这应该可以在除IE以外的所有现代浏览器中使用。 不知道这是否能满足您的要求，但你可以尝试反向工程如何工作。
下面是一个解答如何使用canvas元素来读取图标数据，并获取图像数据，然后可以修改，并组成一个新的图标。
我不知道如何在浏览器中完成所有工作，但是有一个服务器端点接受URL中的参数并返回一个组合的图标将很容易。 然后，Javascript可以修改图标url来获得它想要的图像。
favicon.js正是这样做的。 该图书馆可以在favicon的右下angular显示一个计数器，以及其他function。
