WEBサイトをブラウザで見たときに、タブの左側に表示される小さなアイコンを「ファビコン」と言います。
今回はこのファビコンを手軽に作成できるサービスはもちろん、WordPressからAppleタッチアイコン（apple-touch-icon）として指定する方法までまとめてご紹介しますので、ぜひ参考にしてみてくださいね★
目次
Appleタッチアイコン（apple-touch-icon）とは何か？
Appleタッチアイコンとは↓こんなアイコンです。
iPhoneやiPadのホーム画面に表示したり、WEBサイトをお気に入り追加したときにわかりやすく表示されるものなので、ブログを始めるときには作成しておくと良いです。
ファビコンの作り方とAppleタッチアイコンの指定方法
さきに大まかな流れをざっとまとめておきます。
- ファビコンの元となる画像を用意する
- ファビコンジェネレーターで、ファビコン、IE用ファビコン、Appleタッチアイコン形式の画像を生成する
- WordPressの場合、テーマカスタマイザーやプラグインを使って画像をアップロードする
1つずつ見ていきましょう。
❶ファビコンの元となる画像を用意する
Appleタッチアイコンに必要なのは144×144ピクセルの画像です。
ただ、IE用にもファビコンを指定するなど、ファビコン管理をまとめてやっておきたい場合は以下の3点の画像を用意しておきます。
| 画像形式 | サイズ（ピクセル） | |
|---|---|---|
| ファビコン | PNG | 32×32 |
| IE用ファビコン | ICO | 16×16 |
| Appleタッチアイコン | PNG | 144×144 |
ファビコン、IE用ファビコン、Appleタッチアイコンはそれぞれ別々の画像を用意してもいいんですが、今回は（管理がめんどうなので😅）同じ画像を使う前提で進めます。
つまり、元となる正方形の画像が1つのあれば良いわけです。
❷ファビコンジェネレーターで必要な形式の画像を生成する
次に「アイコン コンバータ」を使って、ファビコン、IE用ファビコン、Appleタッチアイコン形式の画像を生成します。
❶で用意した元画像を「アイコン コンバータ」からアップロードすれば、必要な形式とサイズのファビコンを自動で生成してくれます。
あとは使いたいものだけ選び、DownloadすればOKです。とても簡単ですね♪
Appleタッチアイコン用の画像だけ欲しいときは、PNG形式の144×144サイズのものを選びます。
❸テーマカスタマイザーやプラグインを使って画像をアップロードする
ファビコン画像を表示させるには本来、ソースコードの<head>内に
<link rel=”apple-touch-icon” sizes=”144×144″ href=”apple-touch-icon.png”>
のようなタグを入れていかないといけないので面倒なんですが、WordPressだと管理画面からファビコン画像をアップロードするだけで、タグの生成もすべて自動でやってくれます。
WordPressでファビコンを管理するには、専用のプラグインを使う方法もあるんだけど、「STORK」テーマを使えばカスタマイズメニューからさくっと設定できるので、今回はSTORKでの管理方法をまとめていくことにします。
STORKでのファビコンを管理する方法
管理画面から「外観」>「カスタマイズ」と進んで、
「サイトロゴ・アイコン」というメニューをクリックします。
すると、以下の4つの画像をアップロードできるようになっているので、
- ロゴ画像
- ファビコン画像
- IE用ファビコン（.ico）
- アップルタッチアイコン
❶❷で作成したファビコンを「ファビコン画像」「IE用ファビコン（.ico）」「アップルタッチアイコン」にそれぞれ当てはめていけばOK。
最後に、画面左上の「公開」ボタンをクリックすれば設定完了です。
Appleタッチアイコンが反映されない場合
上で紹介した手順で、アップルタッチアイコンが指定できていれば、iPhoneのお気に入り画面などのアイコン画像が上書きされるはずです。
…が、なかなかすぐに変わってくれないことも多いようです。
Safariのキャッシュを消去する
iPhoneのSafariに残っているキャッシュがクリアされていないと、新しいアイコンが反映されなことがあります。
iPhoneの「設定」>「Safari」と進んで、「履歴とWebサイトデータを消去」から消去してみましょう。
プライベートブラウズにしたり、Wifi→4Gに切り替えてみる
履歴とWebサイトデータを消去しても表示が変わらない場合は、プライベートブラウズでアクセスしてみたり、通信をWifiから4Gに切り替えてアクセスしてみましょう。
しばらく時間を置いてみる
何をやっても変わらない場合は、あきらめて待っていればOKですw
そのうち勝手に上書きされていますので、とくに心配する必要はありません♪
最後まで読んでいただき、ありがとうございました★
