ブックマークアイコン(ファビコン)をFC2で表示する方法

2013/07/22 2014/11/22

FC2でブックマークアイコン(ファビコン)を追加する方法は、
他のブログでも紹介されています。

情報が多くあり、大半がタグ編集で対応されているでしょうから、
投稿する意味さえなさそうですが、
他の無料ブログサービスでも投稿しているため投稿します。

ファビコンイメージ

はじめに

他の無料ブログで試した際にちょっと苦労したこともあり、
FC2でブックマークアイコン(ファビコン)を表示する方法を
投稿しようと思いましたら、
FC2ではテンプレートの編集をすべて認めているため、
一度「このテンプレートでいく」と決めた場合には、
あっさりとタグ挿入によってファビコンの表示が行えます。

そういう意味ではセオリー通りに<head>タグ内に対して、

linkタグ挿入を行うのがベストな選択肢であると思います。
編集前のHTMLに関しても別名で保存ができますので、
誤って修正してしまった場合にも対応がしやすいのもいいところです。

FC2テンプレート複製画面

しかし、後々テンプレートの変更を行うことを、
想定した場合にテンプレートを変更せずに、
ファビコンくらい実装したいと思うところはあります。

本投稿は以下投稿の詳細ページになります。

無料ブログ各社のブックマークアイコン(favicon)変更可否と方法

各社の違いについてご興味がおありでしたら、
お読みいただけると嬉しいです。

概略

アイコン用画像の作成
画像のアイコンファイル化
アイコンファイルのFC2へのアップロード
テンプレートのHTMLの複製
HTMLにタグの追記

となります。

表示するアイコンの準備

アイコン用画像の作成

まずアイコンに割り当てたい画像を用意する必要があります。
画像の作成方法等に関しては以下の投稿を参照願います。

１つのアートボードを使ったIllustratorによるFavicon画像の作成

複数アートボードを使ったIllustratorによるFavicon画像の作成

Internet Explorerによる表示を除けば、
16pxサイズのGIFやPNG画像を用意し、
割り当てることで表示が可能ですがInternet Explorerでは表示されません。

多くの方が利用されているであろうInternet Explorerで、
表示されないのではあまり意味がありません。

その為、16px、32px、48pxで作成した画像を、
ico形式のファイルに割り当てることで、
一般的なブラウザで表示されるようになります。
今回は、以下の画像を利用してicoファイルを生成しています。

今回作成したicoファイルはこのファイルです。

画像のアイコンファイル化

画像のアイコンファイル化については、
以下を参考にして頂ければ簡単に作成ができます。

画像ファイル(PNG、GIF、JPEG)ファイルからのアイコン(ico)ファイル化

アイコンファイルのFC2へのアップロード

作成したicoファイルのアップロードには、
ファイルアップロードを利用します。

ファイルアップロードの選択

管理画面に表示されている[ファイルアップロード]を
クリックします。

ファイルアップロードの選択

ファイルの登録

ファイルをアップロードエリアに、
ドラッグアンドドロップします。

ファイルのドラックアンドドロップ

タイトルの入力

画像の説明(タイトル)を入力します。

画像のタイトル設定と制限の確認

アップロードの実行

[アップロード]をクリックし、
ファイルのアップロードが完了すると、
下部のファイルの一覧にicoファイルが表示されます。
※ここで表示されているURLをコピーしておきます。

アップロードの完了

ファイルのアップロードは以上です。
次にHTMLファイルの編集を行います。

テンプレートのHTMLの複製

テンプレートの設定の選択

管理画面より[テンプレートの設定]を選択します。

テンプレートの設定の選択

テンプレートの複製

これまでテンプレートに対する変更を
一切行っていない場合には初期のテンプレートが表示されています。
PCテンプレートの一覧から[複製]を選択し、
現在のテンプレートを複製します。

テンプレートの複製

複製テンプレートの編集

今複製したテンプレートの[編集]をクリックします。

複製テンプレートの編集

テンプレート名の変更

テンプレート名の編子に対して、
新しいテンプレート名を入力し[更新]をクリックします。

複製テンプレート名の変更

テンプレートが更新されると、更新完了メッセージが表示されます。

変更の完了メッセージ

HTMLにタグの追記

HTML編集

HTML編集の画面の中でからの間に、
以下のHTMLを挿入します。

ただし、赤字で表記しているURLは先ほどicoファイルを、
アップロードした際にコピーしたURLに書き換えて貼り付けてください。

青字で表記したURLに関しては、
スマートフォン用に準備した72px四方のPNG,GIF,JPEG画像ファイルを
ファイルマネージャからアップロードして取得したURLに書き換えて、
貼り付けを行ってください。

※動作確認を目的として以下URLを指定しての、
アイコンの表示確認などは行っていただいても構いません。

<link rel="shortcut icon" href="http://blog-imgs-50.fc2.com/a/l/g/algorhythnn/favicon_orange.ico" />
<link rel="apple-touch-icon-precomposed" href="http://blog-imgs-50.fc2.com/a/l/g/algorhythnn/logo_p01-72px_orange.png" />

1 2	<link rel="shortcut icon" href="http://blog-imgs-50.fc2.com/a/l/g/algorhythnn/favicon_orange.ico" /> <link rel="apple-touch-icon-precomposed" href="http://blog-imgs-50.fc2.com/a/l/g/algorhythnn/logo_p01-72px_orange.png" />