With a Good Feeling　

ある日、自分のホームページを見ていて、上部タブの左端にあるFC2のマーク（馬？ユニコーン？）が気になりました。これを自分のマーク（コスモス）にできないかな～と思って検索してみたら、できるではないですか！

これを


これに変更


このマークを「ファビコン」というらしいのです。いろんなサイトで ファビコンの設定方法が説明されていました。私もいくつかのサイトを参考にさせていただいたのですが、その中の一つ、FC2さんのブログは こちら から！

設定方法は いたってシンプルだったので、ここで詳しく説明することは省略しますが、自分の備忘録として 以下に記録を残します。

まず 私の場合、ブログのテンプレートが「PC」と「スマホ」で別々。なので「PC」と「スマホ」別々に、HTMLテンプレートに変更を加えました。（私が使用しているPCのテンプレートは「レスポンシブ対応」なので、特にスマホ用のテンプレートを使用する必要はないのですが、それぞれ気に入っているので、そのまま 別々のテンプレートを使っています。）

＜PC用の設定＞
1.　画像ファイルを準備
コスモス画像の「jpg」を、フリーソフトを利用して「ico」形式に変換
注）ファビコンは「ico」形式以外の画像ファイルでも設定可能らしいのですが、私は諸先輩方の方法に倣って「ico」形式に変換しました。

2.　上記の変換済み画像を FC2ブログに「ファイルアップロード」

3.　HTMLテンプレートの直前に 以下のソースコードを挿入

注）赤字部分は、アップロードされたファビコン画像のファイルURLです。

これだけでOKです。コスモス画像のファビコンに変わりました！

＜スマホ用の設定＞
* スマホは「iphone用」で設定（androidでも 問題なく表示されます）

1.　画像ファイルを準備
オリジナルのコスモス画像（jpg）を「180×180」ピクセルにサイズ変更して「apple-touch-icon.png」という名前で保存
注）スマホの方は 「ico」形式に変換する必要はなし、でも jpeg から png に変更して保存です！
サイズは「180×180」の1つで大丈夫、あとは自動調整されるそうです。

2.　上記の画像を FC2ブログに「ファイルアップロード」

3.　HTMLテンプレートの直前に 以下のソースコードを挿入

注）赤字部分は、アップロード画像のファイルURLです。
　
これだけでOKです。コスモス画像のアップルタッチアイコンに変わりました！

繰り返しになりますが、私の場合はPC用とスマホ用で別々の設定をしましたが、テンプレートが両方で同じ場合（レスポンシブ対応）は、上記＜PC用の設定＞の3番で 以下のとおりにします。

3.　HTMLテンプレートの直前に 以下のソースコードを挿入

注）赤字部分は、アップロード画像のファイルURLです。
上記のとおり、PC用とスマホ用の 2つのソースコードを一緒に挿入すればよいそうです。

以上、私の備忘録でした。