検索結果など様々な場所に表示される【favicon】ファビコンの簡単設定方法

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

こんにちは!

モバイル端末での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日待てば検索結果にファビコンが付いていることでしょう!
お疲れ様でした〜!


【当ブログの使用レンタルサーバーは】

エックスサーバー



この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次