WordPressサイトにファビコンとウェブクリップアイコンを設定する！

こんにちは。もちきんです。

前回の記事で、ファビコンを設定するにあたり、脱線しまくって様々なゲーム会社のファビコンをご紹介しました。

気を取り直して今回は、実際にファビコンを制作、設定してみたいと思います。

本サイトはWordpressを利用して制作しているので、Wordpressでの設定方法となります。ご了承ください。

ファビコンって何？って方は、前回の記事をご覧ください。

ファビコンのことを考えてたら、いつのまにかゲーム会社のファビコンをひたすら調べていた。

設定する場所はここだ！

（PC）ブラウザのタブ部分に出てくる画像

（スマホ）ホーム画面やお気に入りに設定すると出てくる画像

こちらはウェブクリップアイコンといいます。

現在、どちらも未設定の画像ですが、設定してないと超ダサいんです。

こんなはずじゃなかった、って感じなんです（自分的に）。

（じゃぁ早くやれよ、って話ですが）

画像を準備しましょう

画像を準備します。
ファビコンは16×16pixelが一般的ですが、ウェブクリップアイコンはスマホやタブレットのサイズによって違いがあるのは皆さんお気づきかと思います。
さらに、ファビコンは一般的に[.ico]という拡張子のファイルでないと設定できず、対してウェブクリップアイコンは[.png]ファイルが一般的です。

同じ画像データにする場合、いくつもつくるの面倒じゃね？

と思ってしまいました、わたし。

そんな時はWordpress側で自動変更してくれるプラグインがあるのこと！

『Favicon by RealFaviconGenerator』

一番大きいサイズ（260px×260px）を準備しておけばファビコン用に変換したり、各端末ごとにリサイズしてくれるということなので（便利！）、
何も考えずに260×260pixelのPNGファイルを作成しました。

WordPressに設定する(プラグイン使用)

作成したファビコンをWordpress内に設定します！

まずはプラグインをインストールします。

『Favicon by RealFaviconGenerator』

1.プラグイン > 新規追加 より
「Favicon by RealFaviconGenerator」を検索し、「今すぐインストール」をクリック

2.「プラグインを有効化」をクリック。これでプラグインがインストールされました。

3. 左メニュー 設定 > Favicon　より
Appearance > Favicon をクリック

4.①ファイルを選択し、②Generate faviconをクリック。

5.iOSやAndoroidなど端末によって見え方が違ってくるファビコンやウェブクリップの設定をそれぞれ決めることができます。最後まで設定したら「生成」をクリックでWordpressに戻ります。

6. これで設定は完了！

ひとつのファイルをアップするだけで最適化してくれるプラグインはとても便利ですね。

サイトに愛着がわくので、独自サイトを持っている方は是非設定してみてくださいね。