こんにちは！
モバイル端末でのGoogle検索結果の左上や
ブラウザのタブに表示されるファビコン
サイトのイメージアップに繋がるので是非設置しておきたいですよね
モバイル表示
PC表示
Google検索すると どのサイトもカラフルで個性的なファビコンが付いていて
一目でどのサイトか判るほど便利なものです
WordPressのテーマによっては、サイトアイコンの設定で
簡単にファビコンを表示させられるのですが
今回はそれ以外の 様々な設定方法があるファビコン設置方法を
僕がやってみた方法で解説していきます
良かったら参考にしてみて下さい
最初に用意するもの
まずはファビコンにしたい写真を用意します
ファビコン用の画像を一括作成できる [favicon generator] という便利なサイトがあるので
そのサイト指定の拡張子及びサイズのものを用意します
指定可能な画像タイプはPNG,JPG,GIFです
512×512～700×700ピクセル画像が推薦サイズです
用意できたら次はこのサイトにアクセスします
サイト内にやり方は全部書いてありますが
順を追って説明していきます
はじめに [画像ファイルを選択] というところに用意していた写真をドラッグ&ドロップします
写真が取り込まれました
そして [ファビコン一括生成] というボタンを押します
すると様々なサイズのファビコンが自動生成されます
そして下にスクロールして
[ファビコンダウンロード] のボタンをクリックしてファイルをダウンロードします
[favicons] というファイルが出来上がります
ファイルをサーバーにアップロード
次に、画像の説明文の通り
「ダウンロードしたファイルを解凍してウェブサーバーのドキュメントルートに配置します」さらに
「HTMLには以下の内容を <head>と</head>の間に記載します」
具体的にやっていきます
僕は【エックスサーバー】を使っているので
この場合での説明になります
まずエックスサーバーの「Xserverアカウント」からログインして
次にファイル管理に入ります
サイトのドメインから「public_html」に入ります
上の「アップロード」をクリック
そしてこの部分に
先ほどダウンロードした [favicons] というフォルダの中身 (53項目)を
ここに全部配置して「アップロード」ボタンをクリックします
いや、全部配置しなくても大丈夫だと思いますが
(説明文にも書いてありました)
でも・・せっかくなので全部配置しておきます w
ゴッドくん欲張ったんだね！
これらを全部アップロードします↓↓
WordPressの設定
次にWordpressの設定です
メニューの「外観」→「テーマエディター」から
「テーマヘッダー」をクリック
そして「favicon generator」内の これを全てコピーして
</head> の上に貼り付けます
[ファイルを更新] を押すのを忘れずに！
以上でファビコンの設置作業は完了です
後は2〜3日待てば検索結果にファビコンが付いていることでしょう！
お疲れ様でした〜！
【当ブログの使用レンタルサーバーは】
エックスサーバー
コメント