【ソース編集不要】WordPressでファビコンを設定する一番簡単な方法

このブログは、Wordpressを利用して書いています。
私はカラフルな色使いが非常に苦手なため、よくある感じの見栄えが綺麗なブログを構築するのは避け、いくつか試した無料テーマのうち、シンプルで分かりやすい「First」をほぼデフォルト状態のまま使用しています。
しかし、「ファビコンぐらいは設定しときたいな」と思い、やってみたら上手くできたので、備忘を兼ねてその方法を書き残しておこうと思います。

(※スクリーンショット画像内のブログタイトルが旧タイトル「発達障害グレーゾーン親子のブログ」のままになっていることにご留意ください。)

ファビコンというのは、ブラウザで開いたときにサイト名の横に表示される、小さな画像アイコンです。
デフォルト状態だとこんな感じなので、なんとも味気ないです。

せっかくなので発達障害ブログらしいファビコンを作ってみようと考え、自閉症スペクトラム(ASD)のシンボルである、色とりどりのパズルをデザインしたリボン(The Autism Awareness Ribbon、自閉症啓発リボン)からデザインを思いつきました。
【参考:アメリカ自閉症協会ウェブサイト(英語)

私は特に画像加工の知識も何も無いので、ペイントを使い、512×512ピクセルのサイズ(理由は後述)で5時間ほどかけてちまちま作成しました。
まあクオリティの雑な部分も含めてこのブログらしくていいな、ということで、こんな感じの画像が出来上がったので、ひとまずPNG形式で保存します。
(この画像はサンプルのJPEGです。なお、実際の.pngファイルは丸型アイコンなので、背景を透過させるために、無料ソフトの手軽に透明pngを使用させていただきました。)

さて、「Wordpress ファビコン 設定」で検索すると、やり方を詳しく解説しているサイトがたくさんあります。
多くのサイトで、「作った画像を.icoに変換する」「.icoファイルをWordpressにアップロードする」「テーマヘッダーを編集して貼り付ける」という手順が紹介されていました。
しかし、めんどくさいなあと思い色々調べていると、どうやら一番簡単に設定できそうな方法を見つけました。

まず、先ほど作った.pngファイルをWordpressにアップロードします。
管理画面の「メディア」→「新規追加」でファイルを選択するだけです。

次に、管理画面の「外観」→「カスタマイズ」に移動し、「サイト基本情報」をクリックすると、こんな画面が出てきます。

この「サイトアイコン」で、「画像を選択」をクリックし、先ほどアップロードしたアイコン画像を選択して「公開」をクリックすれば完了です。
画像を512×512ピクセルで作ったのは、ここでの推奨サイズに合わせるためでした。

これだけで、今現在表示されているファビコンが設定できました。

コードをいじる必要は一切なし。
これなら私レベルの万年初心者でもできました。

さて、Wordpressでは、投稿画面でブログ記事のURLをテキストで入力すれば、そのままリンクをブログカードで表示してくれますが、デフォルトではワードプレスのロゴが表示されます。
ブログカードというのはこういう四角いリンク表示ですね(※これはサンプル画像です)。

で、先ほどのサイトアイコン設定だけで、ブログカード内のアイコンも勝手に変更されました。

私が「発達障害」をネタにブログを始めた理由

なお、このブログではツイッターで記事がシェアされたときに、リンクがツイッターカードで表示されるように「JM Twitter Cards」というプラグインを使っています。
しかし、デフォルト状態だとツイッターカードにあの青い鳥の画像が表示されてしまうので、ついでにここもファビコンと同じ画像にしておきました。

これで無事、ファビコン、ブログカード、ツイッターカードの全てのアイコンをオリジナルの物に変更することができました。
実際やってみると簡単なので、ぜひ設定しておくことをおすすめします。

コメントを残す

メールアドレスが公開されることはありません。