ファビコンとはブラウザのタブやナビゲーションバー、ブックマークリストや検索履歴などに表示される小さなアイコンです。
今回新しくこのサイトを作成したので、このサイトのファビコンを作成と設置をしたのでそれぞれの方法を書き残していきます。
ファビコンの作成と設定方法
ファビコンの作成
Adobe Illustrator
ファビコンの作成する方法は様々な方法がありますが、今回は初めてAdobe Illustratorを使って作ってみました。
パッと思いついたのが、旅行に行く際にいつも使っているスーツケースをモチーフにしたアイコンを作ってみました。
Supremeのステッカーを貼っていたのですが、なんか著作権とかよくわからなかったので無難に自分の他のブログのサイト名をステッカーにしてみました。
イラレを初めて使ったので試行錯誤しながら作成しましたが、まずまずの出来なんではないかと。
ファビコン画像のサイズとファイル形式
ここで注意しておかないといけないのが、ファビコン画像のサイズとファイル形式です。
これを間違えて作るとファビコンがうまく表示されないので気をつけましょう。
- 画像サイズ：512 × 512 px以上
- ファイル形式：ico
PNGからicoへの変換はこちらのサイトを使うと簡単です。
- 「変換する画像を選択する」のボタンをクリックし、画像を選択。
- 作成するサイズを指定（全てのサイズをチェックしてOK）
- 画像を変換するをクリック
- ダウンロードをクリック
ファビコンの設定方法
ファビコン画像を作成したらサイトアイコンにアップロードします。
WordPressの管理画面から外観→カスタマイズ→サイト基本情報→サイトアイコンでアップロードした画像を選択すれば完了。
しかし、ファビコンの画像をアップロードができずエラーメッセージが表示されます。
ここからは少し難しいですが、がんばりましょ。
wp-config.phpに追記する
wp-config.phpに一文を追記すると画像をアップロードすることができます。
define('ALLOW_UNFILTERED_UPLOADS', true);FTPサーバへアクセスしてwp-config.phpファイルを編集します。
エックスサーバーだとファイルマネージャーからログインします。
最悪のケースに備えて、wp-config.php はバックアップを取ってから修正します。
これ失敗すると最悪ブログが見れなくなるので注意が必要です。
wp-config.phpファイルのわかりやすいところ（一番下）に記述して、画像をアップロード。
無事アップロードできたら追記した１行を削除し、元の状態に戻しておきます。
テーマファイルを直接編集する人が難しい人
テーマファイルを直接編集する人が難しい人はプラグインを利用すると便利です。
私は使ったことないですが、Favicon Rotatorというプラグインを使うとできるみたいなのでこちらの記事を参考にしてみてください。