こんにちは!
モバイル端末でのGoogle検索結果の左上や
ブラウザのタブに表示されるファビコン
サイトのイメージアップに繋がるので是非設置しておきたいですよね
モバイル表示
![](https://godtomoya.com/wp-content/uploads/2020/04/IMG_0644-473x1024.png)
PC表示
![](https://godtomoya.com/wp-content/uploads/2020/04/ec705512093fcaa4dd42ebe1f9a3f354.png)
Google検索すると どのサイトもカラフルで個性的なファビコンが付いていて
一目でどのサイトか判るほど便利なものです
WordPressのテーマによっては、サイトアイコンの設定で
簡単にファビコンを表示させられるのですが
今回はそれ以外の 様々な設定方法があるファビコン設置方法を
僕がやってみた方法で解説していきます
良かったら参考にしてみて下さい
最初に用意するもの
まずはファビコンにしたい写真を用意します
ファビコン用の画像を一括作成できる [favicon generator] という便利なサイトがあるので
そのサイト指定の拡張子及びサイズのものを用意します
指定可能な画像タイプはPNG,JPG,GIFです
512×512~700×700ピクセル画像が推薦サイズです
用意できたら次はこのサイトにアクセスします
![](https://ao-system.net/favicongenerator/common/image/ogp.webp)
サイト内にやり方は全部書いてありますが
順を追って説明していきます
はじめに [画像ファイルを選択] というところに用意していた写真をドラッグ&ドロップします
![](https://godtomoya.com/wp-content/uploads/2020/04/c515ee4798fee7dfa94943d1dddb8bf6.png)
写真が取り込まれました
そして [ファビコン一括生成] というボタンを押します
![](https://godtomoya.com/wp-content/uploads/2020/04/7aa25a2bc54b72b87a69206099cfba9d.png)
すると様々なサイズのファビコンが自動生成されます
![](https://godtomoya.com/wp-content/uploads/2020/04/ebbbdbc4cef44889482f4e002fe1f66d-1024x634.png)
そして下にスクロールして
[ファビコンダウンロード] のボタンをクリックしてファイルをダウンロードします
![](https://godtomoya.com/wp-content/uploads/2020/04/6743aafae74d67dfbc5b59dc084c21b2.png)
[favicons] というファイルが出来上がります
ファイルをサーバーにアップロード
次に、画像の説明文の通り
「ダウンロードしたファイルを解凍してウェブサーバーのドキュメントルートに配置します」さらに
「HTMLには以下の内容を <head>と</head>の間に記載します」
具体的にやっていきます
![](https://godtomoya.com/wp-content/uploads/2020/04/99d7a1185b49037c127595afb193841b.png)
僕は【エックスサーバー】を使っているので
この場合での説明になります
![](https://www12.a8.net/0.gif?a8mat=3B711F+FDP5DE+CO4+609HU)
まずエックスサーバーの「Xserverアカウント」からログインして
![](https://godtomoya.com/wp-content/uploads/2021/02/cc3592689315f85b14f9b81f59bc52cc-1024x631.png)
次にファイル管理に入ります
![](https://godtomoya.com/wp-content/uploads/2021/02/087e092d5085641fc89457378095d50c.png)
サイトのドメインから「public_html」に入ります
![](https://godtomoya.com/wp-content/uploads/2021/02/60536b1311272352b0d8613ae6a2252d-1024x450.png)
上の「アップロード」をクリック
![](https://godtomoya.com/wp-content/uploads/2021/02/9666754fd98c0ed36c2a63abf6b62cef-1024x671.png)
そしてこの部分に
![](https://godtomoya.com/wp-content/uploads/2021/02/dcb535212fd2284cdc076ea0f8cbef65-1-1024x850.png)
先ほどダウンロードした [favicons] というフォルダの中身 (53項目)を
ここに全部配置して「アップロード」ボタンをクリックします
いや、全部配置しなくても大丈夫だと思いますが
(説明文にも書いてありました)
でも・・せっかくなので全部配置しておきます w
![](https://godtomoya.com/wp-content/uploads/2023/01/icon-512x512-2-150x150.png)
欲張ったんだね!
これらを全部アップロードします↓↓
![](https://godtomoya.com/wp-content/uploads/2020/04/b32f8701f80b9a2104c3f90f75e433f1.png)
![](https://godtomoya.com/wp-content/uploads/2020/04/b32f8701f80b9a2104c3f90f75e433f1.png)
WordPressの設定
次にWordpressの設定です
メニューの「外観」→「テーマエディター」から
![](https://godtomoya.com/wp-content/uploads/2020/04/319def83936bb175c2e581049a40bfdc.png)
![](https://godtomoya.com/wp-content/uploads/2020/04/319def83936bb175c2e581049a40bfdc.png)
「テーマヘッダー」をクリック
![](https://godtomoya.com/wp-content/uploads/2020/04/aa7ad8b42e6a604ef4464dac8e239a8b.png)
![](https://godtomoya.com/wp-content/uploads/2020/04/aa7ad8b42e6a604ef4464dac8e239a8b.png)
そして「favicon generator」内の これを全てコピーして
![](https://godtomoya.com/wp-content/uploads/2020/04/c78a9fae53f0d04cc298f7b1eb3b8de3.png)
![](https://godtomoya.com/wp-content/uploads/2020/04/c78a9fae53f0d04cc298f7b1eb3b8de3.png)
</head> の上に貼り付けます
[ファイルを更新] を押すのを忘れずに!
![](https://godtomoya.com/wp-content/uploads/2020/04/b76f0108fa93f12f03c0f6e8dd7f67a8.png)
![](https://godtomoya.com/wp-content/uploads/2020/04/b76f0108fa93f12f03c0f6e8dd7f67a8.png)
以上でファビコンの設置作業は完了です
後は2〜3日待てば検索結果にファビコンが付いていることでしょう!
お疲れ様でした〜!
【当ブログの使用レンタルサーバーは】
エックスサーバー![](https://www12.a8.net/0.gif?a8mat=3B711F+FDP5DE+CO4+609HU)
![](https://www12.a8.net/0.gif?a8mat=3B711F+FDP5DE+CO4+609HU)
コメント