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

おすすめの記事

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

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

Windows 10でpsd形式のファイルをサムネイル表示する方法

Windows 10でpsd形式のファイルをサムネイル表示する方法

Apacheのmod_expiresでファイルタイプごとにキャッシュをコントロールする方法

Apacheのmod_expiresでファイルタイプごとにキャッシュをコント…

Web制作の仕組みを根底から覆すかもしれないWix ADIの人工知能

Web制作の仕組みを根底から覆すかもしれないWix ADIの人工知能

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集…

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設定をしよう

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設…

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザイン…

本気で作りたい人向け、WordPressプラグインの作成方法

本気で作りたい人向け、WordPressプラグインの作成方法


コメントを残す

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

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