파비콘은 웹페이지 아이콘이라고 생각하면 됩니다. 크롬의 경우 북마크를 했을 때 웹페이지의 아이콘과 웹페이지 이름이 같이 보이는데, 이 아이콘을 파비콘이라고 합니다.

프로젝트를 만들 때 파비콘을 설정해야 안심이 되더라고요... 그냥 지구 모양은 절대 못봐줌

그래서!! 저도 할 때마다 맨날 어떻게 하는지 까먹는 파비콘 등록하기에 대해 포스팅을 합니다.

ico 이미지 준비

파비콘 아이콘의 확장자는 ico가 적합합니다.

PNG를 ICO로 변환 - PNG에서 아이콘 생성하기 - HiPDF

PNG에서 빠르게 아이콘 파일을 생성합니다. 16x16에서 256x256까지 아이콘 사이즈 지정이 가능합니다. 설치 또는 가입이 필요하지 않습니다. PNG를 ICO로 온라인에서 무료로 일관 변환하십시오.

www.hipdf.com

저는 항상 위 사이트에서 바꿔요

근데 사실 png나 svg도 상관 없는 거 같긴 하더라고요

파비콘 적용하기

<link rel="icon" href="아이콘 이미지가 있는 경로">

단 한 줄의 코드로 파비콘을 지정할 수 있습니다

예시

<link rel="icon" href="./resource/image/icon.ico">

너무 간단해서 부끄럽네요