파비콘 생성 도구 활용하여 파비콘 추가 방법
1. 200x200px 이상의 고화질 PNG 또는 SVG 파일 준비
2. 아래 사이트 접속
https://realfavicongenerator.net/
3. 이미지를 첨부
4. 아래 화면과 같이 원하는 형태 설정 및 미리보기로 확인 가능
5. 이름 설정 확인해서 잘하기
6. 맨 아래 Next를 클릭
7. 아래 이미지와 같이 1번 다운로드 누른 후 이미지를 프로젝트 public 폴더에 저장
7. 3번 코드를 index.html(리액트 기준)의 head 태그 안에 복붙하면 끝
자주 하는 실수
- 경로 설정 오류: href 경로를 파일이 실제 위치한 곳과 다르게 설정하여 아이콘이 뜨지 않는 현상 발생 (절대 경로 / 권장)
- 캐시 문제: 파일 수정 후 브라우저에 즉시 반영되지 않는 경우 발생 (강력 새로고침 또는 브라우저 캐시 삭제 필요)
- 저해상도 파일 사용: 16x16px의 작은 이미지만 등록하여 레티나 디스플레이나 모바일에서 흐릿하게 보이는 실수
참고사이트
