🏠 HTML 파비콘(Favicon) 적용 방법

파비콘(Favicon) 이란?🧐
Favorites icon의 줄임말로, 웹 브라우저상에서 주소창 옆에 작게 표시되는 아이콘을 말한다.

• ex) 네이버 파비콘, 구글 파비콘

---

📋 1.1 파비콘 아이콘 파일 준비

파피콘에 사용되는 아이콘은 jpg,png 이미지 파일을 ico 파일로 변경한 후 사용해주어야 한다.

• 파비콘 파일의 확장자는 .icon를 사용한다.
• PNG 파비콘을 지원하지만 Chrome과 Safari는 ICO 파비콘이 함께 지정되어 있으면 선언된 순서에 상관없이 PNG 파비콘을 무시하고 ICO 파비콘을 사용한다.
• 사이즈는 보통 16x16 픽셀이 기본 규격이다.
• 최근의 브라우저들은 32x32 픽셀의 파비콘도 적절하게 축소되어 표현해준다.

파비콘 이미지 추천 사이트 🙌
https://icons8.kr/icons/set/favicon-ico

• 원하는 이미지를 파피콘 사이즈 규격에 맞게 다운로드한다.

파비콘 .ico 확장자 파일 변환 사이트 🙌
https://www.favicon-generator.org/

• 이미지 파일을 .ico 파일 확장자로 변경해준다.

📋 1.2 HTML 문서에 링크 삽입

• 기본 HTML 파일 구조에서 head 태그 영역에 하단의 코드를 추가한다.

<link rel="icon" href="/파일 경로">

link rel 속성🧐
현재 문서와 외부 리소스 사이의 연관 관계를 명시

• 웹 브라우저상에 정상적으로 아이콘이 출력되는 것을 확인할 수 있다. 🤗

참고

https://moolgogiheart.tistory.com/84
https://webdir.tistory.com/337