MDN から rel と type の関係が分かりやすい例を抜粋します https://developer.mozilla.org/ja/docs/Web/HTML/Element/link
(引用注:rel=favicon の他にも)アイコンの rel 値はいくつもあり、以下のように主に様々なモバイルプラットフォーム上で特殊なアイコンの種別を示すために使用されます。
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="apple-icon-114.png" type="image/png">
sizes 属性はアイコンの寸法を表し、type はリンクされようとしているリソースの MIME タイプが入ります。これらはブラウザーが利用できる最も適切なアイコンを選択するための有益なヒントを提供します。
rel="apple-touch-icon-precomposed"
はリソースの位置づけです。ここでは「iOS/iPadOS でホーム画面に web ページを追加した際に表示するアイコン」であると指定しています。 type="image/png"
アイコン画像のファイルタイプが PNG であることを指定しています。これが位置づけとタイプの違いです。
PNG かどうかは href="apple-icon-114.png"
の拡張子を見れば分かりそうなものですが、 web では拡張子に頼らず MIME タイプ形式でファイルタイプを表すのが通例です。
ただし rel="stylesheet"
の時に限っては、現代で使われるスタイルシートのファイルタイプは CSS しかない(昔は CSS 以外のスタイルシートもあったのですが廃れました)ので、 type="text/css"
は省略することが推奨されています。