WordPressで運営されているホームページやブログの、ファビコンの設定を確認されたことはあるでしょうか。
ファビコンとは、ブラウザのタブやブックマークをした時に表示される、サイトのアイコンのことです。
通常、WordPressサイドバーの外観のカスタマイズより「サイト基本情報」より設定することができます。
独自で準備されたアイコンを「サイトの基本情報」から設定し、PCブラウザの画面上のタブで確認して「OK！」とされていることが多いと思います。
しかし、スマートフォンなどの別の端末の画面上でも確認されたことがあるでしょうか。
なんと、スマートフォンで確認したら背景が真っ黒のロゴになってしまっていて、綺麗に表示されていないということがあります。
実は、このファビコンは閲覧するOSやブラウザなどの環境によって表示のされ方が違うためそれぞれ設定をしなければならないのです。
WordPressのプラグイン「Favicon by RealFaviconGenerator」を利用すればいろいろな環境に向けたファビコンを簡単に設定することのできます。
「Favicon by RealFaviconGenerator」でファビコンを設定するにあたっては、設定したい画像ファイルの拡張子が「PNG」または「GIF」のファイルを準備する必要があります。
準備した画像の取得方法によりますが、保存の方法を変えて準備しましょう。
[Twitter:followme@EASILY_3]
Contents
「Favicon by RealFaviconGenerator」プラグインをインストールしよう
プラグインのインストールは簡単です。
WordPressのダッシュボードのメニューよりプラグイン＞新規追加をクリックします。
プラグインの検索欄に「Favicon by RealFaviconGenerator」と入力し検索します。
下記のプラグインが表示されますので、「今すぐインストール」をクリックし、インストールが完了しましたら「有効化」するのも忘れないようにしましょう。
[Twitter:followme@EASILY_3]
Favicon画像を作成しよう
プラグインのインストールと有効化が完了したら、WordPressのサイドバーの外観に「Favicon」が追加されているのでクリックしましょう。
ファビコンに設定する予定の画像をアップロードしましょう。
「Select from the Media Library」をクリックして画像を選択します。
選択したら「Generate favicon」をクリックしましょう。
アップロードした画像が問題なければ「Continuye with this picture」をクリックしましょう。
画像のアップロードが完了すると様々な環境ごとの画像設定をすることができます。
Favicon for iOS – Web Clip
iPhoneやiPad用などの「iOS」に表示されるアイコンに関する設定です。
「Setting」タブの「Add margins and a plain background」を選択することで背景の色やアイコンの大きさなど変更することができます。
Favicon for Android Chrome
Android端末に表示されるアイコンに関する設定です。
「Main settings」タブの「Add margins and a plain background」を選択することで背景の色やアイコンの大きさなど変更することができます。
Windows Metro
Windows 8及びWindows 10に表示されるアイコンに関する設定です。
事前に準備されている背景色から選択することになります。
macOS Safari
macOSのSafariで表示されるアイコンに関する設定です。
アイコンを設定しないこともできます。
その他の設定
「Favicon Generator Options」の「Compression」タブでは画像の圧縮を設定することができます。
「Scaling algorithm」では、設定するアイコンをピクセルアートのような見せ方をすることができます。
細かい設定なので、好みに合わせて設定してもいいでしょう。
それぞれの設定が完了したら、「Generate your Favicons and HTML code」をクリックしましょう。
[Twitter:followme@EASILY_3]
ファビコンの設定を確認しましょう
「Favicon installation in progress. please wait…」という表示の後に、ファビコンの設定が完了します。
それぞれのパターンのファビコンの表示を確認しましょう。
[Twitter:followme@EASILY_3]
プラグインであればとても簡単です
プラグイン「Favicon by RealFaviconGenerator」を利用すればファビコンの設定はとても簡単です。
色々なOSなどでの表示の確認も一度にすることができます。
細かいところではありますが、設定されてみてはいかがでしょうか。