HTMLチュートリアル

HTMLホーム HTMLの紹介 HTMLエディター HTMLベーシック HTML要素 HTML属性 HTML見出し HTML段落 HTMLスタイル HTMLフォーマット HTMLの引用 HTMLコメント HTMLの色 HTML CSS HTMLリンク HTML画像 HTMLファビコン HTMLテーブル HTMLリスト HTMLブロックとインライン HTMLクラス HTMLID HTMLIframe HTML JavaScript HTMLファイルパス HTMLヘッド HTMLレイアウト HTMLレスポンシブ HTMLコンピューターコード HTMLセマンティクス HTMLスタイルガイド HTMLエンティティ HTMLシンボル HTML絵文字 HTML文字セット HTMLURLエンコード HTMLとXHTML

HTMLフォーム

HTMLフォーム HTMLフォーム属性 HTMLフォーム要素 HTML入力タイプ HTML入力属性 HTML入力フォームの属性

HTMLグラフィックス

HTMLキャンバス HTML SVG

HTMLメディア

HTMLメディア HTMLビデオ HTMLオーディオ HTMLプラグイン HTML YouTube

HTML API

HTMLジオロケーション HTMLドラッグアンドドロップ HTMLWebストレージ HTMLWebワーカー HTML SSE

HTMLの

HTMLの例 HTMLクイズ HTML演習 HTML証明書 HTMLの概要 HTMLアクセシビリティ

HTMLリファレンス

HTMLタグリスト HTML属性 HTMLグローバル属性 HTMLブラウザのサポート HTMLイベント HTMLの色 HTMLキャンバス HTMLオーディオ/ビデオ HTMLDoctypes HTML文字セット HTMLURLエンコード HTML言語コード HTTPメッセージ HTTPメソッド PXからEMへのコンバーター キーボードショートカット

HTMLファビコン


ファビコンは、ブラウザタブのページタイトルの横に表示される小さな画像です。


HTMLでファビコンを追加する方法

ファビコンとして好きな画像を使用できます。https://favicon.ccなどのサイトで独自のファビコンを作成することもできます

ヒント:ファビコンは小さな画像であるため、コントラストの高いシンプルな画像である必要があります。

ブラウザタブのページタイトルの左側に、次のようにファビコン画像が表示されます。

ファビコンの例

Webサイトにファビコンを追加するには、ファビコンイメージをWebサーバーのルートディレクトリに保存するか、ルートディレクトリにimagesという名前のフォルダを作成して、ファビコンイメージをこのフォルダに保存します。ファビコン画像の一般名は「favicon.ico」です。

次に、次のように、要素<link>の後に「index.html」ファイルに要素を追加します。<title>

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

次に、「index.html」ファイルを保存して、ブラウザにリロードします。ブラウザタブで、ページタイトルの左側にファビコン画像が表示されます。


ファビコンファイル形式のサポート

次の表は、ファビコンイメージのファイル形式のサポートを示しています。

Browser ICO PNG GIF JPEG SVG
Edge Yes Yes Yes Yes Yes
Chrome Yes Yes Yes Yes Yes
Firefox Yes Yes Yes Yes Yes
Opera Yes Yes Yes Yes Yes
Safari Yes Yes Yes Yes Yes

章のまとめ

  • HTML<link>要素を使用してファビコンを挿入します

HTMLリンクタグ

Tag Description
<link> Defines the relationship between a document and an external resource

利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。