차곡차곡

Vue.js 에서 파비콘(favicon)등록 본문

개발/vue.js

Vue.js 에서 파비콘(favicon)등록

whatd0udo 2024. 5. 18. 15:30

Vue.js 애플리케이션에서 파비콘(favicon)을 등록하려면 일반적으로 public 디렉토리에 있는 index.html 파일을 수정합니다. 여기서 파비콘을 설정하는 방법을 자세히 설명하겠습니다.

파비콘 설정 방법

  1. 파비콘 이미지 준비:
    • 파비콘 이미지를 준비합니다. 일반적으로 .ico, .png, .svg 형식을 사용합니다.
    • 준비한 파비콘 이미지를 public 디렉토리에 저장합니다. 예를 들어, favicon.ico 파일을 public 디렉토리에 저장합니다.
  2. 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 애플리케이션이 로드될 때 브라우저가 파비콘을 인식하고 표시합니다.

저작자표시 비영리 변경금지

'개발 > vue.js' 카테고리의 다른 글

swagger api 와 quicktype을 이용하여 api 작업  (0) 2024.06.12
vue slot & composition api  (0) 2024.05.18
vue.js 핵심기능  (0) 2024.05.07
레이아웃 컴포넌트와 그리드 컴포넌트 활용  (0) 2024.05.03
Vue.js 레이아웃 컴포넌트 활용  (0) 2024.05.03
'개발/vue.js' Related Articles more