WordPressおすすめFavicon素材とプラグイン

どーでもいいようで実は結構気になる、favicon。
これは何かというと、サイトを開いた際、タグの部分によく画像がありますよね。例えばこんな奴。

これはGoogleさんを開いた際にブラウザタグに画像がついてます。
これがfaicon。

やっぱり、サイトの顔とも言うべき所というか、ブックマークにされたときなど画像無しは流石に恥ずかしい。
ということで、自分のサイトにfaviconを入れちゃいやしょう。

その前にFaciconのおすすめ素材集を紹介

faviconを入れたいけど、作るのもめんどくさいって方、どの素材集を使えばいいのか迷っている方、おすすめの素材集サイトがありやす。

ここって何がいいって言うとカテゴリで好きな素材をすぐに選べられるし、ダウンロードも簡単。
何と言っても、スマホにも適している、そしておシャレで種類が豊富。

私のサイトもここから素材をもらってきてます。
お好みでサイトにあった素材を引っ張ってきてください。

faviconプラグインも結構多く出回っていますが、使いやすさと簡易さでこの２つを紹介します。

この２つのプラグインはどちらもつかってて、便利で設定も楽なプラグインです。

Favicon Rotatorは見た目もシンプルで楽なプラグインです。
設定順はこんな感じです。

設定画面

このプラグインは初心者でも簡単に設定ができるのでおすすめです。

All in one faviconではもっと詳細にというか、サイトの管理画面にもfaviconを設定したい方におすすめです。

また、この設定画面では拡張子（ICO、GIF、PNG）でそれぞれ画像をアップロードできます。

これを前提に設定手順はこうなっちゃいます。

設定画面

プラグインを入れて、設定をしても反映されない方は直接画像のアップロードをおすすめします。

このサイトもなぜか、スマホホーム画面設定でうまくアイコンを表示できなくて困ってました。

原因はこのサイトのテーマで使用しているstingerか、レンタルサーバーで使用しているエックスサーバなのか分かりませんがうまく反映してくれませんでした。

あんまり難しく考えるのもめんどくさいので、直接画像をアップすることにしました。

エックスサーバでのアップロード手順ですので、それぞれお持ちのレンタルサーバに置き換えてください。

/hogehoge.com/public_html/wp/wp-content/themes/サイトのテーマ/images/

サブドメインの場合

/hogehoge.com/public_html/サブドメインのディレクトリ/wp/wp-content/themes/サイトのテーマ/images/

※アップロードするファイルは同じ名前にした方がよいです。その後の設定をしなくていいので。

PC
rogo.ico

スマホ
apple-touch-icon-precomposed.png

こんな感じで簡単にfaviconが設定できるのでお好みで試してみてください。

それでは！

ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ（VPS）を利用しましょう！
実務経験はVPSで学べます。