iPhoneでホーム画面に追加をすると、対応していないサイトは、サムネイルで表示されますよね?あれをなんとかしたいと思い、チャレンジしてみました。

過程

まず、ブックマークレットから<link rel="apple-touch-icon" href="">を<head>に書き込む方法を思いつきました。そこで、次のようにjavascriptでやってみました。

javascript:document.getElementsByTagName("head").innerHTML+='<link rel="apple-touch-icon" href="">'

これで、headに書き込めて解決!とおもいきや、セキュリティの関係?か、だめでした。もう、ほかに方法もおもいつかなくて諦めかけていました。しかし、document.headなるものがあることにたどりついたのです!どうやらそれは、headタグを指すらしいので、試しに書き換えてみました。

javascript:document.head.innerHTML+='<link rel="apple-touch-icon" href="">'

なんでgetElementsByTagName("head")がだめでheadがOKなのかよくわかりませんが、これで通りました。javascriptはやはり奥が深いですね。

使い方

まず、適当なサイトをブックマークします。例えばここ

次に、編集をおして、先ほど追加したブックマークをクリックします。したの画面になればOKです(上の写真とはややちがいます)。

そしたら、javascript:document.head.innerHTML+='<link rel="apple-touch-icon" href="">'のhref=""の部分にアイコンにしたい画像のurlをいれます。著作権は個人で使う範囲ならあまり関係ないと思うので、Googleなどで検索して、引っ張ってくるのがいいと思います。hrefにはhref="http://xxx.yyy.zzz"のように書いてください。

最後にブックマークの名前をiconとか好きな名前にして完了です。

この方法は、すべてのサイトに有効化はわかりません。使い方は、ブックマークをクリックすればOKです。