브라우저 파비콘 사이즈별로 설정하기

파비콘이란?

웹페이지를 표시하도록 설정된 아이콘이다.

manifest.json 파일과 <link> 메타 태그를 통해 설정할 수 있다.

manifest 파일 설정하기

{
  "name": "My Website",
  "icons": [
    {
      "src": "favicon-32x32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png"
    }
  ]
}

icons 배열에 사이즈별로 아이콘을 추가한다.

아이콘 파일의 크기와 sizes 가 다른 경우 브라우저 경고가 발생하므로 각 사이즈의 파일이 필요하다.

link 태그 설정하기

<link> 태그의 rel 속성은 연결된 리소스와 현재 문서 간의 관계를 정의한다.

기본 파비콘

<link rel="icon" href="favicon.ico" />

icon 링크 유형은 일반적으로 ico 형식의 파비콘을 링크할 때 사용한다.

구 브라우저에서는 shortcut icon 유형을 사용했었지만 현재는 사용하지 않는다.

<link> 태그가 여러 개인 경우 가장 마지막 링크로 적용된다.

ios

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png" />
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="touch-icon-iphone-retina.png"
/>
<link
  rel="apple-touch-icon"
  sizes="167x167"
  href="touch-icon-ipad-retina.png"
/>

ios 기기에서 파비콘을 사용하기 위해서 apple-touch-icon 링크 유형을 사용한다.

여러 해상도에서 파비콘을 지원하기 위해서는 여러 링크에 sizes 옵션을 설정하여 각 파비콘의 크기를 지정해야 한다.

대부분의 아이콘 형식은 하나의 아이콘만 저장할 수 있으므로 sizes 속성에는 하나의 아이콘만 포함된다.

파비콘의 확장자가 svg인 경우 sizes에 “any”를 지정할 수 있다.

참고사이트

icon
sizes
Specifying a Webpage Icon for Web Clip