📖 React에서 Favicon(파비콘) 설정

언지·2024년 11월 21일

React favicon

React

목록 보기

6/13

📍 Favicon이란?

: 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지
: 특정 웹 사이트를 식별 가능하게 해주는 대표 아이콘

✅ 예시

📍 Favicon 적용 방법

: 보통 React 애플리케이션에서는 HTML 형식이 있는 파일에 파비콘 링크를 추가하는 방식으로 적용 (index.html)
: <head> 태그 안에 입력되어야 한다.
: 플랫폼별 요구하는 특정한 아이콘 형식 및 크기가 다르다

1-1. 브라우저(크롬, 웨일 등등)

브라우저에서는 기본적으로 <link rel="icon">을 통해 설정한 작은 아이콘을 사용 ➡️ 브라우저의 탭, 주소창, 북마크에 표시
(16 X 16, 32 X 32, 96 X 96)
이 설정만으로 모바일 기기에서 홈 화면에 추가할 때는 적용이 안되거나 해상도가 낮을 수 있다.

<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">

1-2. 아이폰 및 아이패드 (iOS)

홈 화면에 웹사이트를 추가할 때 apple-touch-icon 설정 필요

  <link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png">

1-3. 안드로이드 (AOS)

안드로이드에서는 192 X 192 px 이상의 큰 아이콘을 요구 ➡️ <link rel="icon" sizes="192x192"> 사용
```
<link rel="icon" type="image/png" sizes="192x192"  href="favicon/android-icon-192x192.png">
```


- PWA(Progressive Web App) 와 관련된 `manifest.json` 파일의 아이콘 설정 필요

>#### 📍 `manifest.json` 파일 이란?
- 웹사이트를 모바일 기기나 데스크톱에서 앱처럼 설치하고 사용할 수 있게 하기 위해 필요한 메타데이터를 포함
- 웹 애플리케이션의 이름, 아이콘, 색상등의 정보를 포함하는 파일

{
"name": "App", ➡️ 웹앱의 이륾 정의
"icons": [ ➡️ 웹앱에서 사용할 아이콘 목록 정의
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36", ➡️ 해상도가 낮은 기기에서 사용
"type": "image\/png",
"density": "0.75" ➡️ 아이콘의 해상도 비율 정의
},➡️ 아이콘 목록 설명
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48", ➡️ 표준 밀도(MDPI) 기기에서 사용
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72", ➡️ 중간 밀도(HDPI) 기기에서 사용
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96", ➡️ 고밀도(XHDPI) 기기에서 사용
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144", ➡️ 초고밀도(XXHDPI) 기기에서 사용
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192", ➡️ 매우 높은 해상도(XXXHDPI) 기기에서 사용
"type": "image\/png",
"density": "4.0"
}
]
}


### 1-4. Windows(Microsoft 타일 설정)
- Microsoft 타일 설정이란?
: Windows 8/10 과 같은 Windows 운영 체제의 시작 메뉴에 웹사이트를 앱처럼 고정할 수 있는데, 이때 웹사이트를 대표하는 타일 아이콘이 표시된다.
➡️ 타일 아이콘을 설정하면 독특한 이미지와 색상으로 표시되어 **사용자가 더 쉽게 웹사이트를 인식 가능**
- `msapplication-TileImage` , `msapplication-TileColor`을 통해 타일에 표시되는 이미지를 제어
>```
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

언지

이전 포스트

[React] 📖 이벤트 핸들링

다음 포스트