Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

おさらい

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away