Next.js 로 개발한 프로젝트의 favicon이 검색 결과에 뜨지 않는 문제!

Next.js로 개발한 프로젝트의 favicon이 브라우저 탭이나 북마크에서는 잘 보이지만 검색 결과에서 표시되지 않는 문제가 발생했습니다.

북마크 - favicon

탭 - favicon

검색 결과 - faviocn (x)

🧐 다음은 이 문제를 해결하기 위해서 고려해볼 수 있는 몇 가지 사항들입니다

favicon 표시 문제 해결을 위한 점검 사항

favicon 형식 확인 : 가능한 favicon.ico 를 사용합니다. (*https://www.favicon-generator.org 파비콘 생성 페이지)
public 폴더 확인: favicon 파일이 정확한 경로에 있는지 확인합니다. Next.js에서는 public 폴더에 favicon.ico 파일을 위치시켜야 합니다.

올바른 태그 사용: <head> 태그 내에 favicon을 위한 올바른 HTML 요소(<link rel="icon" href="/favicon.ico" />)를 사용했는지 확인합니다.

 {/* 파비콘 */}
        <link rel="icon" type="image/jpeg" href="/assets/sam.jpeg" />
        <link rel="apple-touch-icon" href="/assets/sam.jpeg" />
        <link rel="icon" href="/favicon.ico" type="image/x-icon" />

Next.js 빌드 문제: 때때로 빌드 과정에서 이슈가 발생할 수 있습니다. .next 폴더를 삭제한 후 프로젝트를 다시 빌드해보세요.
브라우저 캐시 문제: favicon이 변경되었음에도 불구하고 브라우저가 이전에 캐시된 favicon을 사용할 수 있습니다. 브라우저 캐시를 확인하고 필요한 경우 비워보세요.
검색 엔진의 favicon 색인: 일부 검색 엔진은 자체적으로 favicon을 저장하고 관리합니다. 변경 사항이 반영되기까지 시간이 걸릴 수 있습니다.

적용을 완료했다면, 엔진이 변경된 favicon 색인해야하기 때문에, 2 ~ 3 일 정도 기다려줘야한다!😊💡

[Next JS | favicon | 파비콘] Next JS 프로젝트 탭,북마크는 favicon이 적용되는데 검색결과에 favicon이 적용 안될 때 해결법