PR

WordPressサイトでfaviconを設定

word press WordPress
記事内に広告が含まれています。

WordPressでのfaviconの初期設定

私が WordPress を立ち上げた時点では favicon はタマゴみたいなアイコンでした。Twitterの初期アイコンに似てるかもです。たぶん、WordPress のバージョンによって異なると思います。
以前からデフォルトのままだったのが少し気になっていたのですが、今回作成・設定してみました。

faviconの仕様

favicon を作成するにあたってまずはサイズを調べました。
管理画面から、[外観] – [カスタマイズ] – [サイト基本情報] と表示すると以下の様に書いてありました。

サイトアイコンはブラウザーのタブやブックマークバー、WordPress モバイルアプリで表示されます。ぜひアップロードしましょう。
サイトアイコンは512 × 512ピクセル以上の正方形にしてください。

512 x 512 って結構デカいっすね・・・もうそんな高解像度の時代なんすかねぇ。とりあえず、言われたとおりに作成してみます。きっと良い感じに縮小してくれるのでしょう。
ファイル形式は、一般的なPNGファイルに今回してみました。

faviconを作成

今回は Mac の Seashore という画像エディタで作成してみました。
App Store からダウンロードし起動。英語版しか無いかもですが触っていれば何とかなる感じでした。
起動すると新規作成画像のサイズを入力する画面が出てくるので、512 x 512 とします。あとは適当にお好みで作成。
保存形式は一旦はアプリ標準の .xcf にしておいて、完成したら PNG 形式で保存、これをアップロード用としました。ちなみにファイル名は何でも良さそうです(faviconv である必要無し)

faviconをWordPressに設定

アイコン画像は、WordPress の [メディア] – [ライブラリ] にアップしておきます。
その後、管理画面から、[外観] – [カスタマイズ] – [サイト基本情報] 画面で設定し、公開します。

設定後

設定後ページを表示すると、サイトアイコンがめでたく表示されました。
ソースを見ると 32 x 32 と 192 x 192 のアイコンが作られているようです。(Windows10 Firefox で確認)もしかしたら環境によって使い分けしてくれるかもです。

コメント

タイトルとURLをコピーしました