Windows版のPhotoshopでFaviconを作成


投稿日:2011年11月7日
  • 2
  • 0



アクアリウムWiki」用にFaviconを作成

そもそも「Favicon」とは何ぞや?という人もいると思いますが、サイトをブックマークしたときに出たり、タブを表示したときにアイキャッチとして出るアイコンのことです。

 ←こんなの。

多くのブックマークから目的のサイトを探すときに、視覚的にサイトを判別できるため、地味なようで重要なアイテムです。


インストール方法

PhotoshopにはデフォルトでFaviconを作る機能がありません。そのため、Favicon作成用のソフトを組み込む必要がある。
それが「ICO (Windows Icon) Format」。Mac版はもちろんWindows版も用意されている。
自分の環境に合わせたバージョンをダウンロードしたら、ソフトを指定の場所にコピーする。

具体的には今回はPhotoshop CS4にインストールするため、
ICOFormat.8bi」というファイルを

C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats

こちらへ。(別の場所にインストールしている場合は適宜インストールした場所のPhotoshopフォルダにインストールする。)

ちなみにMacだと

/Applications/Adobe Photoshop CS4/Plug-ins/File Formats

にインストールする。

以上でインストール作業は完了。


作成方法

まずは16×16pxのファイルを作成する。透過もサポートしているので形も選べる。好きなアイコンを作ったら「別名で保存」を選び、ファイル形式で「ICO(Windows Icon)」選ぶ。

これだけで作成できます。
後はメタタグに指定するだけです。(例えば以下のように)

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

 
今回はPukiWikiなので、ちょっと勝手が違います。元々PukiWikiのスキンにFavicon用のタグが用意されているので、アイコンの名前を記述するだけで表示されるようになる。
pukiwiki.skin.php」の15行目あたり

$_IMAGE['skin']['favicon']  = ''; // Sample: 'image/favicon.ico';

という記述があるので、

$_IMAGE['skin']['favicon']  = 'image/favicon.ico'; // Sample: 'image/favicon.ico';

と、サンプル通りに書いたw そして「image」フォルダへ「favicon.ico」をアップロードしたらめでたく完成。


どんな表示のされ方か気になる方はこちらへどうぞ。「アクアリウムWiki


現在のページを共有する



現在のページに関連する記事

Adobe Photoshop CS5でエプソンTWAINを使う Adobe Photoshop CS5でエプソンTWAINを使う
WordPressにfaviconを追加 WordPressにfaviconを追加
Windows版のPhotoshopでFaviconを作成 パソコン用メガネなんていらない!無料でできる5つの疲れ目対策
Windows版のPhotoshopでFaviconを作成 Mac OS 9時代のIDE接続のHDDをMacDrive 10を利用してWindows 10で読み込む方法
Windows版のPhotoshopでFaviconを作成 Photoshopのドロップレットで数百万枚の画像を自動処理する方法
Windows版のPhotoshopでFaviconを作成 プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト
Windows版のPhotoshopでFaviconを作成 iOSのWeb Clip機能で使うWebpage Iconのまとめと、作成方法

おすすめの記事

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法

Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法

サーバで管理していたWordPressをローカル環境に移行する方法

サーバで管理していたWordPressをローカル環境に移行する方法

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を作成しました

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を…

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集できる投稿画面を作る方法

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集…

メールのエラーコードと、メールサーバのmaillog解析方法まとめ

メールのエラーコードと、メールサーバのmaillog解析方法まとめ


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。