Blogger Labo：スマホ版のファビコンを設定する方法

Bloggerでは管理画面のレイアウトからファビコン（ブラウザで表示されるサイトアイコン）を設定できますが、設定できるのはPC用で、モバイル用のファビコンには非対応のようです。そこで、今回は「スマホ版のファビコンを設定する方法」を紹介したいと思います。


1．ファビコン画像を作成する


Blogger Labo：スマホ版のファビコンを設定する方法

まず、適当な画像作成ソフトで自分のサイトのファビコンを作成します（自分はInkscapeなんかを使って作成しています）。このとき、ファイル形式は JPG、PNG、GIF、SVG などブラウザで表示できる形式で作成し、サイズは 256 ✕ 256px 以上で作成しておくと全てのデバイスでキレイに表示されるようになるようです。なお、各デバイスに必要なファビコンサイズは以下の通りです。

・Internet Explorer： 16 × 16px
・IE以外のブラウザ： 32 × 32px
・Winデスクトップ： 64 × 64px
・iOSのデバイス： 180 × 180px
・Androidのデバイス： 256 × 256px

2．ファビコン画像をBloggerの投稿画面でアップロードする


Blogger Labo：スマホ版のファビコンを設定する方法

作成したファビコン画像はBloggerの場合は投稿画面なんかでアップロードします。まあ、画像のアドレスさえ取得できれば良いのでGoogleフォトでも良さそうです。

投稿画面でアップロードした場合は、画像を「元のサイズ」にした後に画像を右クリックして「画像のアドレスをコピー」で画像のアドレスを取得しておきます（Chromeの場合）。とにかく画像のアドレスを取得できれば良いので、取得したらテキストエディタなどにコピペして控えておきます。

※アップロードする前に画像を圧縮してファイルサイズを縮小させておいたほうが親切かもしれません。下記のサービスで画像を圧縮することが出来ます。

iLoveIMG | 画像編集用オンラインツール

iLoveIMGは、使いやすくて完全無料の画像処理用オンラインサービスです。画像の圧縮、サイズ変更、切り抜き、変換などが可能です！

3．テンプレートにファビコン設定コードを記述する


<head>

<!-- ファビコン -->
<link href='画像URL' rel='apple-touch-icon-precomposed'/>

</head>

ファビコンは<head>タグ内に上記のコードを記述することで設定することが出来ます。この記述は外部からファイルを読み込むタイプの記述で、<head>タグ内ならばどこに記述しても良さそうですが、CSS部分が特殊でややこしいので、ファビコン用のコードは <head>のすぐ下あたり もしくは </head>のすぐ上あたり に書くのが良さそうです。

これでファビコンは設定できたと思うので、自分のスマホなんかで上手く行っているか試してみてください。試す方法は、スマホ用のブラウザでファビコンを設定したサイトを開いて、ブックマークなんかをすると確認できると思います。