1.생각의시작
Nextjs 로 작업한 이후에 다음과 같은 아이콘이 제대로 적용되지않아 문제가 생김
1) Favicon icon
2) 아이폰, 아이패드 Safari App Home Icon
2.문제점
Link 태그를 아무리 추가해도 적용되지않음
3.에러
1) 프로젝트 구조상에 문제가생김
4.해결법
Linke, Head태그사용하여 해결
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="shortcut icon" href="/assets/img/icon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png" />
<link rel="mask-icon" href="/assets/img/favicon-32x32.png" ></link>
<link rel="icon" href="/assets/img/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/assets/favicon/apple-icon-57x57.png"></link>
<link rel="apple-touch-icon" sizes="57x57" href="/assets/favicon/apple-icon-57x57.png"></link>
<link rel="apple-touch-icon" sizes="60x60" href="/assets/favicon/apple-icon-60x60.png"></link>
<link rel="apple-touch-icon" sizes="72x72" href="/assets/favicon/apple-icon-72x72.png"></link>
<link rel="apple-touch-icon" sizes="76x76" href="/assets/favicon/apple-icon-76x76.png"></link>
<link rel="apple-touch-icon" sizes="114x114" href="/assets/favicon/apple-icon-114x114.png"></link>
<link rel="apple-touch-icon" sizes="120x120" href="/assets/favicon/apple-icon-120x120.png"></link>
<link rel="apple-touch-icon" sizes="144x144" href="/assets/favicon/apple-icon-144x144.png"></link>
<link rel="apple-touch-icon" sizes="152x152" href="/assets/favicon/apple-icon-152x152.png"></link>
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-icon-180x180.png"></link>
<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-icon-192x192.png"></link>
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png"></link>
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png"></link>
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"></link>
<link rel="mask-icon" href="/assets/favicon/favicon-32x32.png" ></link>
<link rel="icon" href="/assets/favicon/favicon-32x32.png" />
</Head>
파비콘(Favicon) 설정: 일반적으로 브라우저에서 사용되는 아이콘입니다
Safari Pinned Tab 아이콘: Safari의 고정된 탭에 표시되는 아이콘입니다
Apple Touch 아이콘: iOS 및 Safari에서 사용되는 특정한 아이콘입니
참고사항