WordPressによるファビコン等の設定方法

PC & Software

20190708

WordPressのダッシュボードからファビコンやアップルアイコンなどサイトアイコンの設定をしました。ファビコンの設定、以前は大変でした。ファイルフォーマットが特殊でICOを使用しないと表示されなくて、最近のブラウザではPNG、GIF、JPEGまでサポートしているらしいのですが、とにかく以前は ICO にするためにいろいろソフトやサイトを探し回った記憶があります。さらにアップルタッチアイコンだのアプリケーションタイルイメージだのが増え、それぞれ設定が必要で、でもなかなうまく表示されなくて四苦八苦しました。
それが今のWordPressでは512x512pixelのPNG画像を用意すれば、アッという間に設定終了なのでした。

512×512 pixelのPNG画像を製作する。

私の場合、画像はPhotoshopCCを使用して準備しました。
簡単に私の場合の手順を書き添えます。

  • ファイル→新規 で開いたBOXで幅512ピクセル高さ512ピクセルを入力し、作成ボタンを押す。
  • 背景色はヘッダーとかフッターで使用している色#40d1bdを使うので、カラーピッカーを表示させて#の後に 40d1bd を入力してOKを押す。
  • 編集→塗りつぶし で開いたBOXで内容を描画色にしてOKを押す。
    これで背景色で塗られた512×512ピクセルの画像ができました、
  • そこにロゴマークで使用しているCとRの文字をコピーしてきてレイアウトします。
  • 最後に ファイル→書き出し から PNGとして書き出し をして完成しました。
    ※一応作業後のファイルはPhotoshop形式で保存してあります。

WordPressでサイトアイコンの設定をする。

WordPressのダッシュボードを開いて、外観→カスタマイズ を選択します。

次に、サイト基本情報 を選択しサイトアイコンを選択を押して、512×512ピクセルのPNG画像をアップロード、画像選択。

サイト基本情報の公開ボタンを押して公開済みになったら設定完了です。

後は種々のブラウザやiPhonなどで確認してください。アッという間に全部表示されました。