ファビコンを設定するのって意外と大変なんですよね。ファビコン用の画像を作成するだけでなく、少し特殊な形式「.ico」の画像も用意しなければいけない。
もっと手軽に設定したいとお考えの方は、WordPress（ver4.3以降）に標準で備わっているサイトアイコン設定機能を使ってみましょう。
この機能を使用すれば、画像を「.ico」形式に変換せずとも、簡単にファビコンを設定できます。当記事では、サイトアイコンの設定方法について解説しますので、ぜひ参考に設定してください。
WordPressのサイトアイコンの設定方法
この機能はどのテーマでも使用できますので、まずは、サイトアイコンの設定に必要な画像を用意します。下記の条件を満たした画像を作成しましょう。
画像サイズ：512×512px
画像形式：PNG
今回は、下記のサンプル画像を用意しましたので、こちらを使って設定していきます。
サイトアイコンに画像を登録する
2024年4月2日にリリースされたWordPress 6.5 では、「一般設定」内に「サイトアイコン」の設定箇所が設けられていますので、そこから設定可能です。
WordPress 6.4 以前のバージョンをお使いの方は、以下の手順を参考にご覧ください。
WordPressの管理画面の外観 > カスタマイズを選択します。
次に「サイト基本情報」を選択します。
サイト基本情報内の「サイトアイコンを選択」ボタンを押して、作成した画像を設定しましょう。画像を設定すると、下記のようにプレビューが表示されます。確認したら、画面上部の「公開」を押して設定完了です。
サイトアイコンの表示を確認する
設定後は、ブラウザのタブ等でサイトアイコンの表示を確認しましょう。ここで、配色の変更やロゴ等の位置調整が必要と感じたら、画像を修正して再度アップロードしましょう。
もし配色に迷ったら、下記で紹介しているツールを参考にしてもいいですね。サンプル画像もカラーツールの配色をそのまま使用しています。
あなたは色を決める時、どのように検討を重ねているでしょうか。そして何を決め手に最終的な配色を決定しますか？この記事では配色を検討する時に便利なツールとなんか垢ぬけない印象の配色となってしまいがちな理由について書いていきます。日々のヒントとして参考にしていただけたら嬉しく思います。 カラ...
WordPressのサイトアイコン機能の注意点
サイトアイコン設定機能を使えば、手軽にファビコンを設定できますが、「.ico」形式の画像を設定できません。また、出力されるタグは下記の4つで固定になります。
<link rel=”icon” href=”…image-32×32.png” sizes=”32×32″ />
<link rel=”icon” href=”…image-192×192.png” sizes=”192×192″ />
<link rel=”apple-touch-icon” href=”…image-180×180.png” />
<meta name=”msapplication-TileImage” content=”…image-270×270.png” />
上記でも十分なのですが、古いブラウザへの対応が必要な方やより多くの画像サイズを用意したい方は、別の方法で画像を登録する必要があります。下記にファビコンを手軽に設定できるプラグインを紹介してますので、こちらを試してみても良いかもしれません。
あなたはWebサイトにファビコンを設置していますか？ファビコンがWebサイトの運命を握るほど重要なものではないものの、ワンポイントとしての役割があるものなので、ぜひ設置しておきたいものです。 本稿でご紹介するのはWordPressで簡単にファビコン・タッチアイコンを設置できるプラグイン「Fav...
コメント