앱 파비콘 추가하기

Vite는 앱을 위해 간단한 파비콘을 생성하고 public/vite.svg에 저장합니다. 하지만 모든 브라우저와 모바일 플랫폼에서 파비콘이 작동하려면 추가 작업이 필요합니다. 다양한 요구사항과 크기가 존재합니다. 이 과정에서 public/ 디렉토리에 파일을 포함하는 방법을 배울 수 있습니다.

예제로 간단한 이미지를 시작점으로 사용하고, 이를 기반으로 다양한 버전을 생성해 보겠습니다.

마우스 오른쪽 버튼을 클릭하여 아래 이미지를 다운로드하세요. 또는 https://guide.sst.dev/assets/scratch-icon.png 링크로 이동하여 다운로드할 수 있습니다.

대부분의 타겟 플랫폼에서 아이콘이 작동하도록 하기 위해 Favicon Generator 서비스를 사용합니다.

Select your Favicon picture을 클릭하여 아이콘을 업로드하세요.

Realfavicongenerator.net 스크린샷

아이콘을 업로드하면 다양한 플랫폼에서의 미리보기가 표시됩니다. 페이지를 아래로 스크롤하여 Generate your Favicons and HTML code 버튼을 클릭하세요.

Realfavicongenerator.net 스크린샷

이 과정에서 파비콘 패키지와 함께 HTML 코드가 생성됩니다.

Change indicator Favicon package를 클릭하여 생성된 파비콘을 다운로드하세요. 그리고 모든 파일을 public/ 디렉토리로 복사하세요.

Realfavicongenerator.net 완료 스크린샷

이전 아이콘 파일을 제거합니다.

Change indicator 그런 다음 public/site.webmanifest 파일의 내용을 아래와 같이 교체하세요.

{
  "short_name": "Scratch",
  "name": "Scratch Note Taking App",
  "icons": [
    {
      "src": "android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Change indicator public/index.html의 <head>에 다음 내용을 추가하세요.

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="description" content="A simple note taking app" />

Change indicator 그리고 원래 파비콘을 참조하는 다음 줄을 제거하세요.

<link rel="icon" type="image/svg+xml" href="/vite.svg" />

마지막으로 브라우저에서 기본 URL 경로에 /favicon-32x32.png를 추가하여 파일이 올바르게 추가되었는지 확인하세요.

다음으로 앱에 커스텀 폰트를 설정하는 방법을 살펴보겠습니다.

앱 파비콘 추가하기

SST Guide