[Project] 야숨 지도. 파비콘을 추가해보자. w. Next.js

Favicon 설정

Next.js의 기본 favicon을 지우고 젤다 야숨 로고를 파비콘으로 넣어보자.

 

요고로 만들어보자.

Next.js에서 favicon에 대한 파일 형식을 .ico만 지원하기 때문에 위의 이미지 파일 형식을 ico로 변환하자.

변환된 파일을 그대로 favicon.ico로 해서 사용해보니 아래처럼 용량이 엄청 크다. (사이즈가 너무 크다)

이미지 사이즈를 32x32로 줄여보자.

https://products.aspose.app/imaging/ko/image-resize/ico 이 사이트에서 크기 조절함.

높은 출력 품질로 무료 온라인 크기 조정 ICO 이미지

이미지 크기가 엄청 줄었다!

apple-icon란

apple 기기에서 웹 사이트의 북마크나 홈 화면에 추가할 때 사용되는 이미지이다.

이미지를 추가하지 않았을 때는 다음과 같이 이미지가 나타나지 않는다.

이미지 크기는 

180x180 - iPhone retina

167x167 - iPad retina

152x152 - iPad

인데 180x180만 만들어도 iOS가 알아서 사이즈 조절을 해준다고 한다. (가성비의 180!!)

jpg는 투명도를 지원하지 않아서 180x180 사이즈의 png 파일로 만들고 확인해보자.

캬 이쁘다

icon이란

favicon처럼 사용되는 이미지이다.

우선순위가 favicon.ico보다 높아서 icon 파일이 있으면 그 이미지가 파비콘으로 사용된다.

 

참고

https://recodelog.com/blog/next/metadata-icon

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Configuring Web Applications

claude ai

chat gpt