記事概要
ファビコンについて、整理する
ファビコンとは
サイトのタブに表示されているアイコンのこと
Favorite(お気に入り) + Icon(アイコン)で、Favion(ファビコン)
16px四方と小さいが、複数タブを開いている時やブックマークリストでどのサイトなのかを区別しやすくなる
デザイン
ロゴマークを縮めたり簡略化したものが多い
小さくてサイズ制限があるため、シンプルな図形を使ってわかりやすくデザインすることがポイント
設定方法
HTMLのhead要素に記述することで、ファビコンを設定できる
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Web Cafe</title>
<!-- Webブラウザ用のファビコンを設定 -->
<link rel="icon" type="image/png" href="icon.png">
</head>
<body>
<h1>Web Cafeオープンのお知らせ</h1>
</body>
</html>
ファビコン未設定の場合
生成サービス
生成サービスを使用することで、
- こちらのサイトにアクセスする
-
Pick your favicon imageをクリックし、ファビコン画像を選択する - 各ファビコン設定を行い、
Nextをクリックする - 指示に従ってHTMLファイルを更新する