【簡単!10分で出来た】ファビコン (favicon) を設定してみた

こんにちは、Joyful Dad です。
既に気付いている方もいるかもしれませんが、ファビコンを設定してみました。
せっかくドメインを取得してWordpressのブログを運用しているし、ファビコンぐらいあってもいいんじゃない? と思ったのがきっかけです。
初めて挑戦してみたんですが、思いのほか簡単にできたので、ファビコンの作成からWordpressサイトに表示する方法までを備忘録も兼ねて書きたいと思います。

スポンサーリンク
スポンサーリンク




設定の仕方

1.ファビコン画像を作る

ペイントなどを使って縦横16または32ピクセルの正方形の画像を作ります。
個人的には32ピクセル x 32 ピクセルが作りやすくてオススメです。
ファビコンはとても小さい画像なのでシンプルなデザインにするのが良いようです。

作ったファビコン

ちなみに、自分はこんな感じのファビコンにしてみました。
Joyful Dad だから JD。あぁなんて安直。

2.ファビコンファイルを作る

ファビコン(ファブアイコン)faviconを作ろう!。16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。作成したファビコンの画像はプレビューで確認できます。プロ仕様の詳細データ表示付き。

上記サイトに1で作成した画像をアップロードして、favicon.ico 作成ボタンをクリック。
画像ができたらダウンロードボタンを押してファイルを保存します。

3.ファビコンファイルをアップロードする

メディアに手順2でダウンロードしたファビコンをWordpressにアップロードします。
アップロードできたらファビコン画像のURLを確認しましょう。
ファビコン画像のURLはWordpress管理画面から 「メディア」 → 「ライブラリ」 で表示される一覧で対象のファイルを選択すると、ファイルの詳細画面が表示されます。そこのURL欄から確認できます。

ファビコンのURL

4.header.php の編集

header.php (※)に下記のタグを記述します。
“ファビコン画像のURL” は手順3で確認したURLに置き換えてください。
※ 自分はsimplicity2のテンプレートを使っているのでheader-insert.phpを編集しました。

<link rel="shortcut icon" href="ファビコン画像のURL">

5.表示を確認する

ファビコンの設置が終わったら、最後の仕上げです。
実際にファビコンが表示されるかサイトを表示して確認してみましょう。

Google Chrome と Internet Explorer で表示されていることが確認できました!
ファビコンの設定作業は以上で完了です。

=======================
ブログランキングに参加しています。
リンクをポチっと応援お願いします。😊

=======================

スポンサーリンク
スポンサーリンク




スポンサーリンク




シェアする

フォローする