개발/vue.js
Vue.js 에서 파비콘(favicon)등록
whatd0udo
2024. 5. 18. 15:30
Vue.js 애플리케이션에서 파비콘(favicon)을 등록하려면 일반적으로 public 디렉토리에 있는 index.html 파일을 수정합니다. 여기서 파비콘을 설정하는 방법을 자세히 설명하겠습니다.
파비콘 설정 방법
- 파비콘 이미지 준비:
- 파비콘 이미지를 준비합니다. 일반적으로 .ico, .png, .svg 형식을 사용합니다.
- 준비한 파비콘 이미지를 public 디렉토리에 저장합니다. 예를 들어, favicon.ico 파일을 public 디렉토리에 저장합니다.
- index.html 파일 수정:
- public/index.html 파일을 열고, <head> 태그 내에 파비콘 링크를 추가합니다.
예시
다음은 public/index.html 파일에서 파비콘을 설정하는 예시입니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Vue App</title>
<!-- Favicon 설정 -->
<link rel="icon" href="/favicon.ico">
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
다양한 파비콘 형식 지원
다양한 형식의 파비콘을 지원하고 싶다면, 다음과 같이 여러 <link> 태그를 추가할 수 있습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Vue App</title>
<!-- 다양한 형식의 파비콘 설정 -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
요약
- 파비콘 이미지를 public 디렉토리에 저장합니다.
- public/index.html 파일의 <head> 태그 내에 <link rel="icon" href="/path/to/favicon"> 태그를 추가합니다.
이렇게 하면 Vue 애플리케이션이 로드될 때 브라우저가 파비콘을 인식하고 표시합니다.