Nextjs App Icon 편집 

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />


<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png" />
      <link rel="apple-touch-icon-precomposed" href="/assets/favicon/apple-touch-icon.png"/>
      <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png" />
      <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png" />
      <link rel="manifest" href="/assets/favicon/site.webmanifest" />
      <link rel="mask-icon" href="//assets/faviconsafari-pinned-tab.svg" color="#5bbad5" />
      <link rel="mask-icon" href="/assets/favicon/favicon-32x32.png" ></link>
      <link rel="icon" href="/assets/favicon/favicon-32x32.png" />

1.apple-mobile-web-app-capable

Web app 이지만URL바를 안보이게 처리해줄수있다.

2.apple-mobile-web-app-status-bar-style

상태바의 색상을 지정할수 있다. 바탕화면이 검정색인 어플리케이션의 경우 상태바만 회색인 이질감을 줄이기 위해 사용한다.

3가지 스타일 : default (회색) , black , black-translucent ( 반투명 )

3.apple-touch-icon 

애플 기기의 홈 아이콘에 사용된다. 

4. apple-touch-icon-precomposed

Web app 이지만 앱 처음로딩시 로고같은것을 지정해줄 수 있다. 

5. icon 

16, 32 각각 사이즈별 아이콘지정 

파비콘은 브라우저 탭에 작은 아이콘뿐아니라 북마크, 바로가기 아이콘 등등 활용되는데

png의 경우 16픽셀 사이즈만 덜렁 올려놓게 되면 다른곳에 활용될때 저해상도라 깨져보일 수 있어서

아래와 같이 size속성을 추가해 값에 따라 여러개를 추가해서 브라우저가 적절한 픽셀이미지를사용할 수 있게한다.

6.

반영전	반영후

Tips

- Nextjs, React 앱의 Url 에서 {url}/세부경로 인상태에서 

- Add to tab 을 하거나 할경우 

- layout.js 가 제대로 적용되지 않아 

- 반영전 UI처럼 상단에 번역 팝업과, URL정보가 보일수있다.