Googleの検索結果画面にファビコン(favicon)が表示されるようになったので、まだ対応できていないサイトはすみやかにファビコンを設定しよう

googlefavicon200.jpgGoogleの検索結果の一覧表示画面に該当サイトのファビコン(favicon)が表示されるようになった。ファビコンとは、サイトのイメージを表すアイコンのような小さな画像で、自社サイトならば自分で設定することが可能である。
このように一覧表示でファビコンが表示されると、ファビコンのイメージでクリックされる率が変動する可能性が高くなる。より自サイトらしいファビコンに作り変えたかったり、まだファビコンが設定されていなかったりしている場合は、この機会にファビコンを設定しよう。

▼「どもども」と検索した結果の一覧表示画面
googlefavicon.jpg

ファビコンの設定方法

faviconファビコンの画像サイズは使用用途により何種類か準備し使い分ける必要がある。しかし、最小限の手数で済ましたいならば、PC用とスマホ用の2つでいけそうである。それは「favicon.ico」と「apple-touch-icon.png」の2つ。

この2つのファビコンファイルがあれば自動的にサイズ変更して表示してくれるようだ。(現段階では大きな問題はでていない)

「favicon.ico」をPC用として、左右32ピクセルのPNG形式で作成する。
「apple-touch-icon.png」をスマホ用として、左右256ピクセルのPNG形式で作成する。

この2つのファイルをFTPでアップロードする。

ヘッダ以内のタグは
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
を追記しておく。

以下に過去のページでも紹介しているので参考までに。

URLの左横に画像表示するアイコンはfavicon.icoというファイル、favicon.icoはカンタンに作成し自分のホームページにアップできる
https://dm2.co.jp/2006/02/faviconicofavic-8454.html

ホームページのアイコンはPC用とスマホ用では違う、スマホ用のアイコンは「apple-touch-icon.png」をアップロードしておく
https://dm2.co.jp/2017/05/apple-touch-iconpng.html


このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。
このエントリーをはてなブックマークに追加  

この記事のURL「https://dm2.co.jp/2020/01/googlefavicon.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2020/01/googlefavicon.html」をQRコードで表示「https://dm2.co.jp/2020/01/googlefavicon.html」
パソコンで表示されたページをスマホでも見たい場合は、このQRコードをスマホのカメラ(QRコードが読めるリーダー)で読むとページが表示されます。