忘れがちなファビコンを設置して目立つサイトに替えよう！作成と設置方法を解説

こんにちは。YOSHIです。

今回はWordpressでサイトを立ち上げた際に、よく忘れがちなファビコンの作成と設置方法について解説していきます。

ファビコンとは

favicon（ファビコン）はブラウザのタブ欄やブックマーク、デスクトップのショートカットなどに表示されるアイコンです。

ファビコンは「Favorite icon（お気に入りのアイコン）」の略で、サイトのロゴをファビコンとして設定しているケースが多いです。

気に入ったサイトをブックマークしてると思いますが、ファビコンを設定していると、ユーザーも見つけやすくなるし、認知されやすくなります。

ファビコンを設置しているだけで、しっかりしたサイトと見られやすいよ

ファビコンのサイズ

ChomeやIEなどブラウザによって、推奨されるファビコンのサイズが異なります。

さすがに１つずつ作るのは大変なので、ジェネレーターを使って主要なサイズを準備します。

Canvaでファビコンを作る

ブロガーの間でよく使われているCanvaを使って、ファビコンを作ってみましょう。

ファビコンのサイズは、高画質なWindowsのサイトアイコンに対応した64px X 64pxに設定します。

作成工程を省きましたが、Life Leverageのファビコンはこんな感じに作りました。

完成した画像をPNGでダウンロードします。

余白部分をPhotoshopで切り抜く

複数の画像で「icoファイル」を作る

X-ICON editerを使ってicoファイルを作成しましょう。

X-ICON editerは、PNG画像を別々のサイズに加工して、複数の画像を「icoファイル」にしてくれるエディターです。

まずインポートを押します。

次にアップロードをクリックし、Canvaで作成したPNGファイルを選択します。

エクスポートする画像サイズを全てチェックし、OKをクリックします。

これで４種類のサイズの画像ができました。
次に「エクスポート」をクリックします。

「あなたのアイコンをエクスポート」をクリックします。保存先を選んでicoファイルをダウンロードしてください。

STORK(ストーク)にファビコンを設置する

完成したファビコンをSTORKにアップロードしていきます。

WordPressの左側にあるメニューの中から、「外観」＞「カスタマイズ」をクリックします。

カスタマイズ画面が表示されますので、「サイトロゴ・アイコン」をクリックします。

ファビコンをアップロードする項目が表示されました。
「ファビコン」と「IEファビコン」にX-ICONで作成した、icoファイルをアップロードします。

ファイルのような画像が表示されればアップロードが出来ています。

更新をしてタブを確認すると、ファビコンが表示されるようになりました。