この記事では、SWELLテーマでのファビコンの設定方法について詳しく解説します。
- ファビコンとは?
- SWELLが推奨するファビコン画像サイズ、画像形式
- ファビコン画像を用意する方法
- SWELLでのファビコン設定手順
ファビコン(favicon)とは?
ファビコンは、「Favorites Icon(お気に入りアイコン)」
の略称です。ブラウザのタブやブックマークバーの左端に表示される、小さなアイコンのことです。何も設定されていなければ、「
」のアイコンが表示されます。ファビコン(favicon)を設定するメリット
- ブランド化
- 信頼
- タブを開きすぎた時の目印
ファビコンは、あなたのブログを表す「大切なシンボルマーク」です。
そして、この小さなシンボルマークは、読者にあなたのブログを認識してもらうのに大きな役割を果たします。
例えば、読者がたくさんのタブを同時に開いていたとも、ファビコンが設定されていれば、ファビコンを目印にあなたのブログを簡単に見つけることが出来ます。
まず、ファビコン(favicon)画像を用意しましょう
ファビコン(favicon)画像サイズ
- SWELL推奨画像サイズ:縦512px(ピクセル) × 横512px(ピクセル)
- SWELL推奨画像形式:.png(ピング)
![背景を透過した場合、透過しなかった場合の見え方](https://webnext.info/wp-content/uploads/2023/05/favicon-11.png)
![](https://webnext.info/wp-content/uploads/2023/04/管理人わんまる-150x150.png)
画像ってどうやって用意するの??
![](https://webnext.info/wp-content/uploads/2023/04/blog-icon-150x150.png)
![](https://webnext.info/wp-content/uploads/2023/04/blog-icon-150x150.png)
![](https://webnext.info/wp-content/uploads/2023/04/blog-icon-150x150.png)
おすすめの画像の作り方を紹介するね。
ファビコン(favicon)画像作成するには、2つの方法があります
- 自分で作ってみる
- 画像を制作依頼する
ファビコンを自作する
自作されるのでしたらCanvaがおすすめです。
無料で簡単にファビコン画像を作ることができます。
ファビコンを制作依頼する
「ココナラ
ココナラ
まずは、無料登録してみましょう無料登録はこちら
![](https://webnext.info/wp-content/uploads/2023/04/blog-icon-150x150.png)
![](https://webnext.info/wp-content/uploads/2023/04/blog-icon-150x150.png)
![](https://webnext.info/wp-content/uploads/2023/04/blog-icon-150x150.png)
画像が用意できたら、SWELLでファビコンを設定しましょう!
SWELLでのファビコン(favicon)設定手順
カスタマイズが面を開く
ダッシュボード→「外観」→「カスタマイズ」をクリックする
![カスタマイズが面を開く](https://webnext.info/wp-content/uploads/2023/05/favicon-5.png)
![カスタマイズが面を開く](https://webnext.info/wp-content/uploads/2023/05/favicon-5.png)
WordPress設定をクリック
![WordPress設定をクリック](https://webnext.info/wp-content/uploads/2023/05/favicon-6.png)
![WordPress設定をクリック](https://webnext.info/wp-content/uploads/2023/05/favicon-6.png)
サイト基本情報をクリック
![サイト基本情報をクリック](https://webnext.info/wp-content/uploads/2023/05/favicon-7.png)
![サイト基本情報をクリック](https://webnext.info/wp-content/uploads/2023/05/favicon-7.png)
サイトアイコンを選択→画像を選択
「サイトアイコンを選択」をクリックして、準備した画像を選択しましょう。
![サイトアイコンを選択→画像を選択](https://webnext.info/wp-content/uploads/2023/05/favicon-8.png)
![サイトアイコンを選択→画像を選択](https://webnext.info/wp-content/uploads/2023/05/favicon-8.png)
公開をクリック
手順4.で選択した画像が表示されれば、ファビコンの設定は完了です。
![公開をクリック](https://webnext.info/wp-content/uploads/2023/05/favicon-9.png)
![公開をクリック](https://webnext.info/wp-content/uploads/2023/05/favicon-9.png)
【SWELL】ファビコン(favicon)を設定する方法のまとめ
- ファビコンは、ブログのブランドアイデンティティを表現できる。
- あなたのブログをユーザーが認識しやすくなる
ファビコンを設定しなければ、WordPressのロゴマークの「
」になります。ブラウザのタブをたくさん開いた時、お気に入りにたくさんのサイトが登録されている時、ファビコンを設定しているとユーザーはあなたのブログすぐに見つけることができます。
少しの手間で簡単に自分のブログの印象づけることができます。ぜひチャレンジしてみて下さい。