デスクトップ用 Windows アイコンを新しく作成したついでに、ファビコン（favicon）も新調した。ファビコンとは、インターネットに接続し、ブラウザで開いた際にタブに表示される画像のことを指す。小さな画像なので、一般には見落としがちだが、スマートフォンなどで「お気に入り」や「ホーム画面」に登録した際にも表示されるので、ブログやホームぺージ所有者にとって、設定は必須となっている。作成するには、まず正方形の画像を用意する。元の画像は 180x180 ピクセルで全く問題ないのだが、実際に 16x16 ピクセルで表示された場合、ご覧のように何を表示しているのか分かり辛くなることがある。これはもうひつつのブログ「アメリカンルーツ音楽」用に用意したアイコン画像だが、実際にはもっと単純な図柄のギターのアイコンにした。ファビコンはアドビの万能画像編集アプリケーションの Photoshop で簡単に作れそうにみえるが「ico」形式で保存できないのである。拡張子「ico」でセーブするにはプラグインをインストールする必要があるそうだ。ファビコンはさまざまな種類があるが、主なサイズと用途は次の通りである。
- 16×16 ピクセル：Windows の各ブラウザタブ
- 32×32 ピクセル：Retina の各ブラウザタブ
- 48×48 ピクセル：Windows サイトアイコン
- 64×64 ピクセル：高解像度の Windows サイトアイコン
- 180×180 ピクセル：iOS のホーム画面など
- 256×256 ピクセル：Android のホーム画面など
そこでネットワーク上に画像をアップロードする必要がなく、全てローカル上で完結するため、セキュリティ的にも安全な、様々なファイルサイズに変換が可能なツール「Favicon ジェネレーター」を使ってみた。
このサイトでは正方形の画像をアップロード、16x16, 24x24, 32x32, 48x48, 64x64, 128x128, 256x256 ピクセルの中から必要なサイズを選択し、チャックするとマルチアイコンが生成され、ひとつにまとめたファビコンが出来上がる。サポートしている元画像のフォーマットは PNG, GIF, JPEG, BMP である。作成されたファビコンは、ホームページなら index.html のヘッダーに次のように記述し、格納ディレクトリを指定する。
<head>
<link rel="icon" href="image/icon/favicon.ico">
</head>
ブログの場合は、例えば私が利用しているグーグルの無料ブログサービス Blogger であれば、ダッシュボードから「設定」「ファビコン」でファイルをアップロードすれば良い。ただし反映するまでには若干時間がかかるようだ。他のブログサービスでも、同じような設定の説明があると思われる。というわけで、どうやらファビコン作りが今年の正月の「事始め」になってしまったようだ。
Favicon ジェネレーター | 画像ファイル PNG, GIF, JPEG, BMP などから favicon を変換制作する
0 件のコメント:
コメントを投稿