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

今回はWordPressの自分のサイト(ブログ)にファビコンを設置する方法を紹介します。これを設置する事で作業中に自分のサイトが見つけやすくなりますし、お気に入りやブックマーク等に登録してもらった時に個性を発揮する事ができます。

スポンサーリンク

ファビコンとは?

ファビコンっていうのはサイトのシンボルマークとなるアイコンです。私のこのサイトの場合はこのように表示されてます。

ファビコン-1

このように自分のサイトを開いた時とか、お気に入りやブックマークしてもらった時にはこのアイコンが表示されるようになっています。

沢山のタブを開いた時とか見つけやすいでしょ?自分にも訪問者にとっても意外と便利なので今回はこのファビコンを設置する手順を紹介しようと思うのですよ。

ファビコン設置の前準備

ファビコンを設置するためにはファビコンに使う画像を用意する必要があります。実際に表示されるファビコンサイズは「16px」×「16px」ですが、準備する画像はこのサイズでなくてもOkです。

ただし、大きい画像は縮小されて16pxの正方形の画像になりますので、できるだけ正方形の画像を用意する事で縦横比が均等に縮小されます。

私の場合はフリー素材から探してきたアイコンを使わせてもらっていますし、私が運営する別のサイトでは「ペイント」を使って自分で作ったサイトもあります。この辺はお好みで画像を用意しておいて下さい。

それから設置には子テーマの「header.php」を編集しますので、子テーマに「header.php」を追加しておいて下さい。

ファビコン設置の手順

先にファビコンの設置の手順を簡単にまとめておきますね。

  1. ファビコン用画像を用意する
  2. 画像ファイルをファビコン用のファイル形式「.ico」に変換
  3. WordPressに変換した画像をアップロード
  4. 画像のURLを子テーマの「header.php」に追加

このような流れで作業をしていきます。

画像ファイルを「.ico」に変換

ファビコンを設置する場合には普通の画像ファイルではなくて「.ico」というファイル形式に変換する事が必要です。そのため、画像を用意したらまずはこの画像をファビコン用の画像に変換しましょう。ファビコン用画像への変換はこのサイトでできます。
FavIcon from Pics

このサイトで簡単にファビコン用の画像変換ができます。まずはこのサイトで「ファイルを選択」し、「Generate Favlcon.ico」をクリックします。

ファビコン-2

使いたい画像が表示されている事を確認して「Download Favicon package」をクリック。

ファビコン-3

これでファビコン用に変換した画像をダウンロードできます。ダウンロードしたファイルを開いてみると複数のファイルがあると思いますがこのうち「favicon」というのを使いますので、ファイルの場所を覚えておいて下さい。

もしくはこのファイルだけデスクトップに移動しておいてもいいです。これをWordPressにアップロードします。

ファビコン-4

WordPressに変換したファビコン画像をアップロード

WordPressの管理画面から「メディア」⇒「新規追加」をクリックして先ほどの「favicon」というファイルをアップロードします。アップロードしたら画像の「編集」をクリックしてこのファイルのURLをメモ帳などにコピーしておきます。

ファビコン-5

子テーマの「header.php」にファビコン画像を追加

先ほどコピーした画像ファイルのURLをこのコードの中に入れます。

<link rel="shortcut icon" href="http://画像URL" />

そして出来上がったこのコードを子テーマの「header.php」の内に入れれば完成です。内であればどこでもいいですが、超重要という物ではないので、私はの直前に入れてます。

ファビコン-6

以上でWordPressにファビコン設置は完了です。ファビコンが変わらない場合は「Ctrl」と「F5」を一緒に押してリロードしてから確認してみて下さい。

WordPressにファビコンを設置する方法”に3件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    アキ様

    コメントありがとうございます。個別記事でファビコンが表示されないという事だと思うのですが、ヘッダー部分(header.php)にファビコンを設置するコードがあれば表示されるはずなんですが、キャッシュとかプラグインの影響とか色々な原因が考えられます。なので、次の点を試してみて下さい。

    1.別のブラウザで確認。
    2.プラグインを停止してから確認(別のブラウザでも確認)。

    以上2点を試してみても改善しない場合にはサイトのURLを教えて下さい。どうぞよろしくお願い致します。

  2. アキ

    質問失礼します!
    ファビコンの設定をしたのですが書いた記事をクリックし飛ぶとファビコンが消えています。
    ホーム画面にはある状況です。
    解決策を教えていただきたいです。よろしくお願いします。

  3. 乃風

    ファビコン、こんなのがあったのですね。その設定、うまくいきました。よかったです。
    画像を選ぶだけで、1日かかってしまいました。でも、なんかすごく楽しかったです。

    ムームードメインに関する下記の内容が不適切なら、公開時に消去してくださいね。
    今日、ムームードメインを運営するGMOペパボ株式会社のWiMAXサービス
    「PEPABO WiMAX」から、お得なキャンペーン情報のメールを受け取りました。
    しげぞうさんのところにも来ました? しげぞうさんも「PEPABO WiMAX」を
    されるのでしょうか?

    その内容としては、最大22,500円のキャッシュバックがあって、今月は月額利用料金も
    さらにお安くなっているそうです。通常のキャッシュバックにくわえ、今月は
    価格.comオリジナルの11ヶ月間の月額割引を実施中だそうです。

    一見、いいお話のような気もするのですが、とにかく初心者なため、なんだかよく分からず、
    しげぞうさんはどうされるのかと思って、コメントさせていただきました。