こんにちは。ヒロユキです。
ブラウザでWebページを開くと、タグのところに小さな画像が表示されます。あれってカッコよくて目立つし、なんかいい感じですよね？
今回はブラウザのタブに表示される画像（ファビコン）と、タイトルについての記述を解説します。
この記事に書いてること
ファビコンとタイトルの設定方法
ファビコンとタイトルの記述は簡単だぞ。設定しておくと視認性もアップするから必ずおぼえようね。
ファビコンって？
ファビコンは、ブラウザのタグに表示される小さな画像のことです。
一般的には、サイトのロゴやシンボルが設定されてます。
スマホやタブレットでは、WebページのURLをホーム画面に追加できますよね？
この時に表示されるアイコンにも、ファビコンが適用されるのです。サイトの認知度アップのためにも設定方法を身につけましょう。
ファビコンの設定方法
ファビコン設定の事前準備
ファビコンの設定をするためには、画像ファイルの準備が必要です。
「index.html」は、HTMLのコードを編集しているファイルのことですね。
.ico（ファイルフォーマット）
アイコンの画像に利用される拡張子のこと。icon（アイコン）の拡張子だから「.ico」で覚えよう。
linkタグ
事前準備ができたらコードを書いていきましょう。
ファビコンの設定は、headタグの中に記述します。使用するのは、linkタグ(!)です。
コードはこんな感じ。↓
<link rel="icon" href="favicon.ico”>linkタグ
別のファイルやページの情報を、編集しているページへ引っ張ってくる役割がある。
linkタグには、「rel属性」と「href属性」っていう2種類の属性が含まれてます。
rel属性
まず、今回表示したいファビコンは拡張子が「.ico」のiconファイルです。
なので、rel属性(!)を ”icon”とします。
<link rel="icon"rel属性（リレーション属性）
あとに続く属性の値について、それが何なのかを説明する役割がある。
<link rel="○○○○はアイコンだぜ" href="○○○○”>href属性
次にhref属性(!)を使って、ファビコンに設定したい画像ファイルを指定します。
今回指定する画像のファイル名は、”favicon.ico”なので次のように書きます。↓
<link rel="icon" href="favicon.ico”>href属性（エイチレフ属性）
linkタグが引っ張ってくるファイルを指定する役割がある。hrefは「hypertext reference」の略。
これでファビコンを表示させるコードが完成だぞ。意外とカンタンだよね？
サイトのタイトルを設定する
タイトルの設定もファビコンと同じ、headタグの中に記述します。
設定したタイトルはタグに表示されるだけでなく、検索結果にも表示されます。
タイトルが設定されていないWebページは、ファイル名がタブに表示されます。
サイトのタイトルも、headタグに記述します。使用するのは、titleタグ(!)です。
titleタグ（タイトルタグ）
サイトのタイトルを設定するためのタグ。
コードはこんな感じ。↓
<title>つみきのーと</title>titleタグでコンテンツを囲みます。
タイトルの記述は、もっとカンタンですね。
ファビコンとタイトルの設定方法 まとめ
ここまでの内容をまとめると、こんな感じのコードになります。↓
<!DOCTYPE html>
<html lang="ja">
<head>
<title>つみきのーと</title>
<link rel="icon" href="favicon.ico">
</head>
<body>
</body>
</html>タイトルもファビコンも、Webページ作りの大切な基本です。
しっかり身につけましょう！
それじゃまた。ヒロユキでした。
HTMLの記述でタブの情報も設定できるって聞いたんですけど…むずかしいですか？