こんにちは。YOSHIです。
今回はWordpressでサイトを立ち上げた際に、よく忘れがちなファビコンの作成と設置方法について解説していきます。
ファビコンとは
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/saulo-mohana-77106-unsplash-2-1024x681.jpg?resize=728%2C484)
favicon(ファビコン)はブラウザのタブ欄やブックマーク、デスクトップのショートカットなどに表示されるアイコンです。
ファビコンは「Favorite icon(お気に入りのアイコン)」の略で、サイトのロゴをファビコンとして設定しているケースが多いです。
気に入ったサイトをブックマークしてると思いますが、ファビコンを設定していると、ユーザーも見つけやすくなるし、認知されやすくなります。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/favicon_img-1024x239.png?resize=728%2C170)
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/shiranui.png?resize=150%2C150)
ファビコンのサイズ
ChomeやIEなどブラウザによって、推奨されるファビコンのサイズが異なります。
さすがに1つずつ作るのは大変なので、ジェネレーターを使って主要なサイズを準備します。
- 16px X 16px:IEのタブ
- 24px X 24px:IE9ピン留め
- 32px X 32px:Chrome,Safari,Firefoxのタブ
- 48px X 48px:Windowsのサイトアイコン
- 64px X 64px:高解像度のWindowsのサイトアイコン
Canvaでファビコンを作る
ブロガーの間でよく使われているCanvaを使って、ファビコンを作ってみましょう。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/スクリーンショット_2018-08-30_23_35_27-1024x542.png?resize=728%2C385)
ファビコンのサイズは、高画質なWindowsのサイトアイコンに対応した64px X 64pxに設定します。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/スクリーンショット_2018-08-30_23_36_56-1024x542.png?resize=728%2C385)
作成工程を省きましたが、Life Leverageのファビコンはこんな感じに作りました。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/スクリーンショット_2018-08-30_23_38_11-300x291.png?resize=300%2C291)
完成した画像をPNGでダウンロードします。
余白部分をPhotoshopで切り抜く
複数の画像で「icoファイル」を作る
X-ICON editerを使ってicoファイルを作成しましょう。
X-ICON editerは、PNG画像を別々のサイズに加工して、複数の画像を「icoファイル」にしてくれるエディターです。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/スクリーンショット_2018-08-30_23_45_35-1024x651.png?resize=728%2C463)
まずインポートを押します。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/スクリーンショット_2018-08-30_23_45_47-1024x657.png?resize=728%2C467)
次にアップロードをクリックし、Canvaで作成したPNGファイルを選択します。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/スクリーンショット_2018-08-30_23_46_00-1024x637.png?resize=728%2C453)
エクスポートする画像サイズを全てチェックし、OKをクリックします。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/スクリーンショット_2018-08-30_23_46_12-1024x649.png?resize=728%2C461)
これで4種類のサイズの画像ができました。
次に「エクスポート」をクリックします。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/08/スクリーンショット_2018-08-30_23_46_21-1024x640.png?resize=728%2C455)
「あなたのアイコンをエクスポート」をクリックします。保存先を選んでicoファイルをダウンロードしてください。
STORK(ストーク)にファビコンを設置する
完成したファビコンをSTORKにアップロードしていきます。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/09/スクリーンショット_2018-09-02_12_00_13-300x210.png?resize=300%2C210)
WordPressの左側にあるメニューの中から、「外観」>「カスタマイズ」をクリックします。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/09/スクリーンショット_2018-09-02_12_00_37-300x286.png?resize=300%2C286)
カスタマイズ画面が表示されますので、「サイトロゴ・アイコン」をクリックします。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/09/スクリーンショット_2018-09-02_12_01_10-2-1024x641.png?resize=728%2C456)
ファビコンをアップロードする項目が表示されました。
「ファビコン」と「IEファビコン」にX-ICONで作成した、icoファイルをアップロードします。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/09/スクリーンショット_2018-09-02_12_02_03-1024x689.png?resize=728%2C490)
ファイルのような画像が表示されればアップロードが出来ています。
![](https://i0.wp.com/lifeleverage.net/wp-content/uploads/2018/09/スクリーンショット-2018-09-02-12.09.49.png?resize=586%2C198)
更新をしてタブを確認すると、ファビコンが表示されるようになりました。