ファビコンの設置方法|ホームページ作成ソフトシリウス

ファビコンとは

ファビコンとは favorite icon(お気に入りアイコン) の略でサイトURLの横に表示されるアイコンの事です。
お気に入りに登録されるとサイト名やページ名の横に表示されます。

ヤフーのファビコン(Internet Explorer)

Yahooのファビコン

グーグルのファビコン(Internet Explorer)

グーグルのファビコン

たけぞーずうぇぶのファビコン(笑)(Google Chrome)

たけぞーずうぇぶのファビコン

大手の企業では殆ど設定されているせいか、ファビコンが設定されていると何となくイメージがよくなる感じしませんか?

まあそれはたけぞーだけかもしれませんが、とりあえず話を進めていきましょう。

ファビコン設置のタグ

<link rel="shortcut icon" href="./favicon.ico" type="image/vnd.microsoft.icon" />

このタグを<head> ~ </head>内に設置します。
画像( favicon.ico )は第一階層に設置します。
ホームページ作成ソフトシリウスでは、画像を新規で追加しファイル名を指定する事でタグが自動生成されます。勿論画像も第一階層に自動的に設置されます。

STEP1-ファビコン画像の作り方

それではファビコン画像の作り方です。

ファビコンは画像ですがファイルの種類が .jpg や .png ではなく .icoとなっています。

jpgで画像を作ってファイル名を jpg から ico に変えるだけでも使用できると思うのですが、たけぞーずうぇぶを見て下さっている方にあまりいい加減な方法を伝えるわけにはいかないので、確実な方法で作成していきます。

会社のやお店のロゴマークや、 power point 、ペイントを使って48px×48pxの画像を作ります。
ファイルは jpg でも png でもいいです。

画像の作成方法は「ヘッダー画像を作ろう」を参考にしてください。

さて、画像が出来上がったら次のサイトでファイルを .ico に変換し、ダウンロードします。

http://ao-system.net/favicon/

.icoの画像作成手順

画像名は「 favicon.ico 」とします。

STEP2-シリウスでファビコンを設定する

ファビコン画像が出来たらシリウスにファビコン画像を設定していきます。

シリウスの記事編集画面の上メニュー→画像管理で「 favicon.ico 」を新規追加します。

探してもファイルの選択画面に「 favicon.ico 」は出てきません。
右下にある「画像ファイル」を「全てのファイル」に変更することで出現します。

サイトオプション→サイトデザイン→FAVICON画像で作成したファビコン画像を設定する。

サイトデザイン→FAVICON画像

ファビコン画像は以下の場所にあります。探しましょう。

ACES WEB→SIRIUS→data→あなたのサイト名ファイル→img→favicon.ico

やはり画像を探す段階で、右下にある「画像ファイル」を「全てのファイル」or「 .ico 」に変更することで「 favicon.ico 」が出現します。

「画像ファイル」を「全てのファイル」or「 .ico 」に変更

無事「 favicon.ico 」が設置出来たら完了です。お疲れ様でした。