웹브라우저 상단의 제목 왼쪽에 나오는 작은 아이콘인 파비콘을 설정 하는 방법에 대해 설명 합니다.
📌 파비콘 경로와 파일명 설정
(1) 기본 경로 (/favicon.ico)
대부분의 브라우저는 기본적으로 /favicon.ico를 자동으로 요청합니다.
해당 경로에 favicon.ico 파일을 두면 아래 추가적인 설정 없이도 적용됩니다.
브라우저는 사이트의 루트 디렉토리에 있는 favicon.ico 파일을 기본적으로 찾기 때문에, 특별한 설정 없이도 모든 페이지에서 동일한 파비콘이 표시됩니다.
<link rel="icon" href="/favicon.ico" type="image/x-icon">
(2) 사용자 지정 경로 및 파일명
기본 경로가 아닌 원하는 위치와 파일명을 사용할 수도 있습니다.
<link rel="icon" href="/images/favicon-120x120.png" type="image/png">
유의사항
favicon.ico 외에도 원하는 파일명과 경로를 지정할 수 있지만, <link> 태그를 <head>에 포함해야 정상적으로 인식됩니다.
브라우저가 기본적으로 /favicon.ico를 찾으므로, 따로 경로를 설정하지 않으면 /favicon.ico를 요청할 수 있습니다.
(3) 여러 개의 파비콘 설정 (최적화)
다양한 브라우저 및 플랫폼을 고려해 여러 크기와 형식의 파비콘을 설정할 수 있습니다.
특히, favicon.ico 파일 하나에 여러 해상도를 포함시킬 수 있으므로, 추가적인 파비콘 파일들을 함께 제공하는 것이 권장됩니다.
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/images/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/images/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/images/favicon-48x48.png" sizes="48x48" type="image/png">
<link rel="icon" href="/images/favicon-120x120.png" sizes="120x120" type="image/png">
<link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
🔍 결론
- ✅ 파비콘 경로와 파일명은 자유롭게 설정 가능
- ✅ 기본적으로
/favicon.ico경로를 지원하는 것이 좋음 - ✅ ICO 파일 하나에 여러 해상도(16x16, 32x32, 48x48, 120x120)를 포함할 수 있음
- ✅ 추가적으로 PNG 및 SVG 형식도 함께 제공하는 것이 권장됨
- ✅ 원하는 위치와 파일명을 사용할 경우
<link rel="icon">태그를<head>에 추가해야 함