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のまとめと、作成方法

おすすめの記事

そのサイト、WordPressじゃなくてWixで十分じゃない?

そのサイト、WordPressじゃなくてWixで十分じゃない?

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

初めてでも理解できるようになる「Google Chrome機能拡張の開発」

初めてでも理解できるようになる「Google Chrome機能拡張の開発」

ClamAVとClamSMTPを利用してPostfixのメールをウイルスチェック

ClamAVとClamSMTPを利用してPostfixのメールをウイルスチェック

サーバリソースをリアルタイムに監視するdstatのインストールと使い方

サーバリソースをリアルタイムに監視するdstatのインストールと…

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成

全く新しい決済サービスPayPal.Meの導入と使い方を解説

全く新しい決済サービスPayPal.Meの導入と使い方を解説

iptablesで設定したパケットフィルタリングが正しく動作しているかテスト

iptablesで設定したパケットフィルタリングが正しく動作してい…


コメントを残す

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

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