ファビコン(favicon)、サイトアイコン(apple-touch-icon)はWordPressなら簡単にできちゃう。

WEB制作

ファビコン(favicon)、サイトアイコン(apple-touch-icon)は、画像を作ってheadタグ内設置してとかやっていたけど、もうなんだかこんなことに時間掛けているのもバカらしいのでWordPressの標準機能使った方が、バージョンアップ時とかも対応してくれそうなので今後そうしよっかな。

以前はファビコンはしっかりドットをプチプチやって16px X 16pxのfavicon.icoファイルを作るのが楽しかったんだけど、ブラウザの種類や環境の種類が増え過ぎちゃったんでもうそういうのは今後はしないかな。いろいろなツールとかジェネレータがあるよね。

ファビコンって何?

ファビコンは、ブラウザでページを開いた際、タブに表示される小さなアイコンだよ。最近はスマホの「ホーム画面に追加」で追加されるアイコンもファビコンって言ってる人もいるみたいだけど。

あー、タブにあるやつね。あ、そっかiPhoneのアイコンにもなるやつ、サイト制作には必須じゃん。

昔からサイト作ってるからこだわる部分はあるよね、やっぱり。

まあサイトのアイコンとなるとやっぱりサイトの顔だから、しっかりキレイな状態で見せたいっていうのはあったけど、モニターがレティーナになったりしている今、ドットをプチプチやったところで意図した表示にならないからね。

WordPressに簡単に作れる機能、あるよ!

こだわる人は別として、かなり簡単なので説明します!

結構わかりづらい場所にあるよ。

WordPress管理画面の「外観」から「カスタマイズ」をクリック。

「サイト基本設定」をクリック。

512px X 512pxの画像を作成して、「サイトアイコンを選択」をクリックして画像を選ぶ。

プレビューが出てくるので、確認して問題がなければ「公開」をクリック。

するとファビコンが表示された!上はMacのグーグルクロームで、

こちらはWindowsのIE11。まったく問題なし。

同時にスマホのサイトアイコンも!

このWordPressの標準機能の何がスゴイって、iPhoneとかスマホのサイトアイコンも同時に書き出すところがいいんだよ。

一つ作ればそれようにすべて書き出ししてくれるんだね。

いつものように下の真ん中をクリック。

「ホーム画面に追加」してみよう。

どうやらちゃんと表示されているみたい、よかった。テストも含めてこのままホーム画面に登録しますね。

うまくいったね。

やっぱり「ホームに追加」をしてサイトのアイコンが携帯に登録されると、自分のサイトなんかは特に「いいなー」って思っちゃうね。

もちろん、ファビコンとかサイトアイコンはサイトの顔なので、自分で細かく設定するのもアリだと思うけど、WordPressの標準機能が便利過ぎるので、サイトをバンバン作るのであれば利用したいですね!!