HTMLの基礎の基礎08

作成日：2026-04-20

【34】favicon（ファビコン）とは。

• ブラウザでページを開いた時に、タブに表示される小さいアイコンが「ファビコン」です。
• ページをブックマークした時にも左側に表示され、視認性が格段にUPします。
• 検索結果にも表示されます。
• ファイル形式は「.ico」が最適ですが、「.png」「.gif」でも作ることが可能です。
• 必ず「favicon」という名前で保存します。

<head>
	<link rel="icon" type="image/x-icon" href="img/favicon.ico">
</head>

• <head></head> 間に書き込みます。基本は上記です。
• が、下記でも大丈夫です。
• このページではpng画像を使用しています。右クリックでソースを見ると確認できます。

<head>
	<link rel="icon" href="img/favicon.ico">
	
	<link rel="icon" href="img/favicon.png">
	
	<link rel="icon" href="img/favicon.gif">
</head>

• ico形式ファイルなら上記の1行目だけを使用します。
• 使用する画像ファイル形式に合ったものを1行だけ使用します。

【35】favicon（ファビコン）用の画像サイズ

• 「ファビコンの作り方」と検索すると「.ico」ファイル形式に変換してくれるサイトをたくさん見つけることもできます。
• png形式画像か、gif形式画像を1枚用意して、それをそのままfaviconとして使用することもできます。


• 今回はpng形式画像1枚だけを作り、設定します。ico形式に変換せず、png形式のまま使用します。
• 画像の大きさは180px*180pxを使用します。スマホ用のホームアイコンに対応したサイズです。

• このページに使用しているfavicon用画像です。
• できるだけシンプルなデザインにして下さい。
• 小さく表示されるので色々描き込んでもゴチャゴチャするだけで見えなくなります。
• 透過png形式を使用することで正方形以外の形にもできます。
• 透過させないと抜いた部分が白く残ります。

【36】copyright（コピーライト）とは。

• copyrightとは、そのサイトが誰の物なのかをはっきりさせるために見える場所に書いておくものです。
• 大抵の場合「管理責任者名（ネット上のニックネームでもよい）」を表記します。


• 「2013-2026 COPYRIGHT©ニックネーム」と毎年、最新年の部分を書き換えている人をたまに見掛けますが、あれは不要です。
• 年号を書かなければいけないというルールもありません。


• が、開始年は書いておいた方が後々何かと便利かもしれません。
• いつから作り始めたのか忘れがちですし、いつからこのサイトが存在しているのか、見る側も気になるものです。

• ルールとして決まった書き方はありません。
• 年号を入れているサイトもあれば、入れていないサイトもあります。
• 書き方も上記のように色々あります。


• © ←このマークは「こぴーらいと」で変換すると出てきます。
• この1文字でcopyrightという意味があるので便利です。

【今回はここまでです】

今回は「favicon（ファビコン）とは」「favicon用の画像サイズ」「copyright（コピーライト）とは」を解説しました。

ファビコンは無くても大丈夫ですが、あった方がずっと見栄えがいいですね。

次回は「センターで揃える」「改行させずに割り込ませるspan」「枠の角を丸めるcss」を解説したいと思います。