[Labyrinthe Noir]>[Top]>[HTMLタグ講座]>

<link>タグの使い方

Faviconを表示

ブラウザでHPを見たときや、ブックマークに保存したとき、そのページを示すアイコンを付けることができます。Favorite icon、略してFavicon(ファビコン)です。

<link rel="shortcut icon" href="favorite.ico">

HTML5では、次のようになります。

<link rel="icon" href="favicon.icon" type="image/vnd.microsoft.icon">

アイコンはBMP形式で作成した画像ファイルを使います。作成後に拡張子を.icoまたは.iconに変更します。
最近のブラウザではGIFやPNG形式の画像も使えますが、Internet ExplorerがICO形式のみ対応となっています。

ICO形式の場合、16×16のアイコンだけでなく、32×32などの複数のアイコン画像を1つにまとめたファイルとなっています。
Faviconとして使う場合、16×16だけで十分ですので、BMPファイルを使うことで簡単に作ることができます。
ICO形式で作る場合は、専用のアイコンエディタを使うのが良いでしょう。

このページにはアイコンのようなアイコンを付けてみました。ブラウザのアドレス表示やウインドウなどに表示されるので探してみてください。

Windowsでの作り方

アクセサリの中のペイントを使います。キャンバスサイズは16×16にします。
絵を描くときは画面を拡大すると描きやすくなります。
絵が描けたら、BMP形式で保存します。保存ができたら、拡張子を.icoに書き換えます。

ファイルの拡張子が見えない場合、フォルダオプションを開き、表示タブ内から「登録されている拡張子は表示しない」という項目のチェックを外します。(Windows7ではウィンドウ左上の整理というメニューを開くと、「フォルダと検索のオプション」というメニューがあります。)

iPhone/iPad用のホームアイコン

iOSでHPをブックマークに入れる代わりに、ホーム画面にアイコンを置くことができます。
何も用意しなくても、HPのサムネイルがアイコン化されますが、画像を1つ用意するだけで簡単にアイコンを表示させることができます。
また、このために<link>タグは必要ありません。

PNG形式の画像を1つ、144×144で用意します。iPhoneでは57×57、iPadでは72×72の表示になりますので、それ以外の大きさでも大丈夫です。角の丸みとハイライトは自動的に入ります。
画像ができたら、ファイル名を「apple-touch-icon.png」として保存し、これをindex.htmlと同じルートにアップロードします。
後はホームに追加するときに読み込まれて表示されます。

参考ページ:ありがとうiPod

CSSを読み込む

<link rel="stylesheet" href="basic.css" type="text/css">

外部ファイルからCSSを読み込むことができます。これによって、複数のHTMLで同じCSSを使うことができるため、デザインの変更があっても1つのファイルで管理できるというメリットがあります。
外部に置くCSSファイルは、テキストで作成し、拡張子を.cssとします。

JavaScriptでも外部ファイルを読み込むことができますが、こちらは<script>タグを使います。

 

戻る