最近、よく見かけるFavicon。いろんなＷｅｂサイトで見かけるようになりました。
画像なので、Photoshopで作りたいところですが、PhotoshopにはFaviconを読み込み、書きだしを行う機能がありません。
しかし、プラグインが出ています。
ICO(WINDOWS ICON)FORMATをダウンロード
Telegraphics - Free plugins for Photoshop & Illustrator…and other software
上記ＵＲＬから、ICO(WINDOWS ICON)FORMATをダウンロードします。
ダウンロードには、メールアドレスが必要です。適当に入力しましょう。
気に入った方は、PayPalを通して製作者に5$振込。
プラグインフォルダに入れてインストール完了
解凍すると、ICOFormat.8biというファイルが現れます。
これを、Photoshop/プラグイン/ファイル形式/内に入れて完了です。
ファイルを開く・保存で、.ICOファイル形式が選択できると思います。
使ってみる
実際に使用してみます。
一般的に、アイコンサイズは16×16pixelですが、表示がそうなだけで、ファイル自体はなんでも良い感じです。
Macでは、32×32、64×64pixelなどにも対応。あ、Vistaもかな？
勿論、これはどのブラウザに対応するかによります。
ちなみに、私はIE6以上、Firefox2.0以上、Safari3.0以上、Chromeのみを考えています。
ネタがなかったので、以前作成した友人のカフェ「エスキス」に無断でアイコンをつけてしまいます。
マルチアイコンを作成する
Photoshopで綺麗なアイコンを作成することが出来たら、複数のサイズを持つアイコンファイルを作成します。
@icon 変換というソフトを使うと、サイズが異なる単一イメージファイルを合成して複数サイズ存在するiconファイルとして保存できます。
使い方はいたって簡単。
Photoshopなどで作成したアイコンファイルを読み込みます。
今回は、16×16,32×32の２ファイルを読み込みました。
あとは、２つを選択して「マルチアイコンに保存」ボタンを押すだけです。
Webにアップする
一般的には、xhtml内<head>～</head>内で
<link rel=”shortcut icon” href=”faviconファイルのURL” />
を指定する必要があると言われていますが、 ルートディレクトリに置いておけば、特に<link ～/>を書く必要はありません。
Webにアップしてみました。
所有するＰＣでは、IE上では表示されませんでした。
レンタルサーバだと、ルートディレクトリといっても、本当のルートディレクトリではないからなのでしょうか？
ちょっと詰めきれていません。
参考ＵＲＬ
ICO(Windows Icon)Format プラグイン(Win/Mac)
http://www.telegraphics.com.au/sw/#icoformat
Favicon - Wikipedia
http://ja.wikipedia.org/wiki/Favicon
初めてのココログ・カスタマイズ
http://tea-for-me.cocolog-nifty.com/blog/2006/06/32favicon_ce6d.html
はてな Inter Explorer 6でなぜかFavionが表示されません・・
http://q.hatena.ne.jp/1133217127
@icon変換
http://www.towofu.net/soft/aicon.php
前後の記事
関連した記事
トラックバック＆Pingback
この記事が気に入ったりした方は、自分のブログを書くときに「下のURLをコピーして、自分のブログ投稿時のトラックバック欄にペースト」してください。つながります。
URL:
コメント （ 0 ）
コメント記入欄
東大編入に関する情報をまとめたサイト～小山太郎流～です。高専から東京大学工学部に編入（農学部編入）体験談もあります。他の大学への編入の参考にもなると思うので是非！！Questionnaires
Loading ...Sites by Taro Koyama
友人のHP。カフェ・エスキスです。
札幌は円山にあります。ギャラリーも兼ねたカフェで、ギャラリーの予約は１年以上待たないとゲットできません。
前の会社でお世話になっていた方が独立した会社です。ロゴマークデザインとそのデザインコンセプト、サイト作成を担当しました。
友人のオーダーメイド舞台衣装のサイトです。
Webサイトをちょこっとだけ手伝いました。