apple-touch-iconはbase64で指定できてJSで後書きできるって知ってた？

おさらい

apple-touch-iconとは、iOSのSafariだとホーム画面に追加するってやると追加されるやつ（Webクリップアイコンって言うらしいですよ）
Androidの場合もなぜか同じ名前で読み込まれる

追加方法

headerタグの中に

html

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

なんと！base64でこんな書き方もできるんです

html

<link rel="apple-touch-icon" href="data:image/png;base64,・・・・・・" />

そして！JavaScriptで後から書き変えができるんです

javascript

var appleTouchIcon = document.getElementById("appleTouchIcon");
appleTouchIcon.href = "apple-touch-icon2.png";

##これを利用してCanvasを使ってapple-touch-iconを生成できるのでは？

##できました！
例えば、アイコン画像を２つ用意して、１つはPNGで透過させてCanvasで重ねてみます。

javascript

var appleTouchIcon = document.getElementById("appleTouchIcon");

var img1 = new Image();
img1.src = "appIcon1.png";
var img2 = new Image();
img2.src = "appIcon2.png";

/*
 ※実際にやるときは画像のロードを待たないとだめ
*/

// canvas作成
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

var size = 152
canvas.width = size;
canvas.height = size;
ctx.drawImage(img1, 0, 0, size, size);
ctx.drawImage(img2, 0, 0, size, size);
var base64 = canvas.toDataURL("image/png");

appleTouchIcon.href = base64;

今回は、こんな感じでカテゴリー毎に違うアイコンを作るのに使いました。
わざわざこのために画像生成用のサーバーを構築せず簡単に実装できました。