「アイコンが変わらない！」原因はキャッシュ。safariのブックマークアイコンが更新できないのまじなんなの。
faviconやアアップルタッチアイコンを設定していて先日から気になってはいたものの、本日「safariのブックマークアイコンまじなんなの」が爆発しました！
その原因や解決策をご紹介します。
faviconとwebclipアイコンを設定してもsafariのブックマークのアイコンが更新されない
今回ぶちあたった問題がこちらです。
「更新されない」と表記していますが、そもそも元からアイコンがあって、アイコンの変更・リニューアルを前提としています。
既にfaviconやwebclipアイコンがあって表示されていて、それを新しく更新したい時の話です。
そもそもsafariのブックマークアイコンってなんだよ。
なんらかの形でユーザーがお気に入り・ブックマーク・ホーム画面に追加をするとアイコンが表示されるじゃないですか。
まあそれの一つで私が勝手にブックマークアイコンとか言ってるんですけど。
ブランディングに必要なサイトを表すアイコン
favicon.ico
faviconといえば、お気に入りしたときのサイト名の横に表示されたり、URL欄をクリックしたときに横に表示されるやつですよね。favicon.icoというファイルが表示されています。
これはファビコンって呼びますよね、それで良いですよね・・・
apple-touch-icon.png
ほんで、スマホとか操作しているとホーム画面に追加すると表示されるやつがあるじゃないですか。あれは、apple-touch-iconで指定した画像が表示されています。
それはwebclipアイコンですよね、ホーム画面のアイコンとか、そんな感じで言いますよね。
これですね。わたしの待ち受けはベルハーのみずほちゃんです。
では、safariでブックマーク登録時、お気に入り表示時に現れるアイコンは何者？これを仮にブックマークアイコンと呼ぶ。
ブックマークアイコンと呼んでいるものは、先ほどの二つ、faviconとapple-touch-icon（webclipアイコン）に当てはまるものだと思っています。
safariで、ブックマークに追加をする時・お気に入りを表示する時に表示される少し大きめのサイトアイコンのことを呼んでいます。
これです。
faviconとapple-touch-iconを更新しても、ブックマークアイコンだけ更新されない
で、それらの新しいファイルを制作後、アップロード。
何度かのリロード後、ホーム画面のアイコンや、URLの隣のアイコンたちはきちんと更新・変更されました。
しかし！唯一変更されなかったのが、先ほどお伝えしたとおりのsafariのブックマークアイコン！！
未だに変わってない。ホーム画面はちゃんと変わったのに。ブックマーク追加も、
お気に入り一覧も。
新規サイトを作った時はfaviconとapple-touch-iconさえあれば表示されたはずなので、絶対faviconかapple-touch-iconのどちらかで反映されるはずなんですが、、、
ファイルを上書き更新し、何度リロードをしてもこのアイコンだけは更新されませんでした。
アイコンサイズの原因か、アップロードする階層が原因かと思い、色々変更したり手を尽くして見ましたが、一向に変わりません。
ブックマークアイコンはどうやらwebclipアイコン（apple-touch-icon.png）で対応できるはずっぽい
こちらの記事によると、ブックマーク・お気に入り時の時のアイコンはアップルタッチアイコンになっています。
どうやらアップルタッチアイコンがきちんと設定されていれば表示される様子。
でもアイコンが変更されない、更新されないということは・・・何が原因なのか？
152*152、もしくは180*180となっているのでそれ用にサイズも変えて作っても・・・しかし更新されない。変更されない。
アップロード時の階層・ディレクトリのせい？
基本的にfaviconは一番上のディレクトリに「favicon.ico」でアップしておけば勝手に拾ってくれるはずです。
特別指定がなければヘッダーに指示を書き出す必要もない。
ちゃんとアップしてるし、更にヘッダーで指定もしている！！
サブドメインを使っていたから、ディレクトリのせいかと思ったけど、そういうわけでもないみたい。
どうやら原因はキャッシュだった
リロードもしたし、履歴も消したし、キャッシュも消したつもりでいたから、まさかキャッシュはないだろうと思っていたけど・・・どうやら原因はキャッシュだったようです。
他のところはちゃんと更新・変更がされていて、なんでお気に入りだけ・・・。
ということは、放っておいて大丈夫
安心してください。
キャッシュが原因なので、faviconやホームアイコンが表示されていればアイコンの設定はおそらく間違っていません。
ただし、ユーザーにどう見えてるかテストしたい場合にはとりあえずキャッシュを消したいですよね。
こちらのアイコンのキャッシュの消し方ですが、普通に履歴やキャッシュをクリアするだけじゃ消えない様子。
ブックマークアイコンのキャッシュのクリア方法
- Finderのツールバーにある「移動」を開いたら、「option」を押したままにします。
- すると普段は表示されない「ライブラリ」が現れるのでクリック。
- 「safari」のフォルダを開きます。
- 「Touch Icons Cache」の中の「WebpageIcons.db」というdbを一通り削除（shmやwalというものが何かよくわかりませんでしたが一緒に消しても大丈夫でした）
- これでも消えない場合「Touch Icons Cache」というフォルダの中の「Images」を開いてみてください。ここに、過去のアイコンがドヤ顔で存在しているはず！！！なのでそいつを削除してください！！！
４まではこちらの記事を参考にしました。ありがとうございます。
real.ty: Apple Safari のブックマークにファビコン（favicon）が正しく表示されないときどうするか？
これでも消えなかったのでファイルを探した結果、「Touch Icons Cache」の中に入っていたのでめちゃくちゃいらっとしましたｗｗｗお前（過去アイコン）こんなとこにまでいたのかよ、とｗｗｗ
はい！これでPCのアイコンのキャッシュはクリアできました。
以前からお気に入りしてくれてた人たちのアイコンが切り替わるのはいつなんだろう
さてこれで自分のキャッシュはクリアしたけれど。。。
以前からお気に入りしてくれてたユーザーはここまでしないですよね。
いつになったらアイコンが切り替わってくれるんでしょう・・・私にも謎です。知っている人いたら教えて欲しい。
ちなみに３日待っても変わってません。これは自然に切り替わるものなのか、不安にしかなりませんねｗｗｗ
さらにiPhoneでのキャッシュクリア方法はどうするのか
iPhoneでも設定画面からsafariを開き、キャッシュを全クリアしましたが、これでもアイコンのキャッシュは消せませんでした。
iPhoneでも同様にどこかにデータが残っているのかも。
ただ、ライブラリは操作も削除もできないし・・・
自然に切り替わってくれるのでしょうか。様子を見たいです。
追記：３ヶ月後くらいにiPhoneのブックマークアイコンも変わっていました。理由は見に覚えがありません…アップデート？
よろしければこちらもどうぞ
以上！！
ブックマークアイコンが変わらない原因はキャッシュ、でした。
