ある日、自分のホームページを見ていて、上部タブの左端にある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つのソースコードを一緒に挿入すればよいそうです。
以上、私の備忘録でした。
最終更新日 : 2019-03-15
Re: No Subject * by コスモス(COSMOS)
コメントありがとうございます。
私もファビコンの設定方法を見つけるまで苦労したので、この記事がお役に立てたと聞き、嬉しいです!
タグが画像で、失礼しました
ソースコードを記事に直接入力すると 表示が変になっちゃうので、画像を貼ってごまかした次第です
私もファビコンの設定方法を見つけるまで苦労したので、この記事がお役に立てたと聞き、嬉しいです!
タグが画像で、失礼しました

ソースコードを記事に直接入力すると 表示が変になっちゃうので、画像を貼ってごまかした次第です

タグが画像なのでコピペで簡単に出来ずに苦労しましたがw
ありがとうございました。