スマホ用のショートカットアイコンを設定しました

業務外

井戸掘りブログにスマホ用のショートカットアイコンを設定する方法です。備忘録として残しておきます。

---

自分のスマホのホーム画面に、井戸掘りブログへのショートカットアイコンを登録してみました。
するとブログサービス（Blogger）のアイコンが表示されます。以前はブログのファビコンが表示されたはずですが、仕様が変わったのかな？
でもこれでは、井戸掘りブログかどうかはタイトルでしか判りません。タイトル自体も先頭の10数文字しか表示されていないし…。

青いBがアイコンです

amazonとかのサイトは、ショートカットアイコンを登録すると、独自のアイコンがスマホのホーム画面に表示されます。画面キャプチャの2列目が、サイトのショートカットアイコンです。これが良いです。仕組みを調べてみましょう。

---

どうやら、linkタグでapple-touch-iconを登録するだけで良いらしい。
ブログテンプレートを直接修正して、ブログトップページに使っているエンブレムをアイコンに登録してみました。画像自体はpng形式で、Picasa Web Albumsに配置しています。ショートカットアイコンのサイズは32×32pxです。大きな画像でも自動的に縮小されるようなので、ちょっと大き目の128×128pxの画像を使ってみました。

エンブレムをアイコンにしました

ソースコードです。これをブログテンプレートの<head>〜</head>の間に記述するだけです。ブログテンプレートはxml形式なので、行末は「/>」で閉じないと、Bloggerに怒られます。
参考にする場合は、画像ファイルのURL部分を、利用する画像に合わせて変更してください。

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkT-lyUmU5P5V4MQDuBQ3ErQ1_A6tuWeJp7tSx-v4TX8sdn5CFs0UvmnESJ-t8GVSgZo75z_wGt4QODYork-DFQYLyMs-CESrSXaAaQpURgYcgLB8hrWZc-gQgSlCjwtx1wrDcsEjhMPlL/s200/emblem128.png'
rel='apple-touch-icon'/>
 
 
 
 

感想と構想

ショートカットアイコンの登録は、ネットの情報も豊富で、設定自体も簡単でした。
井戸掘りブログが、ちょー格好良くなりました。自画自賛（笑）

---

ショートカットアイコンの使い方は、以下の記事を参考にさせていただきました。

Web Clipアイコンを指定する