【favicon】ブラウザのタグに表示されるファビコンとタイトルの記述方法

アイキャッチHTML04

こんにちは。ヒロユキです。

ブラウザでWebページを開くと、タグのところに小さな画像が表示されます。あれってカッコよくて目立つし、なんかいい感じですよね?

今回はブラウザのタブに表示される画像(ファビコン)と、タイトルについての記述を解説します。

ファビコンとタイトルの設定方法

小松田くん

HTMLの記述でタブの情報も設定できるって聞いたんですけど…むずかしいですか?

尾地ヒロユキ

ファビコンとタイトルの記述は簡単だぞ。設定しておくと視認性もアップするから必ずおぼえようね。

ファビコンって?

ファビコンは、ブラウザのタグに表示される小さな画像のことです。

ファビコンの設定方法1
GoogleChrome画面左上の画像
ファビコンの設定方法2
GoogleChromeタグの画像

一般的には、サイトのロゴやシンボルが設定されてます。

スマホやタブレットでは、WebページのURLをホーム画面に追加できますよね?

この時に表示されるアイコンにも、ファビコンが適用されるのです。サイトの認知度アップのためにも設定方法を身につけましょう。

ファビコンの設定方法

ファビコン設定の事前準備

ファビコンの設定をするためには、画像ファイルの準備が必要です。

  1. フォルダをひとつ準備する。
    (今回はフォルダ名を「MyHTML」にします)
  2. ファビコン用の画像を準備する。
    (画像のファイル名は「favicon.ico(!)」にします)
  3. 編集中の「index.html」と「ファビコン画像」を同じフォルダに入れる。
ファビコンの設定方法3

「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タグの中に記述します。

設定したタイトルはタグに表示されるだけでなく、検索結果にも表示されます。

ファビコンの設定方法1
GoogleChrome画面左上の画像

タイトルが設定されていないWebページは、ファイル名がタブに表示されます。

ファビコンの設定方法4
GoogleChrome画面左上の画像

サイトのタイトルも、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ページ作りの大切な基本です。

しっかり身につけましょう!

それじゃまた。ヒロユキでした。

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪