Webページを表示した時にURLウィンドウのアタマにつく小さなアイコン、ファビコン。ブックマークしたときにも一覧に表示されるので視認性アップになりますね。
ファビコンファイルの生成はいつもWeb上のファビコン生成サービスを利用してます。確実だし簡単だし、背景透明のファビコンも簡単に作れてしまいます。
いつも使っている生成サービスは「iconifier.net」というサイト。ここを使ったファビコン作成の手順を記しておきます。
①まずファビコンにしたい画像を64×64pxで用意します。 今回はPhotoshopを使用し、わかりづらいですが黒い角丸四角の四隅の背景は 透明にしてあります。ファイル形式はPNG-24で書き出しました。
② 「iconifier.net」のサイトに用意した画像をアップロードし、
“Iconify”ボタンをクリック。
③各種アイコンが生成されます。ファビコン以外のアイコンも作られますが、今回は一番下のfavicon.icoのみを使用します。
④右ボタンクリックで任意の場所にファイルを保存します。
ファビコンファイルの生成はいつもWeb上のファビコン生成サービスを利用してます。確実だし簡単だし、背景透明のファビコンも簡単に作れてしまいます。
いつも使っている生成サービスは「iconifier.net」というサイト。ここを使ったファビコン作成の手順を記しておきます。
①まずファビコンにしたい画像を64×64pxで用意します。 今回はPhotoshopを使用し、わかりづらいですが黒い角丸四角の四隅の背景は 透明にしてあります。ファイル形式はPNG-24で書き出しました。
② 「iconifier.net」のサイトに用意した画像をアップロードし、
“Iconify”ボタンをクリック。
③各種アイコンが生成されます。ファビコン以外のアイコンも作られますが、今回は一番下のfavicon.icoのみを使用します。
④右ボタンクリックで任意の場所にファイルを保存します。
⑤保存されたファビコンファイルです。拡張子は「.ico」になります。
⑥このfaviconファイルをFTPでサイトデータと同じディレクトリに（index.htmlと同じディレクトリ）アップロードします。
index.htmlの<head>部分には以下のコードを書いておきます。
<link rel="shortcut icon" href="サーバのURL/favicon.ico"/>
※「サーバのURL」は適宜書き換えてください。
Bindの場合は「サイト設定」の画面右上にfavicon設定部分がありますね。
適用してWebページをブラウザで表示させると、URLウィンドウにfaviconがついているはずです。角丸四角もジャギーもなくきれいに表示されていますね。
0 件のコメント :
コメントを投稿