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

キービジュアル

目次

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

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

faviconとは？

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

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

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

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

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

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

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

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

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

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

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

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

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

それでは～★

オトナ帝国では、昔のゲームなどの懐かしい体験ができる秘密基地を運営中。
浅草葦拠点では現在セールを実施しています。お部屋の詳細だけでも見てください～

著者: オトナゲーム帝国

ゲームとガジェットが好きなアラサー男子！ジャンル問わず好きなゲームを紹介しています。またフロントエンドエンジニアとしての学習内容も合わせて記載しています～