FAVICONの作り方

Faviconという小さなアイコンについて質問された方もいるので解説。

SafariではWindows版のIEのようにアドレスバーやブックマークにサイトの小さなアイコンを表示できるようになった。これはWindowsのアイコン形式「.ico」で作成されている。Windowsだとこの形式で作成できるアイコンエディタも多いと思うけどMacではそんなにない…。
自分が作成に使用したのはIconGrapherX というソフト。Favicon自体の仕様は16×16ピクセル、256色でマスクは1bitで作成すれば問題ないので、この形式であればどんなソフトでもよいと思う。作成方法はIconGrapherのMemberウインドウのsmall32-bit Iconのところにアイコンを作成(他の画像加工ソフトからペーストしてもいい)して、保存するときにWinXP(.ico)形式で保存してあげればOK。
さて、このicoファイルをサーバーへアップロードするときに、HPの第一階層であればそのままファイルを設置すればOK。任意のディレクトリに格納する場合はHTMLファイルのHEAD部に以下のタグを記述する必要がある。

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />

favicon.icoパスは自分が設置したディレクトリへの相対パス、もしくは絶対パスで記述すればよい。ちなみにfavicon.icoというファイル名も任意で変更できる。本当はfaviconじゃない方がいいみたい…。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です