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

モバイル端末でのGoogle検索結果の左上や
ブラウザのタブに表示されるファビコン
サイトのイメージアップに繋がるので是非設置しておきたいですよね


モバイル表示


PC表示


Google検索すると どのサイトもカラフルで個性的なファビコンが付いていて
一目でどのサイトか判るほど便利なものです

WordPressのテーマによっては、サイトアイコンの設定で
簡単にファビコンを表示させられるのですが

今回はそれ以外の 様々な設定方法があるファビコン設置方法を
僕がやってみた方法で解説していきます

良かったら参考にしてみて下さい



最初に用意するもの

まずはファビコンにしたい写真を用意します
ファビコン用の画像を一括作成できる [favicon generator] という便利なサイトがあるので、そのサイト指定の拡張子及びサイズのものを用意します


指定可能な画像タイプはPNG,JPG,GIFです
512×512~700×700ピクセル画像が推薦サイズです


用意できたら次はこのサイトにアクセスします


様々なブラウザやデバイスに対応したファビコンをまとめて作成できます。

使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、ap…



サイト内にやり方は全部書いてありますが
順を追って説明していきます

はじめに [画像ファイルを選択] というところに用意していた写真をドラッグ&ドロップします



写真が取り込まれました
そして [ファビコン一括生成] というボタンを押します


すると様々なサイズのファビコンが自動生成されます


そして下にスクロールして
[ファビコンダウンロード] のボタンをクリックしてファイルをダウンロードします


[favicons] というファイルが出来上がります



ファイルをサーバーにアップロード

次に、画像の説明文の通り
【ダウンロードしたファイルを解凍してウェブサーバーのドキュメントルートに配置します】さらに
【HTMLには以下の内容を <head>と</head>の間に記載します】

具体的にやっていきます



僕は【エックスサーバー】を使っているので
この場合での説明になります

エックスサーバー



まずエックスサーバーの「Xserverアカウント」からログインして



次にファイル管理に入ります



サイトのドメインから「public_html」に入ります



上の「アップロード」をクリック



そしてこの部分に



先ほどダウンロードした [favicons] というフォルダの中身 (53項目)を
ここに全部配置して「アップロード」ボタンをクリックします

いや、全部配置しなくても大丈夫だと思いますが
(説明文にも書いてありました)
でも・・せっかくなので全部配置しておきます w


ゴッドくん
欲張ったんだね!


これらを全部アップロードします↓↓




WordPressの設定

次にWordpressの設定です

メニューの「外観」→「テーマエディター」から



「テーマヘッダー」をクリック



そして「favicon generator」内の これを全てコピーして


</head> の上に貼り付けます
[ファイルを更新] を押すのを忘れずに!



以上でファビコンの設置作業は完了です
後は2〜3日待てば検索結果にファビコンが付いていることでしょう!
お疲れ様でした〜!


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

エックスサーバー





広告