ファビコンを設定しました!


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

これを
ファビコン例1

これに変更
ファビコン例2

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

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

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

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

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

3. HTMLテンプレートのソースコード(head閉じ)直前に 以下のソースコードを挿入
ファビコンのソースコード
注)赤字部分は、アップロードされたファビコン画像のファイルURLです。

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

<スマホ用の設定>
* スマホは「iphone用」で設定(androidでも 問題なく表示されます)

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

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

3. HTMLテンプレートのソースコード(head閉じ)直前に 以下のソースコードを挿入
アップルタッチアイコンのソースコード
注)赤字部分は、アップロード画像のファイルURLです。
 
これだけでOKです。コスモス画像のアップルタッチアイコンに変わりました!

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

3. HTMLテンプレートのソースコード(head閉じ)直前に 以下のソースコードを挿入
ファビコン&アップルタッチアイコンのソースコード
注)赤字部分は、アップロード画像のファイルURLです。
上記のとおり、PC用とスマホ用の 2つのソースコードを一緒に挿入すればよいそうです。

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