WordPressのプラグインを使って簡単にFaviconを設定する方法

WordPressで作ったサイトに誰でも簡単にファビコンを設定できるプラグイン

「Favicon by RealFaviconGenerator」を使ってファビコンを設定する方法をご紹介します

WordPressではFTPなどを使ってFaviconを設定する方法もありますが

今回はわたしみたいなWeb初心者でもすぐにできるためプラグインを使っています

ファビコンとは

下の図のようにWebサイトにアクセスするとブラウザ上に表示されるアイコン画像のことです

タブやURLの横、ブックマークのアイコン、スマホなどでアイコンとして表示されます

ファビコンがあることでサイトの視認性や信頼度が高くなります

ファビコン用の画像を用意する

通常だとファビコンは「.ico」のデータを用意する必要があるのですが

「Favicon by RealFaviconGenerator」では「.ico」を自動で作ってくれるので

サイズ「260×260ピクセル」の「.png」の画像データを用意してください

260×260の理由としては RealFaviconGenerator 様が推奨しているからです

https://realfavicongenerator.net/

ファビコンは小さい場所に表示されるので文字が入っていると

ブラウザ上には縮小されて表示されるため読めないですし

細かいイラストも崩れてしまう可能性があるので気をつけてください。

Favicon by RealFaviconGeneratorをインストールする

WordPressの管理画面から「プラグイン→新規追加」と移動

右上の検索ボックスに「Favicon by RealFaviconGenerator」と入力して検索後

プラグインをインストールして有効化します

ファビコン画像の設定

WordPress 管理画面から「外観→Favicon」と移動

ファビコン画像の設定画面が表示されるので「Select from the Media Library」をクリック

メディアライブラリ画面で用意しておいたファビコン画像をアップロードして「選択」をクリック

前の画面に戻って画像が指定されているので「Generate Favicon」をクリック

ファビコンの自動作成の画面表示後、編集画面が表示される

ファビコン画像の調整

編集画面ではそれぞれのデバイスでどのように見えるのかを調整できるので

見映えが良いようにそれぞれ変えていきます

編集画面の一番下まですすむと

Favicon Generator Optionという設定があるのでそちらでは

Compression = 画像の圧縮

Scaling algorithm = 拡大した時、縮小した時の見え方（ドット絵）

App Name = ホーム画面やタイル時に表示される名前

などが設定できます。

Compressionは基本的に変更の必要はありません

Scaling algorithmは見え方を確認出来るのでお好きなのにしてください

App Nameはデフォルトだとサイト名が表示されるのでご自分のサイト名が長い場合は短いものにしましょう

設定が終わったら最後に「Generate your Favicons and HTML code」をクリック

プログレスバーが表示されしばらくすると

「Favicon installed」という画面が表示されWordPressの管理画面に戻れば終了です

同じ画面に「Check your favicon」というボタンがあるのでこちらから

どのように見えるか確認することができます

ではまたー。