파비콘(Favicon)에 대해 간단히 알아보기

[서론 입니다] 마케팅을 하다보니 마이크로 페이지나 브릿지 페이지가 필요하게되어 웹사이트를 구축할 일이 생각보다 많을 때가 있다.

웹사이트를 대표하는 이름 혹은 로고도 있지만, 아임웹이나 윅스 같은 간단히 웹사이트를 만드는 웹 생성 플랫폼을 사용할 경우 생각보다 놓치면 안되는 것이 바로 파비콘(Favicon)이다.

 

 그 이유는 이 블로그를 봐도 그렇다. 해당 키워드로 검색결과 최상단에 노출시켰는데 아무런 설정도 하지 않아서 티스토리 블로그 아이콘이 그대로 노출되고 있다. 물론 티스토리를 좋아하지면 사이트의 아이덴티티를 더욱 표현하기 위해서는 변경하는 것이 좋지 않을까 싶다.

서론 끝

---

 

[본론] 파비콘(Favicon)이란 무엇일까?
👉 파비콘(Favicon)은 웹사이트 또는 웹 페이지를 대표하는 16x16 픽셀 크기의 작은 이미지
즐겨찾기 아이콘(favorite icon)의 약자로, 주로 웹 브라우저 상단에 있는 탭에 표시된다

파비콘 예시 오른쪽 : 북마크에 표기되는 아이콘 / 왼쪽 : 브라우저 탭에 표기되는 아이콘

우리가 그냥 웹사이트 로고 라고 불렀던 것들이 사실은 '파비콘'이라는 정식 명칭을 가지고 있었던 것

파비콘은 웹사이트의 브랜드 이미지를 강화하고 사용자들이 웹상에서 사이트를 쉽게 식별하도록 돕는 중요한 역할을 한다.

✅ 파비콘의 역할
- 브랜드 식별: 웹사이트를 시각적으로 표현하여 브랜드 인지도를 높임
- 사용자 경험 향상: 탭, 북마크, 검색 결과 등에서 사이트를 쉽게 찾을 수 있도록 도움

파일 형식은 ICO, PNG, SVG으로 사용가능하지만 'ICO' 형식이 가장 사용되는 곳이 많다.
저장 위치: 웹사이트 루트 디렉터리 

이미지 크기(사이즈)는 16x16 ~ 64x64 픽셀(pixel) 까지 되지만

16x16 ~ 32x32 픽셀이 가장 문제가 적었던 것 같다.

 

만약 가지고 있는 이미지의 확장자가 'PNG'인 경우 'ico'형식으로 변환해야하는데

하단 링크를 통해 변경하면 될 것 같다.

https://convertio.co/kr/png-ico/

PNG ICO 변환 (온라인 무료) — Convertio