faviconの作成と設定方法【html設定】

キービジュアル

目次

こんにちは、オトナ帝国です。

今回はfaviconの設定についてまとめていきます。みなさん、favicon設定していますか?

faviconとは?

サイトのシンボルマークみたいなものですね。ちなみにfavorite icon(和訳:お気気に入りのアイコン)略してファビコンです。

あるとないとでは少し印象が異なりますね。

オトナ帝国サイトでももちろんありますね。サイト上の左上だったり、下記の画像では隠していますがブックマークのところだったりに表示されます。

サイト上の左上

逆に設定がない場合、空の表示になって少しユーザーに大丈夫かな、このサイト、って感じで少し不安を与えることにもつながります。ですので、正しく設定しておきたいですし、なるべくロゴのようなユニークなものであるほうが好ましいといえます。

faviconに設定する画像サイズは

faviconのサイズは基本的に32 × 32で充分かと思います。もちろん16 × 16を用意したり、48px × 48pxも併せて用意してマルチアイコンにしてもいいのですが、まぁそこまでしなくてもいいのかな、が業界スタンダードな気がします。

スマホのショートカット用で180px x 180pxも要したほうがいいということもあるのですが、、、う~ん残念ながらオトナ帝国本サイトのレベル感なら・・不要かな・・と思ったりしております・・!

faviconの設定方法

htmlのhead内に下記を記載するのみです。

<link rel=”icon” href=“https://otona-teikoku.com/favicon.ico” />

favicon画像はルートディレクトリ(ドメイン)の直下に置きます。 理由は、ルートディレクトリ以外の階層にあるfavicon画像は一部のブラウザで読み込めないため、注意が必要です。

これをWordpressであればheader.php内にも追記する必要があります。

最後に

たまにWordpressテーマが同じなのか、いくつかのサイトで同じファビコンだったり、Wordpressのデフォルトアイコンになっているサイトも存在します。

正直、そんなに気にするものか、と問われると設定されていると気になりませんが、設定されていないとめちゃくちゃ気になります・・!

そんなに難しくないのでユニークなものを設定することをお勧めします。変な不信感を与えないためにも、ですね。

それでは~★

カテゴリーから記事を探す