SIRIUSでfavicon画像(サイトアイコン)を設定する

ブラウザのブックマークやタブに表示されるサイトのfavicon画像(アイコン画像)の設定方法です。SIRIUSでは画像を指定するだけで自動でfavicon画像が作成されるので簡単に作ることができます。


faviconとは?

faviconとはfavorite iconの略で、主にブラウザのブックマークやタブに表示されるアイコン画像です。昨今ではスマートフォンなどでホーム画面にサイトのショートカット置いたときのアイコンにも利用されます。他にWindows8のタイルやGoogle TVの画面などにも表示されます。

 

ファビコンが設定されていれば無い場合と比べて目に留まります。大手サイトの多くはファビコンを設定していますので、サイトの信頼度が高い印象を与えることができます。

 

当サイトのChromeでのブックマークとタブのfavicon表示

 

マルチデバイス化や高解像度化によって、多くのデバイスに対応(綺麗に表示)しようとすると多くのサイズや形式のファイルを用意する必要がありますが、SIRIUSで作成できるのは32px×32pxのみです。これ以上のサイズの使用タイミングはそれほど多くないため、個人的にはこのサイズだけで問題ないかと思います。

faviconのサイズ

代表的なサイズ

  • 16 × 16(IEブラウザ)
  • 32 × 32(その他ブラウザ)
  • 48 × 48(Windowsデスクトップ)
  • 152 × 152(iOS・Androidホーム画面)

 

その他

ショートカットアイコンなどで 48px×48px、64px×64px、128px×128px、258px×258pxを使用する場合もあります。それら以外のサイズも多く、年々faviconの種類は膨れ上がっており、すべてに対応しようとすると必要なサイズが20種類以上になります。

 

これらをすべて作って設定するのはすごく大変ですし、実際には勝手にリサイズして表示してくれるのですべてを用意する必要はありません。

faviconを設定する

画像を用意する

まず最初にファビコンに使用する32px×32pxの画像を用意します。32px×32px以外だと勝手にリサイズされて画像が劣化してしまうので注意しましょう。形式は何でもいいですが透過できるpngが一般的です。ファイル名も何でも構いません。ここでは以下の画像を使用します。

 

 

サイトオプションから画像を指定する

サイトオプションから「サイトデザイン」を開いてファビコン画像を指定します。

 

 

今回はpng形式の画像を指定しましたが、サイト生成時にSIRIUSが自動でico形式に変換して32px×32pxの「favicon.ico」として出力されます。「サイト生成」を行い「サイト生成先」からfavicon.icoを確認してみましょう。

 

 

これで設定は完了です。プレビューやアップロード後のサイトでタブやブックマークで表示されるか確認してみましょう。

 

ico形式はfaviconに使われる画像形式です。favicon.icoの画像サイズは強制的に32px×32pxにリサイズされるので注意しましょう。