apple-touch-icon은 base64로 지정할 수 있고 JS로 쓸 수 있다는 것을 알고 있었습니까?

오사라이

apple-touch-icon이란, iOS의 Safari라고 홈 화면에 추가한다고 하면 추가되는 녀석(웹 클립 아이콘이라고 말하는 것 같습니다)
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을 생성 할 수 있습니까?

할 수 있었습니다!

예를 들어, 아이콘 이미지를 2개 준비해, 1개는 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;

이번에는, 이런 느낌으로 카테고리마다 다른 아이콘을 만드는데 사용했습니다.
일부러 이를 위해서 이미지 생성용의 서버를 구축하지 않고 간단하게 구현할 수 있었습니다.