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. IS06 Siriusα

  2. 支援先のパン屋さんが雑誌に掲載されました

  3. アマゾンランキングのテスト2

  4. Contact Form 7だけで、reCAPTCHA v3のロゴを表…

  5. 気持ちを新たにアメブロを再度開始

  6. GoogleウェブマスターツールからHTMLの重複についての改善

  7. WordPressで他サイトのRSSを取得して自サイトに自動投稿する

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

PAGE TOP