ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

WordPressでファビコンやアイコンを設定する方法

WordPressでファビコンやアイコンを設定する方法

ブラウザのタブやブックマーク、アドレスバー等にサイト名、ページタイトルの前に表示される小さな画像をファビコン、またはサイトアイコンと呼びます。ファビコンは、サイトのブランド認知を高めたりする効果もあります。ほぼ全ての著名なサイトはファビコンを備えています。

Chromeでのファビコン表示例

WordPressでは、ファビコンの設定が簡単にできるのが特徴の一つです。


スポンサーリンク

ファビコンのファイルフォーマットとサイズ

ファビコンのサポートするファイルフォーマットやサイズは、ブラウザの種類やバージョンによって異なります。最新のブラウザでは、PNG, GIF, JEPGなどもサポートしているのですが、古いバージョンのインターネット・エクスプローラではサポートされていない場合があります。そのため、ファビコンのファイルフォーマットは、古いバージョンのインターネット・エクスプローラでもサポートしているICOを使用することが普及しています。

ファイルのレゾリューションは、16×16, 32×32, 48×48, 64×64等があります。

ファビコンの仲間として、サイトをiPhoneなどでブックマークした時に表示されるアップルタッチ・アイコンがあります。アップルタッチアイコンのサイズは、端末の種類(iPhone, iPad)によって、58×58, 80×80, 152×152, 167×167, 180×180などに分かれます。

ファビコンやサイトアイコンの設定は、サイトのルートディレクトリにイメージファイルをアップロードし、headタグ内に<link rel=>で端末ごとに参照するイメージファイル名を指定する必要があります。または、サイズを一番小さい16×16、フォーマットをICOにし、共通で使用します。

WordPress 4.3以降は、ファビコンの設定が非常に簡単に行うことができる機能を備えています。

WordPress でのファビコンの設定の仕方

1. Photoshopやロゴ作成アプリで、画像サイズ512×512 ピクセルの画像を作成します。

2. ワードプレスの管理画面から[概観]の中にある[カスタマイズ]設定画面を表示します。(メニューバーからカスタマイズのショートカットでも構いません。)

カスタマイズメニューの上段にある[サイト基本情報]をクリックします。

WPカスタマイズのメニューからサイト基本情報をクリックします。

3. サイトアイコンの[画像を選択]または[画像の変更]ボタンをクリックして、ロゴのファイルをアップロードして選択します。(ファイル解像度は、512×512 ピクセルが推奨です。)

サイトアイコンの設定

右上の青の[保存して公開]ボタンを押します。以上で設定完了です。

ブラウザでサイトを表示してファビコンが設定しているか確認します。

クロームで表示すると以下の様にタブのサイト名の左にロゴが表示されます。

ブロギングライフ ファビコンのChromeでの表示例

Firefoxでは以下のように表示されます。(別のデザインのロゴです。)

ブロギングライフ ファビコンのFirefoxでの表示例

この様にWordPressでは、ファビコンの設定も非常に簡単にできます。

WordPressをご利用されているサイトでは、是非、ファビコン・サイトアイコンの設定を行うことをお勧め致します。

コメントを残す

*
*
* (公開されません)

Return Top