Home日常Photoshopでfavicon(ファビコン)

Photoshopでfavicon(ファビコン)

旧ブログではブログサービスでファビコンを設置する方法について書いてました。
今回は、背景透過などきれいなファビコンを作る方法について。
クライアントさんからも要望多いので…

そもそもファビコン(favicon)とは、ブラウザのアドレスバーや、ブックマークしたURLの横に表示される小さなアイコンです。小さいですがアイデンティティのアピールになりますよね。

photoshopでwindows形式のico(ファビコン)作成

IEでもきちんと表示させるためにはWindows形式の.icoにする必要があり、特にMacだと作って形式変えて…と面倒だったんですが、Photoshopで簡単に出来たんですね〜。知らんかった ^^;

Photoshopで背景透過などきれいなfavicon (ファビコン) を作成する

Photoshopにプラグインを入れればWindows Iconで保存可能です。

ICO (Windows Icon) Format

お使いの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 アイコン」が出現。

Bookmark this on Google Bookmarks
Bookmark this on Yahoo Bookmark
このエントリーをはてなブックマークに追加
Bookmark this on Livedoor Clip

コメント:0

Remember personal info

トラックバック:0

このエントリーのトラックバックURL
http://mebaru.daynight.jp/daily/2401/trackback/
この記事への言及リンクが確認できない場合は、反映されない可能性があります。
Photoshopでfavicon(ファビコン) from メバル+
Recent Posts
Lures for Mebaring [制作中]
メバル用ルアー
Comments
Categories
読者登録(e-mail)


 

確認メールのリンクをクリックで手続完了!

Pagos

Rapala

Total:1138739  Online:0
Today:19  Yesterday:74

page top