新しく切り替えたwordpressテーマ「SWELL」
ファビコン用の画像を設定する方法が分からず調べたので、やり方を備忘録として書き残しておきます。
【先に結論】SWELL ファビコン画像設定方法
- SWELL内の「ダッシュボード」ー「外観」ー「カスタマイズ」
- 「wordpress設定」ー「サイト基本情報」ー「サイトアイコンを選択」
- ファビコン用の画像を選択
目次(クリックでジャンプ)
ファビコン(サイトアイコン)とは?
ファビコンとはサイトを表示した時のタブ横に表示される画像になります。
![SWELL ファビコンとは](https://photoroamer.jp/wp-content/uploads/2023/02/52c8052329175396495662edb59ec1ff.png)
![SWELL ファビコンとは](https://photoroamer.jp/wp-content/uploads/2023/02/52c8052329175396495662edb59ec1ff.png)
サイトで検索された時もサイトタイトルの横にファビコンで設定した画像が表示されます。
![SWELL スマホ ファビコンとは](https://photoroamer.jp/wp-content/uploads/2023/02/28262c2689017550d7b33b2b1e4707e4-474x1024.png)
![SWELL スマホ ファビコンとは](https://photoroamer.jp/wp-content/uploads/2023/02/28262c2689017550d7b33b2b1e4707e4-474x1024.png)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
ちなみにwordpressで作成したサイトでファビコン用の画像を設定しない時は下のようなwordpressの「W」の画像が表示されます。
![SWELL ファビコンなし](https://photoroamer.jp/wp-content/uploads/2023/02/d0acd1521973fd91a3fd346e2b26c917.png)
![SWELL ファビコンなし](https://photoroamer.jp/wp-content/uploads/2023/02/d0acd1521973fd91a3fd346e2b26c917.png)
SWELLでファビコンの画像を設定する方法
SWELLでファビコンの画像を設定する方法は次の3STEPになります。
【SWELLのファビコン画像設定方法】
- SWELL内の「ダッシュボード」ー「外観」ー「カスタマイズ」
- 「wordpress設定」ー「サイト基本情報」ー「サイトアイコンを選択」
- ファビコン用の画像を選択
1.SWELL内の「ダッシュボード」ー「外観」ー「カスタマイズ」
![SWELL ファビコン 設定方法1](https://photoroamer.jp/wp-content/uploads/2023/02/a0b066c30bcc6b22230f368b41a68957.png)
![SWELL ファビコン 設定方法1](https://photoroamer.jp/wp-content/uploads/2023/02/a0b066c30bcc6b22230f368b41a68957.png)
2.「wordpress設定」ー「サイト基本情報」ー「サイトアイコンを選択」
![SWELL ファビコン 設定方法2](https://photoroamer.jp/wp-content/uploads/2023/02/a4e7839a709550eacaf8983e85c992fa.png)
![SWELL ファビコン 設定方法2](https://photoroamer.jp/wp-content/uploads/2023/02/a4e7839a709550eacaf8983e85c992fa.png)
![SWELL ファビコン 設定方法3](https://photoroamer.jp/wp-content/uploads/2023/02/d801e0b8b0f5946e4c6e3eedbdf42ef6.png)
![SWELL ファビコン 設定方法3](https://photoroamer.jp/wp-content/uploads/2023/02/d801e0b8b0f5946e4c6e3eedbdf42ef6.png)
![SWELL ファビコン 設定方法4](https://photoroamer.jp/wp-content/uploads/2023/02/ed3e61d7eb370b128d564360c0887b3b.png)
![SWELL ファビコン 設定方法4](https://photoroamer.jp/wp-content/uploads/2023/02/ed3e61d7eb370b128d564360c0887b3b.png)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
注意書きに「サイトアイコンは512×512ピクセル以上の正方形にしてください。」とありますが、画像をアップする時に切り抜きで自動的にリサイズされるのでそのままアップして大丈夫です。
3.ファビコン用の画像を選択
![](https://photoroamer.jp/wp-content/uploads/2023/02/78e55f4d7a01c3b41e6670b882a7102e-1024x516.png)
![](https://photoroamer.jp/wp-content/uploads/2023/02/78e55f4d7a01c3b41e6670b882a7102e-1024x516.png)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
ファビコン用の画像はKeynoteで編集し作成しました。
![](https://photoroamer.jp/wp-content/uploads/2023/02/cropped-5ccf595d895f34672a8c54b9eca2d36e.png)
![](https://photoroamer.jp/wp-content/uploads/2023/02/cropped-5ccf595d895f34672a8c54b9eca2d36e.png)
ファビコン用の設定した画像が表示されると全ての設定は完了。
![SWELL ファビコン 設定方法6](https://photoroamer.jp/wp-content/uploads/2023/02/5305f9fcd84d2e12dc0cc57cf749fc63.png)
![SWELL ファビコン 設定方法6](https://photoroamer.jp/wp-content/uploads/2023/02/5305f9fcd84d2e12dc0cc57cf749fc63.png)
サイトを開くとタブページで設定されたファビコンの画像が表示されています。
![SWELL ファビコンとは](https://photoroamer.jp/wp-content/uploads/2023/02/52c8052329175396495662edb59ec1ff.png)
![SWELL ファビコンとは](https://photoroamer.jp/wp-content/uploads/2023/02/52c8052329175396495662edb59ec1ff.png)
Googleの検索ページでも設定したファビコンの画像が表示され一安心。
![SWELL スマホ ファビコンとは](https://photoroamer.jp/wp-content/uploads/2023/02/28262c2689017550d7b33b2b1e4707e4-474x1024.png)
![SWELL スマホ ファビコンとは](https://photoroamer.jp/wp-content/uploads/2023/02/28262c2689017550d7b33b2b1e4707e4-474x1024.png)