はてなブログ開発ブログ

はてなブログの新機能など開発に関する情報、公式のお知らせを発信します。

ブログアイコン(favicon)をGoogleのガイドラインに準拠するよう変更しました

はてなブログでは、「ブログアイコン(favicon)」の仕様をGoogleのガイドラインに沿うように変更いたしました。

先日、Googleより検索結果一覧にファビコンを表示する変更が行ったという発表がありました。はてなブログでは、すでに「ブログアイコン(favicon)」機能を提供しており、利用者が任意の画像を設定することが可能でしたが、ガイドラインに沿わない点がありました。以下の変更を行うことで、Googleのガイドラインに準拠いたしました。

変更点

  • パソコン版やレスポンシブデザインではてなブログを閲覧中にも、apple-touch-icon を出力する
    • iPhoneでレスポンシブデザインのブログをホームに追加する場合や、iPadでブログをホームに追加する際に、アイコンが表示されるようになります
  • システムの都合により、「ブログアイコン」のgif画像対応をサポートの対象外とします
    • お手数をおかけいたしますが、gif画像を設定している場合には、「ブログアイコン」の再設定をお願いいたします

ブログアイコンの設定方法

設定は「基本設定」内の「ブログアイコン」から行えます。画像のアップロードが完了すると、「ファイルを選択」横にファイル名が表示されますので、ページ最下部の「変更する」ボタンをクリックしてページをご確認ください
ダッシュボード > 設定 > 基本設定 の順でもアクセスできます


ブログアイコン設定画面
ブログアイコン設定画面

実際の使われ方

ブログアイコン(favicon)は、ブラウザのタブや、スマートフォンでブックマークした際などに表示されます。

ブラウザのタブの表示例
ブラウザのタブの表示例

iPhone Android
f:id:hatenablog:20190705131335p:plain
iPhoneの表示例
f:id:hatenablog:20190705131331p:plain
Androidの表示例

※スマートフォンのアイコンはすぐに反映されますが、ブラウザのタブや、Googleの検索結果一覧ページの反映までにお時間がかかる可能性があります。

blog.hatenablog.com

参考ヘルプ

(2019年7月9日20:38追記)本文中の画像に誤りがあったため修正いたしました。