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

おすすめの記事

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単語200

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単…

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

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

開発の最前線でクリエイター・エンジニアに必要なプログラミング言語

開発の最前線でクリエイター・エンジニアに必要なプログラミン…

インストールだけじゃない!yumの設定から便利な使い方まで徹底的に解説

インストールだけじゃない!yumの設定から便利な使い方まで徹底…

SNSのカウントをキャッシュするWordPressのプラグインを作成しました

SNSのカウントをキャッシュするWordPressのプラグインを作成し…

標準のアンインストーラーで消えないソフトを徹底的に削除する方法

標準のアンインストーラーで消えないソフトを徹底的に削除する…

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ


コメントを残す

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

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