안녕하세요!
벌써 금요일이네요..!
뭐 크게 한게 없는데 일주일이 너무 빨리 갔습니다...ㅠ 원래도 빨리가지만 프로젝트만 시작했다 하면 일주일이 호다닥 지나가는 것 같습니다 ㅜ
그만큼 제가 열심히 하고 있다는 말이겠죠..? ㅠ
ㅠㅠ
오늘은 Next.js 프로젝트에서 favicon을 변경하는 방법에 대해 포스팅 하려고 합니다!
그러면 바로 시작해볼까요?
favicon이 뭐죠..?
네 favicon이라는 것은 
인터넷의 탭에 이름 옆에 있는 아이콘을 말합니다!
어떤 사이트인지 로고를 통해 쉽게 보여주며 각 사이트에 정체성을 보여주기도 합니다!
오오 그러면 어떻게 변경을 할 수 있나요?
기본 next.js의 favicon은 요런 로고를 가지고 있습니다
우리는 이걸 변경할 예정인데요
프로젝트에 내장 되어 있는 public 폴더 안에 먼저 변경하고 싶은 이미지를 넣어주어야 합니다!
저는 먼저 예시로 변경이 되는지 확인하기 위해 narang.jpg 라는 이미지를 넣어봤는데요
해당 사진 처럼 public 폴더 안에 넣어주어야 하는데요
넣어준 후
기본으로 탑재 되어 있는 favicon.ico 파일을 삭제 해줍니다!
그 후
layout.tsx 컴포넌트를 찾아줍니다! 저는 app 폴더안에 위치해 있네요!
export const metadata: Metadata = {
title: "모두의 음식점 | 모-음",
description: "팀원1, 팀원2, 팀원3, 팀원4",
icons: {
icon: "/narang.jpg",
},
};이런식으로 icons 코드를 추가해주면
제가 설정해준 귀여운 이미지로 변경이 됩니다 : )
네! 오늘은 이렇게 Next.js를 이용한 프로젝트에서 favicon 변경하는 방법에 대해 알아보았는데요!
어떻게 해야되는지 몰랐는데 하다 보니깐 또 간단하게 해결했네요 히히
그리고 아직 로고 디자인이 나오지 않아서 그냥 제가 좋아하는 캐릭터로 넣어 포스팅을 작성해보았습니다!
프로젝트를 더 진행하면서 로고가 나오면 호다닥 교체하려고 합니다!
여러분도 보시고 멋있는 로고로 변경하여 사이트의 느낌을 배로 어필해보세요!!
오늘은 이렇게 짧게 포스팅 마무리 하겠습니다!
다음에는 한 층 더 멋진 기능을 가지고 오도록 하겠습니다
그러면 여러분들 모두 화이팅이고! 주말 잘 보내시고!
우리는 또 행복하자구요!!
조심히 들어가세요!!
