- 日常
- 2012-06-15 (金) 18:14
旧ブログではブログサービスでファビコンを設置する方法について書いてました。
今回は、背景透過などきれいなファビコンを作る方法について。
クライアントさんからも要望多いので…
そもそもファビコン（favicon）とは、ブラウザのアドレスバーや、ブックマークしたURLの横に表示される小さなアイコンです。小さいですがアイデンティティのアピールになりますよね。
IEでもきちんと表示させるためにはWindows形式の.icoにする必要があり、特にMacだと作って形式変えて…と面倒だったんですが、Photoshopで簡単に出来たんですね〜。知らんかった ^^;
Photoshopで背景透過などきれいなfavicon (ファビコン) を作成する
Photoshopにプラグインを入れればWindows Iconで保存可能です。
お使いのOSやPhotoshopのバージョンに応じたプラグインをDL。
ダウンロードしたプラグインを “Photoshop/プラグイン/ファイル形式” に置いて、Photoshopを再起動します。起動後、アプリケーションメニューから「プラグインについて」メニューでインストールを確認できます。
あとは32×32pxで好きなように作成して、ファイル名をfavicon.icoにして、保存時にフォーマットからICO (Windows Icon) を選択するだけ。フォーマットに出ない場合は画像のビット数を変えてみて〜
設置方法は割愛ー。
【備忘録】
■ きれいに作成したいなら
作成時は64×64pxなど大きめで作成し、サイズダウンは『イメージ > 画像解像度』で行う。
その際オプションでバイキュービック法（シャープ）を選択するとキレイ。
■ ファビコンの反映について
Safariはファビコンのキャッシュをクリアしないとすぐ反映しない。
〜/Library/Safari/Icons の中身を削除するか
ターミナルで以下を実行し、Safariを再起動。
rm -rf ~/Library/Safari/WebpageIcons.db
■ Macでもっと超簡単にファビコン作れた…
画像をプレビュー.appで開き、別名で保存。
その際フォーマットから「Microsoft アイコン」を選択するだけ！
Mac OS Lionの場合、Optionを押しながらフォーマットを選ぶと「Microsoft アイコン」が出現。
コメント:0
トラックバック:0
- このエントリーのトラックバックURL
- http://mebaru.daynight.jp/daily/2401/trackback/
- この記事への言及リンクが確認できない場合は、反映されない可能性があります。
- Photoshopでfavicon（ファビコン） from メバル＋
