PhotoshopでFaviconを作成

Webブラウザでホームページを開いたときに、URLの横やタブのタイトルの横に表示されているアイコン。
FaviconといわれるアイコンをPhotoshopでつくってみた。
プラグインを追加しないと使えないため、以下の手順を覚え書き。

■Photoshopへプラグインの追加
1)「http://www.telegraphics.com.au/sw/」からプラグインをダウンロード
2)私は、PE9(Mac版)をつかっているので、「Mac CS5」をダウンロード
3)ダウンロードされた「ICOFormat.plugin」ファイルを「アプリケーション」→「AdobePhotoshop….」→「Plug-Ins」→「FileFormats」へ移動

■Photoshopからの作成方法
1)Faviconにしたい画像を開いて「32×32」でトリミング
2) 解像度を「72dip」でサイズも「32×32」にする
3)保存をするときにファイル形式を「ICO」にし、ファイル名「favicon.ico」で保存

■ホームページ(WordPressの場合)へ適用させる
1)テンプレートファイルのヘッダ部分に以下を追加
<!– Favicon, Thumbnail image –>
<link rel=”shortcut icon” href=”<?php bloginfo(‘template_url’); ?>/images/favicon.ico”>

2)作成したFaviconファイルをテンプレートフォルダ配下の「images」へアップする

以上

中小企業診断士 山口亨
UTAGE経営研究所

関連記事

  1. あなたの会社のメタボチェック「経営力自己診断」サイトオープン

  2. さくらインターネットの共有SSLde問い合わせモジュールだけSSL化

  3. IS06のバッテリーは十分もっている

  4. IS06 Android携帯に必要なアプリ

  5. IS06 Siriusα の利用レポート

  6. 流れている音楽の曲名を知りたいとき

  7. IS06ってやっぱりすごいね。例のあれが出来た。

  8. AmebaからFacebookへ、連携方法の変更

PAGE TOP