1分で完了!ファビコンの設定方法

上記のようにファビコンを設定したい人向けにWordPressでのファビコンの仕方をご紹介します。

1. ファビコンの設定手順
2. ファビコンのサイズ
3. 作成の方法

ファビコンとは

ファビコンとはブラウザで開いた時に上記のようにタブやアドレスバー表示される小さなアイコンのことです。

favorito(お気に入り)に表示されるicon(アイコン)の造語：favicon(ファビコン)

ファビコンを設定しておくと、読者がページを複数開いている時も見つけやすくなります。

ファビコンの設定手順

WordPressのダッシュボード画面から「外観」→「カスタマイズ」をクリックします。

カスタマイズ画面から「サイト基本情報」と進みます。

「サイトのタイトル」と「キャッチフレーズ」の表示される必要な情報を入力し、「サイトアイコンを選択」からアイコンをアップロードします。

上記のように表示されたのを確認します。

「公開」をクリックしたら完了です。

Canvaで丸いファビコンの作成方法

今回はイラストイラストを使ってCanvaを使っていきます。
無料で誰でもできるのでオススメです。

1. Canvaを登録・ログインする
2. デザインを作成する
3. ダウンロードする

「無料で登録」しログインします。

「デザインを作成」をクリックしカスタムサイズ(512×512px)で「新しいデザインを作成」します。

カスタムサイズはCocoonの設定で512×512pxが推奨されています。
お使いのテーマに合わせたサイズで作成してください。

左側の「素材」をクリックし、「丸」を選択します。

中央の画面に丸いオブジェクトが現れます。
四角を枠いっぱいまでクリックしながら引っ張りサイズを合わせていきます。
カラー変更は上のカラーをクリックするとパレットは表示されるので、そちらからお好みのカラーを選択します。

左端の「ファイルをアップロード」から準備した背景透過pngファイルをアップロードします。

アップロードが完了後、左側に表示されます。
選択すると右側の画面に表示されます。

こちらも同様にお好みのサイズに合わせます。

右上の「共有」をクリックし、「ダウンロード」します。
その時にpngで保存してください。

これで丸いアイコンの完成です。
あとは、出来たpng画像をWordPressのカスタマイズで設定してください。

WordPressでのカスタマイズが表示されず真っ白な方はこちらを参考にしてみてください。

あわせて読みたい

5分で解決！Word Pressのカスタマイズで何も表示されない時の対処法 Word Pressでのカスタマイズ画面で何も表示されない時の対処法をご紹介します。「カスタマイズが表示されない」と調べて、プラグインの無効化・ダウングレード・Word Pr...