[HTML]나만의 파비콘(Favicon) 간단히 만드는 방법 (feat. favicon.cc)

파비콘(favicon)이란? Favorite icon의 줄임말입니다.

웹사이트를 브라우저에 열었을 때, 탭 좌측에 표시되는 아이콘입니다.

 

예시) 파란색 P 아이콘

 

반드시 정사각형 형태의 이미지를 사용해야 합니다.

ICO format에 따라 권장되는 사이즈는 16x16, 32x32, 48x48 pixels 입니다.

 

이번 포스팅에서 설명드릴 내용은 나만의 파비콘 만드는 방법입니다.

 

1. favicon.cc 웹사이트 접속 → Create New Favicon 버튼 클릭

광고가 조금 뜨긴 하지만, 무료로 사용할 수 있는 웹사이트입니다.

 

2. 펜으로 그리기

오른쪽 Color Picker에서 원하는 색상을 선택할 수 있습니다.

 

3. 파일 다운로드

하단에 Download Favicon을 클릭하면, 본인이 그린 이미지를 파비콘 사이즈에 맞게 다운로드하게 됩니다.

 

 

4. HTML 파일의 head 태그 안에 link 추가

    <link rel="icon" href="favicon.ico">

href는 파일의 위치.

(저는 같은 폴더 안에 favicon.ico 파일을 위치했기 때문에 위와 같이 연결 되었습니다)

 

예시) 파란색 P 아이콘

위 이미지처럼 적용되는 것을 볼 수 있습니다.

 

참고 링크

https://www.favicon.cc/

favicon.ico Generator