* You are viewing Posts Tagged ‘photoshop’

Photoshopで奇麗なfaviconを作る方法


ガドウェブのファビコンをPhotoshopで作ったので作り方を紹介します。

ファビコン(favicon)とは、ブラウザのアドレスバーやブックマークしたときに表示される小さいアイコンのことです。
ほとんどのブラウザが対応しているので、ファビコンがあるとブックマークの一覧で見つけやすかったり、サイトのイメージも印象づけられるので是非とも奇麗なファビコンを表示したいですね。

ファビコンのファイルについてですが、「.ico」とう拡張子のファビコン専用ファイルです。画像編集ソフトなどで作成出来るのですが、この「.ico」というファイル型式に対応しているソフトがかなり少ないです。
ファビコン専用の作成ツールで作るか、jpegなどのファイルを変換ツールで変換して作ることが出来るのですが、画像編集機能が少なかったり変換が奇麗に出来なかったりと、美しいファビコンを作るのは難しいです。

そこで、今回紹介するのはPhotoshopで「.ico」ファイルを開いたり、保存したり出来るプラグインです。
画像編集機能の豊富なPhotoshopなら奇麗なファビコンが作れますし、透過などの処理も奇麗に行えます。

ICO (WINDOWS ICON) FORMAT

インストール方法

上記のサイトからダウンロードしたICOFormatのファイルをPhotoshopを起動していない状態で「Program File/Adobe/Adobe Photoshop CS*/Plug-ins/File Formats」に置いて(※インストールするOS、Photoshopのバージョンによって、フォルダ名、階層などが違う場合があります)Photoshopを起動するだけです。起動したらメニューのヘルプから「プラグインについて」を確認し、ICO(Windows Icon)Formatがあればインストール完了です。

ファビコンの作成、保存

ファビコンはブラウザで表示される時は16px四方での表示なので見やすさを考慮してオブジェクトは四方のいっぱいに配置した方が良いです。
表示は16px四方ですが、作業時は作業しにくいので広いカンバスで作って後から縮小しましょう。
ファビコンではアルファチャンネルを使用した透過も可能なので、Photoshopで作成の場合、背景を透明にしていれば透過されます。
デザインが済んだら32px四方に縮小し、保存します。
縮小は、メニューの「イメージ」から「画像解像度」を選択し、幅と高さを32pxに指定して縮小して下さい。また、縮小方法は「バイキュービック法-シャープ」が縮小にはお勧めです。
保存は、メニューの「ファイル」から「保存」を選択し、ファイル形式は「ICO Windows Icon」を選択して下さい。(保存しようとする画像の1辺が256pxを超えている場合は「ICO Windows Icon」の形式が一覧に出ません。)
そして、「favicon.ico」というファイル名で保存して下さい。

ファイルのアップロードと設定

先ほど保存した「favicon.ico」のファイルをサーバーにアップロードしたら、ファビコンを表示したいhtmlファイルのhead要素に以下のlink要素のコードを追加して下さい。

<link rel="shortcut icon" type="image/x-icon" href="favicon.icoのURL" />

WordPressで簡単にファビコンを表示出来るプラグイン

Favicon Manager

Digital Ramble » Favicon Manager WordPress Plugin

テーマのhead内に直接先ほどのコードを書き込んでも良いのですが、テーマを変更した場合などに書き直す手間が省けるのでプラグインを使うのも便利です。