ファビコンは、ブラウザーのタブに表示される小さなアイコンです。これらは通常は単純な ICO ファイルですが、近年では Web サイトのアイコンのようなものになり、競合するサイズやタイプが数多く存在します。
ファビコンはどのように使用しますか?
ほとんどのブラウザは、複数の異なるタイプのファビコンをサポートしています。ほとんどの場合、ブラウザーは指示しなくても、可能性のある場所にあるファビコンを自動的に取得しますが、Web サイトに手動で追加することもできます。
正確なサイズまたは形式がない場合、ほとんどのブラウザはサポートできる最高解像度の画像を使用し、ファビコンを拡大または縮小します。 「公式」アイコンの解像度ごとに 20 個の異なる favicon ファイルを含める必要は実際には必要ありません。デフォルトに加えて高解像度のファビコン ファイルをいくつか含めるだけです。ただし、すべてを含める必要がある場合は、この チートシートを 参照して詳細を確認できます。
アイコンとして使用する画像を取得したら、任意のフォト エディターでファビコンを手動で作成できます。ただし、健全性を保つために、 ファビコン ジェネレーター を使用して自動的に実行することをお勧めします。これにより、リンクしたいファイルが大量に生成されます。
< link >
そして
< meta >のタグ
< head >Web サイトの HTML セクション。
独自の Web サーバーを管理していない場合 (つまり、SquareSpace などのサービスでホスティングを管理している場合)、ファビコン ファイルに関する設定についてプロバイダーに確認する必要があります。通常、それは彼らがあなたのために処理し、あなたはファイルを提供するだけで済みます。
通常のファビコンタグ
元のファビコンは
favicon.ico
ファイルです。最小サイズは 16×16 ですが、ICO ファイルには複数の異なる解像度を含めることができます。通常、
favicon.ico
16×16、32×32、および 48×48 のアイコンがすべてバンドルされたセットになります。オンラインの
ファビコン ジェネレーター
を使用して、任意の PNG からこのアイコンを作成できます。
favicon.ico
ファイルへのリンクを追加することで、favicon を追加できます。このファイルは通常、Web サーバーのルート (最上位ディレクトリ) に、
index .html
およびその他のファイル。
<link rel="ショートカットアイコン" href="favicon.ico" />
ほとんどのブラウザはファイルを自動的にチェックするため、実際にはタグは常に必要というわけではありませんが、含めておくことをお勧めします。これは最も一般的なタイプのファビコンであり、ファビコンをサポートしているほぼすべての場所でサポートされます。
ファビコンが機能しない場合は、ファイルが適切な場所にないことが原因である可能性が高くなります。
http://www.yourwebsite.com/favicon.ico
にアクセスできるかどうか、またブラウザで正しく表示されるかどうかを確認してください。ファイルを手動でアップロードした場合は、適切な権限がない可能性があります。これは、コマンド ラインから次のように修正できます。
sudo chmod +r favicon.ico
これにより、Web サーバーによる読み取りが可能になります。
PNG ファビコン
ほとんどの新しいブラウザーは、Chrome の新しいタブ ページや Android デスクトップなど、タブ バー以外の領域で使用するために、高解像度の PNG ファビコンをサポートしています。おそらく、拡大したときにアイコンがピクセル化して見えないように、これらが必要になるでしょう。
ブラウザーはより高解像度のファイルを選択するため、
favicon.ico
ファイルに加えてこれらを使用できます。
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”>
<link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.png”>
favicon ジェネレーターは
android-chrome-512x512.png
ファイルも生成しますが、これは自動的にチェックされるため、タグは必要ありません。 Android 上の Chrome は、Apple Touch アイコンが見つからない場合に、それを使用して代替します。含めたい場合は、寸法を変更して別のファイルを指定することで、任意のサイズの PNG アイコンを含めることができます。
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
ほとんどのブラウザは必要なファビコンのみを要求するため、さらにリンクを追加することはそれほど問題ではありません。
アップルタッチアイコン
これは、Web ページが Safari から iOS ユーザーのホーム画面に追加されるとき、および iOS UI の他のさまざまな場所に使用されるアイコンです。 Retina スクリーンでは、高解像度のアイコンがあると大きな違いが生じます。
その正確なサイズは iOS のバージョンによって
大きく変わりましたが
、常に正方形であり、Retina iPhone の現在の幅は 180 ピクセルです。次のように、
apple-touch-icon
リンクを使用して iOS アイコンを追加できます。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
iOS は高解像度のアイコンを自動的に縮小しますが、PNG アイコンと同じように、異なるサイズの複数のアイコンを追加して帯域幅を少し節約できます。
ほとんどのブラウザは
/apple-touch-icon.png
を自動的にチェックするため、タグが必要ない場合もあります。このアイコンは非常に一般的なため、高解像度の PNG アイコンを指定しない場合の多くのブラウザーのフォールバックとしても使用されます。
Safari と Touch Bar アイコン
Safari には、macOS Touch Bar にモノクロアイコンを使用するオプションがあります。これは完全に必要なわけではありません。これが存在しない場合でも Safari は通常のファビコンを使用しますが、アイコンの背景に色が付いていると 見栄えが少し良くなります 。
これらは favicon ジェネレーター を使用して自動的に作成できますが、以下を追加する必要があります。
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">
増え続けるリンクのリストへ。 Safari はこれを自動的にチェックしません。
Windows 10 メトロ タイル
誰かがあなたのサイトをスタート メニューまたはデスクトップに固定すると、サイトのアイコンが表示されます。
これは、Safari と同様に、完全に必要というわけではないため、持っていない場合は他のファビコンに頼るべきです。ただし、[スタート] メニューに固定したときに見栄えを良くするには、設定用のメタ タグがいくつか必要です。
<meta name="msapplication-TileColor" content="#000000">
<meta name=”msapplication-config” content=”/browserconfig.xml”>
<meta name=”テーマカラー” content=”#ffffff”>
実際には、背景タイルの色とテーマの色を定義するだけです。構成の残りの部分は XML ファイルに配置されます。
<?xml バージョン="1.0" エンコーディング="utf-8"?>
<ブラウザ設定>
<msアプリケーション>
<タイル>
<square150x150logo src=”/mstile-150×150.png”/>
<タイルカラー>#000000</タイルカラー>
</タイル>
</msアプリケーション>
</browserconfig>
これは、1 つのファイル リンクだけでは少し冗長に思えます。正しく動作させるには、
mstile-150x150.png
ファイルを Web サーバーのルートに配置する必要があります。
Web サーバーのルートでのファイルのホストを回避する
サーバーのルートでホストされているファイルを公開したくない場合は、いつでも
/favicon.ico
別の場所にリダイレクトできます。たとえば、nginx では次のようにすることができます。
場所 = /favicon.ico {
ルート /new/images/パス;
}
これにより、nginx は
/new/images/path
でファビコンを探します。これはクライアント側には影響を与えないため、すべてが同じであるかのように
/favicon.ico
にリンクする必要があります。
