LoginSignup
99

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-07-25

おさらい

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

gamy.png

追加方法

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を生成できるのでは?

できました!

例えば、アイコン画像を2つ用意して、1つはPNGで透過させてCanvasで重ねてみます。

gamy.png

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;

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
99