Gush2でファビコンを設定する方法とブラウザのキャッシュ削除【WordPress】

parts_1_rika_jpg
parts_1_rika_jpg

WordPressテーマGush2を利用してまして、ようやくfaviconを変えました。

行ったのは以下。

  • faviconの設定
  • ウェブクリップ(スマホでのブックマーク表示)
  • 設定後、確認の為のキャッシュクリア

特に、キャッシュの削除が色々手間取ったので備忘録として残したいと思います。

スポンサーリンク

favicon設定方法

↓元はコレ
favicon_icogush

↓コレにします

favicon_icotorapple

ファビコンにする画像を用意する

正方形の画像を用意。用意出来たら以下のサイトで『.ico』に変換します。


http://favicon.qfor.info/c/

16pxへのリサイズと、.icoへの形式変換が出来ます。

作成された.icoファイルを保存。名前は「favicon.ico」とします。

テーマファイルにアップロード

FTPソフトを利用してアップロードします。

アップロード先は、『gush2/images/favicon.ico』。

.icoファイルの作成時に同名にしてあるので、そのまま上書きしてしまいます。

以上で完成です!

ウェブクリップの設定

webclipcapture

サイトをホーム画面に追加したときのアイコンです。デフォルトだとWEBページのスクリーンショットが表示されます。

webclip用画像を用意しアップロード

webclip_png

デバイスによって表示サイズが異なるが、144×144以上のサイズにしておけば問題ないようです。自動で角が丸くなるので、その分を考慮して画像を作ります。

フォーマットは『.png』。名前は任意ですが、『webclip.png』にしておきます。

これをFTPソフトでアップロードします。場所は『gush2/image/webclip.png』でOK。

header.phpに追記

一行だけ追記します。

光沢のアリ・ナシを選べるようなので好きな方を追記してください。

僕の場合はこんな感じに、faviconに並べて入れました。

これで勝手に画像を呼び出してくれますので完成です!

ブラウザのキャッシュクリア

さて、実は一番苦労したのがここ。ファビコンの確認をしようとしても、キャッシュが残っているせいで中々更新してくれませんでした。

再読み込みをしても変わらない場合は以下をお試し下さい。利用環境はMac10.9です。

Internet Explore

IEは簡単。

ツール>インターネットオプション>閲覧の履歴【削除】でいけました。

safari

【通常のキャッシュ削除】

  • safariの環境設定>詳細>メニューバーに開発メニューを表示

これでメニューバーに「開発」と表示されます。

  • メニューバー>開発>キャッシュを空にする

(参考)nifty.com

safariを再起動して完了。ここまででファビコン変わらず。。。

【手動でキャッシュ削除】

Finderのメニューバー>「optionキー」押しながら「移動」>ライブラリ を開く。

ライブラリ/safari/webpageicons.db と開きます。「webpageicons.db」をゴミ箱へ放り投げればfaviconのキャッシュ削除完了です。

safariを再起動すれば新しいファビコンが読み込まれるはずです。

Google chrome

ファビコン

【通常のキャッシュ削除】

メニュー>履歴>閲覧データの削除。

これだけだと全く変化がありません。

【chromeを削ってみる】

アプリケーションからgoogle chromeをゴミ箱へ。

ライブラリ/Cashes/Google/Chrome/Default/Cashes/の中身を全削除!

ライブラリ/Google/の中身もついでに削ってやりました。

Google chrome再インストール。

これでもキャッシュは消えない。

【強制リロード】

強制リロード(スーパーリロード)なるものの存在を発見。

結局、chromeの更新ボタン長押しでキャッシュ治りました(笑)

chromeのバージョンによって若干操作が異なるようです。僕がやった環境はver39.0.2171.71です。

「更新ボタン長押し」か「shift+更新ボタン」でいけると思います。

まとめ

Google chromeが本気で手こずりました。

長らく格闘したあとに長押し1秒で決着。勉強になりました。

スポンサーリンク

ご購読ありがとうございます。