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

おすすめの記事

エンティティとデコード用プラグイン「Entity Decode Button」を作成しました

エンティティとデコード用プラグイン「Entity Decode Button」…

「アマレコTV」でWindows 10のPC画面に表示されている動画を撮影する方法

「アマレコTV」でWindows 10のPC画面に表示されている動画を撮…

PukiWikiで5段階評価を付けるプラグインを作成しました

PukiWikiで5段階評価を付けるプラグインを作成しました

公式ドキュメントよりも詳しいTinyMCEの使い方(基本編)

公式ドキュメントよりも詳しいTinyMCEの使い方(基本編)

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…

ads.txtの設置方法を通して学ぶインターネット広告の問題点

ads.txtの設置方法を通して学ぶインターネット広告の問題点

Question2AnswerへreCAPTCHAを導入する方法

Question2AnswerへreCAPTCHAを導入する方法

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

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


コメントを残す

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

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