
今日はFaviconについてです。
まずはFaviconって何?と言う方のために
Faviconとは何かを説明しますね。
Faviconとは?
Favicon(ファビコン)とは、ウェブサイトのシンボルマークイメージとして、
ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの事で、
ブラウザのURLの左側や、お気に入りに入れたりした時に表示されるアイコンです。
Favorite icon(フェイバリット・アイコン(お気に入りアイコン))の略称です。
こんなやつですね↓
ファイル形式はICOが一般的ですが、最近ではGIFやPNGも
サポートされてきました。
Faviconの設置の仕方
16x16、32x32、48x48など、いろんなサイズのアイコンが
ありますが上図で表示されているのは16x16サイズのアイコンです。
一般的には、16x16のアイコン(icoファイル)を作成し、
ルートディレクトリーに配置する事で認識されます。
ディレクトリ毎の表示や、別の場所に置いた場合は、
HTMLソースの<head>内に以下の記述をする事でFaviconを設置できます。
<link rel="shortcut icon" href="favicon.ico">
こんな感じです。
<html> <head> <title>favicon設置</title> <link rel="shortcut icon" href="favicon.ico"> </head> <body> <p>body内容</p> </body> </html>
Faviconの作り方
Favicon.icoを作るには、
Ico形式の画像を作るソフトがあれば出来ますが、
一般的にはICOを直接作る事が出来ない為、
正方形の画像を作りそれをICO形式に変換します。
こちら に変換するツールを設置しましたので
作った画像をアップロードすればICOファイルが生成され、
ダウンロード出来ます。
また、ファビコンはICO形式であれば、16x16と32x32と48x48の
3つのアイコンを一つのファイルに格納する事が出来ます。
これをマルチアイコンと呼びます。
マルチアイコンは画像が2個,3個に限らずいくつでも格納可能ですが、
Windowsでは16x16と32x32と48x48の3種類を使用します。
アイコンにはそれぞれ全く違う画像を格納する事が出来ます。
今日はFireWorksで、このマルチアイコンを作る方法を紹介します。
FireWorksでマルチアイコンのFavicon.icoを作る方法
FireWorksではデフォルトではICOファイルを作る事ができません。
なので、まずは、FireWorksの拡張機能を使ってICOを作れるようにします。
まずはこちらのサイトで拡張ファイルをダウンロードします。
http://johndunning.com/fireworks/about/ExportAsFavicon
上記URLにアクセスし、「Download 1.0.0」と言うリンクをクリックします。
クリックすると下図のような警告窓が出ますが、
「VistaやWin7をお使いの方は管理者権限でAdobe Extension Managerを
起動してインストールしてください」的なことが書いているだけなので
OKをクリック。ダウンロードを開始します。
ダウンロードが終わったら、Adobe Extension Managerを右クリックから
管理者権限で起動します。
上部にあるインストールをクリックし、ダウンロードした拡張ファイルを
すればインストールされます。
インストールが完了すると下図のように一覧に表示されます。
使い方
Fireworksを起動すると、メニューバーの「コマンド」に「Favicon」
という項目が追加されています。ここでは、16x16、32x32の2種類の
大きさを持った.icoファイルを作成したいので、
「New Favicon - 16X16, 32X32 」を選択します。
それぞれのサイズに合う画像を作ります。
画像が出来たらコマンドメニューのExport as Faviconをクリックして
書き出せば出来上がりです。
出来上がったFaviconは、2種類のアイコンが格納されていますので
ブラウザのナビゲーションツールバーなどに表示される場合は16x16、
デスクトップなどでは32x32が使われます。
ネットビジネス速報メールマガジン
メルのネットビジネス速報では、悪質高額塾などの被害が拡大しないように
新しい悪質販売者の情報が入り次第、速報でお伝えいたします。
Dreamweaver、Fireworks、PhotoshopなどのTipsやチュートリアルの紹介、
最新SEO情報、その他ネットビジネスに関する情報をいち早く配信しています。