ファビコンを設定したい

ファビコンとは「そのサイトのアイコン」という位置づけで、ブラウザのブックマークや、アドレスバーに表示される画像です。画像のフォーマットにはPNG形式、GIF形式なども使えますが、不利ブラウザとの互換性を確保するために、ICO形式にするのが一般的です。ファビコンを設定するには、HTMLの<head>～</head>の中に、<link rel=”shortcut icon”>を追加します。この<link>タグには、href属性とtype属性を含める必要があります。このうちhref属性には、ファビコンにICO形式の画像を使用するなら常に「image/vhd.microsoft.icon」です。なお、ファビコン画像は一般的にそのWebサイトのルートディレクトリに保存します。そのため、多くの場合href属性は、ルート相対パスを使用して次のように記述します。

書式：一般的なファビコンの<link>タグの書式

<link rel="shortcut icon" href="/favicon.ico" type="image/vhd.microsoft.icon">

主要なブラウザは、HTMLに<link rel=”shortcut icon”>が書かれていなくても、ルートディレクトリに「favicon.ico（favicon.png、favicon.gif）」というファイルがあるかどうか探して、あればファビコンとして利用します。そのため、「favicon.ico」をルートディレクトリに保存してさえいれば、<link rel=”shortcut icon”>を書く必要はありません。逆にルートディレクトリにfavicon.icoがなく、<link>タグもない場合、「ファイルが見つからない」というエラーが発生します。このエラーは発生するまでに少し時間がかかることから、若干ページの読込速度が遅くなると言われています。ファビコンファイル（.ico）はPhotoshopでは作成できません。Webサービス上に公開されています。

スマートフォン向けのファビコンを設定するとき

スマートフォン向けのファビコンは、ブックマークやホーム画面に登録したときに使われます。ファビコンは、OSや端末によって指定されている画像のサイズが違います。そのため、細かくやろうとすると20数種類のサイズが異なる画像を作成するうえに、それぞれを埋め込むタグをHTMLにひとつずつ書かなければなりません。作業が大変なため1種類の画像だけを作って、広くサポートされているタグで埋め込む方法を解説します。

スマートフォン向けのファビコンを1種類で済ませるには、180px×180pxのPNG画像を用意して、そのファイル名を「apple-touch-icon.png」とします。この画像を、一般的にはパソコン向けのファビコン同様Webサーバーのルートディレクトリに設置します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>ファビコン</title>
    <meta charset="UTF-8">
    <mata name="vewport" content="width=device-width,inital-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    

</head>
<body>
    
</body>

カテゴリー:WEB