サイトにFavicon(ファビコン)を設定する方法

mobile-phone-426559_640

ファビコンを自分のサイトに設定する方法を紹介します。今回は「Wordpress」「FC2ブログ」「Seesaaブログ」の三種のサービスに絞って解説しますが、それ以外のサイトでもやることは同じなので参考にできると思います。

またファビコンの作成方法に関しては前回までの記事で紹介しているので、そちらを参照してください。

Favicon(ファビコン)を作成するならドット絵ツール「EDGE」が圧倒的に便利
背景が透過のFavicon(ファビコン)を「EDGE」で簡単に作る方法

ファビコン設置の基本的な手順

  1. ファビコン画像を作成する
  2. Web上に画像をアップロード
  3. ヘッダーにアップロードした画像のURLを記入

どのサイトでもこの流れは大体共通しています。

次の項からはそれぞれのサービス別に解説していきます。

WordPressでファビコンを設置する方法

WordPressにファビコンをアップロードする

管理画面にログイン後、「メディア」→「新規追加」で用意したファビコンをアップロードします。
screenshot_48

アップロード完了後、「編集」をクリックしすると右側にファイルURL等の情報が表示されます。URLは後ほど必要になるのでこの段階でコピーしておくといいでしょう。
screenshot_49

ヘッダー(header.php)にファビコンURLを記入する

下記のコードをコピーしてください。「ファビコンのURL」の部分は先ほどコピーしたファイルURLに置き換えてください。

 完成したコードを「header.php」の中に記載します。場所は何処でも良いですが、わかりやすい位置にすると後からファビコンを変更したいときに便利です。私の場合はタグの直後に挿入しています。
screenshot_50

変更を保存し、ファビコンが表示されていれば完了です。

WordPressのファビコン設置は以上です。

FC2ブログでファビコンを設置する方法

FC2ブログではデフォルトの状態でもファビコンが表示されていますが、設定することによりオリジナルのファビコンに置き換えることが可能です。

FC2ブログにファイルをアップロードする

管理ページから「ファイルアップロード」をクリックし、用意したファビコン画像をアップロードします。
screenshot_51

完了するとこのようになっているはずです。表示されているファイルURLは後ほど必要になるのでコピーしておくといいでしょう。screenshot_52

テンプレートにファビコンURLを記入する

 下記のコードをコピーしてください。「ファビコンのURL」の部分は先ほどコピーしたファイルURLに置き換えてください。

 コードの用意ができたら、管理ページから「テンプレートの設定」をクリックします。
screenshot_53

下へスクロールすると「”テンプレート名”のHTML編集」という欄があるので、その中の「」内に先ほど用意したコードを記入します。わかりやすくの直後にコピーすれば良いでしょう。screenshot_55

記入が完了したら「更新」を押せばブログに反映されます。

以上でFC2ブログのファビコン設置は終了です。

Seesaaブログのファビコン設置方法

基本的にFC2ブログと方法は同じですが若干面倒です。

Seesaaブログの作り方と記事投稿方法

Seesaaブログ上にファイルをアップロードする

「マイブログ」から管理画面に進み、「ファイルマネージャ」をクリックします。開いた画面で用意したファビコンをアップロードします。
screenshot_56

ファイルのアップロードが完了したら画面のようになるので、表示されているファイル名をクリックしてください。screenshot_57

ここにアップロードしたファイルのURLが表示されているのでコピーしておきます。screenshot_58

ファビコンURLをHTMLに記入する

下記のコードをコピーしてください。「ファビコンのURL」の部分は先ほどコピーしたファイルURLに置き換えてください。

コードが用意できたら、今度は管理ページから「デザイン」へ進みます。
screenshot_64

「HTML」をクリックします。
screenshot_59

「HTMLの追加」をクリックします。
screenshot_60

HTMLの編集画面が表示されると思います。

先ほどのコードを「~」内に記載します。場所は直後が後からも見つけやすいので便利です。
screenshot_62

また「HTML名」は何でも良いですが、こちらもわかりやすい名前にすると管理がしやすいです。
screenshot_61

編集が完了したら忘れずに下部にある「保存」を押します。

最後にファビコンURLを追加したHTMLを適用すれば設定は完了です。自分のサイトを開いてファビコンが表示されているか確認しましょう。
screenshot_63

以上でSeesaaブログのファビコン設置は終了です。

まとめ

いかがでしたでしょうか。

個々に若干の差異はあるものの大方の流れは共通しているので、仕組みさえ理解できればどのサイトにも適用できると思います。

SNSでもご購読できます。