サイトのファビコンとウェブクリップアイコンの汎用的な設定とBloggerでの導入手順

サイトでファビコンやウェブクリップアイコンを設定すると訪問者の利便性が上がるから良いと思う。前者はブラウザのタブでサイト名の先頭に付けられる。後者はスマホ／タブレット向けのショートカットアイコンで、ブラウザのブックマークでサイト名の先頭に付けられたり、ホーム画面に追加するとデバイスに貼り付けられたりする。ファビコンとウェブクリップアイコンの何れの画像もサイトの顔みたいに訪問者へどんなサイトなのかを直感的に示すのに役立つ。ファビコンの汎用的な設定について

サーバーに専用の画像をアップロード

サイトのhead内にlinkタグで画像URLを記載

ファビコンのサイズ縦横16～64px程度で、綺麗に表示される画像を専用に作成して使用すると良いと思う。大きな画像を使用してもブラウザが自動的に縮小して表示するから大丈夫だ。ファイル形式はpngが小さめの画像の画質には崩れ難くて適しているけれどもWindowsのIEブラウザがicoしか対応してない、またはiOSがpngに対応してない場合があるらしいから合わせるには注意しなくては行けないし、両方とも用意しても良いと思う。ファイル変換はWebサービスのCloudConvertが高性能で、変換ミスが全くないし、個人的に良く使っている。日本語に対応したWebサービスではファビコン作成が使い易そうだ。サーバーにアップロードする画像のファイル名は「favicon.png」や「favicon.ico」などの「favicon」にしなくては動作しない。そしてサイトのhead内にlinkタグで画像URLを記載してファビコンのファイルを呼び込む。<link rel="icon" hrel="画像URL">詳しくはrelの「shortcut icon」で、typeの「image/画像のMINEタイプ」も記載するけど、前者を短縮して後者を省略しても反映する。サイズを変えてブラウザ、またはデバイス毎に何種類も記載することもできてlinkタグに「size」で「size="16×16"」のように付け加えるんだ。その場合、ファビコンのファイル名も「favicon16.ico」のように「favicon」に番号を付けて区別する。記載した複数のlinkタグの優先順位はブラウザに依存しているらしい。問題が生じる場合もないわけではないから余り数多く増やすべきではないだろう。ウェブクリップアイコンの汎用的な設定について

サーバーに専用の画像をアップロード

サイトのhead内にlinkタグで画像URLを記載

ウェブクリップアイコンのサイズは縦横57～180px程度で、綺麗に表示される画像を専用に作成して使用すると良いと思う。大きな画像を使用してもブラウザが自動的に縮小して表示するから大丈夫だ。ファイル形式はpngが小さめの画像の画質には崩れ難くて適している。サイトのサーバーに画像をアップロードしてさらにサイトのhead内にlinkタグで画像URLを記載してウェブクリップアイコンのファイルを呼び込む。<link rel="apple-touch-icon" hrel="画像URL">ウェブクリップアイコンはiPhoneの場合は画像ファイルのファイル名を「apple-touch-icon.png」にするとサイトのサーバーのルートディレクトリーにアップロードするだけで全ページに反映するらしくてlinkタグで呼び込む必要はない。他のAndroidなどはlinkタグの記載が必要で、iPhoneの場合でもウェブクリップアイコンをページ毎に変えるにはlinkタグが欠かせなくなる。サイズを変えてブラウザ、またはデバイス毎に何種類も記載することもできてlinkタグに「size」で「size="57×57"」のように付け加える。記載したlinkタグの優先順位はブラウザに依存しているらしい。問題が生じる場合もないわけではないから余り数多く増やすべきではないだろう。ブラウザにサイトの前回の訪問のキャッシュがあると直ぐに反映しなかったり、途中で消えたりするから確認して駄目だったら先ずはブラウザの設定のストレージをクリアして確認し直すと反映するかも知れない。Bloggerでのファビコンの導入手順

ウェブの編集

レイアウト

ファビコンガジェット

画像のアップロード

保存

ファビコンガジェットから画像をアップロードすると自動的に16×16のサイズのファビコンが作成されてブログにlinkタグも記載されて反映するようになっている。Bloggerでのウェブクリップアイコンの導入手順デフォルトで自動的に設置するのは不可能で、汎用的な設定を行うしかない。ウェブクリップアイコンのファイル名は必ずしも固定ではないからlinkタグで画像ファイルを呼び込むだけで表示できる。ブログ内のどこか（投稿の下書きでも削除しなければ可能）に載せた画像を使うけど、最も簡単なのはプロフィールの画像／アバターを当て嵌める方法だろう。ウェブ編集の基本情報ガジェットを使うとBlogger専用のプロフィールならば画像をアップロードできるし、Google+のプロフィールならばGoogle+から画像をアップロードできる。何れもjpgファイルで小さな画像に向いた画質ではないけれども120×120のサイズでブログに取り込まれるからウェブクリップアイコンに比較的に相応しく仕上がっている。画像が用意できたらウェブの編集のテーマのHTML編集かバックアップ／復元からウェブクリップアイコンの汎用的な設定と同じようにブログのhead内にlinkタグを記載する。保存かアップロードすると反映する。<link rel='apple-touch-icon' hrel='画像URL'/>Bloggerのテンプレートのマークアップは制限が二つあって殆どの構文の囲みにダブルクォーテーション（""）が使えないので、シングルクォーテーション（''）を使うのと終了タグのない構文の最後には半角スラッシュ（/）が必要だから注意しなくてはならない。ブラウザにブログの前回の訪問のキャッシュがあると直ぐに反映しなかったり、途中で消えたりするから確認して駄目だったら先ずはブラウザの設定のストレージをクリアして確認し直すと反映するかも知れない。

参考サイト

コメント