파비콘 아이콘 개념과 제작할 때 주의사항

파비콘 아이콘 개념과 제작할 때 주의사항 파비콘(favicon)은 웹사이트나 웹페이지를 대표하는 아이콘 이미지로, 웹 브라우저 주소창에 표시되는 것을 의미합니다. 작은 사이즈만큼 사소한 영역이지만 웹사이트 제작에서 중요한 디테일이기도 합니다. 아래에서는 파비콘 아이콘이 무엇인지 왜 중요한지에 대해 자세하게 살펴보고 활용 영역에 따라 어떤 표시 형식을 따라야 하는 지 등을 소개하겠습니다.

Part1：파비콘

1. 파비콘 아이콘이 무엇입니까?

파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로 만들어진 단어입니다. 즐겨찾기 아이콘 또는 바로 가기 아이콘이라고 부르기도 하며 일반적으로 웹 브라우저 주소창 좌측에 작은 이미지로 표시됩니다. 웹사이트 아이콘이기도 한 파비콘은 사용자가 웹 브라우저에 여러가지 탭을 사용하고 있을 때 웹 사이트를 쉽게 식별 할 수 있도록 도와줍니다.

2. 각 파비콘 표시 형식

파비콘은 1999년 인터넷 익스플로어 5에 처음 도입되었습니다. 그 이후 사양의 변경 없이 현재까지 유지되고 있습니다. 웹사이트에 적용하기 위해서는 파비콘 이미지 파일을 favicon.ico로 지정하고 웹사이트의 루트(root) 디렉토리에 위치시키면 됩니다.

일반적으로 웹 브라우저 상단에 있는 탭에 표시되고 북마크 바나 방문 기록, 검색결과에서 페이지 링크와 함께 사용되기도 합니다.

1)브라우저

사이트명 왼쪽에 표기되며 탭이 많은 경우, 사이트명이나 주소가 보이지않고 홈페이지 파비콘만 노출되기도 하기 때문에 사용자가 쉽게 식별할 수 있도록 제작되는 것을 추천합니다.

2)북마크

특정 사이트나 웹페이지를 북마크에 추가할 경우에 크롬 브라우저에서는 아래의 이미지와 같이 표시됩니다. 크롬 외에 익스플로러 등에서도 유사하게 사이트명 등의 왼쪽 상단에 표시됩니다.

3)검색결과

구글 등 검색 플랫폼에서 사이트를 대표해 표시됩니다. 검색 플랫폼 정책에 따라 사이트 당 1개의 파비콘을 보유하게 되며 하위 디렉터리 수준의 홈페이지 아이콘의 경우는 지원하지 않을 수 있습니다.

3. 왜 파비콘이 중요할까?

1)브랜드 인식 강화

사용자는 파비콘을 통해 웹사이트 아이콘, 로고 등을 쉽게 인식하게 됩니다. 이를 통해 일관된 브랜드의 정체성을 보여주는 것이 중요합니다.

2)사용자 경험 개선

파비콘은 사용자가 해당 웹사이트를 쉽게 구별하고 관리할 수 있도록 합니다. 이를 통해 원하는 웹을 쉽게 찾을 수 있도록 도와주기 때문에 사용자 경험을 개선하는 효과를 갖게 됩니다.

3)모바일 호환성

파비콘은 웹에서 뿐만 아니라 모바일 장치에서도 동일하게 사용되며 모바일 브라우저나 앱 아이콘으로 활용할 수 있습니다. 이로 인해 사용자가 모바일 환경에서도 동일하게 서비스를 식별할 수 있도록 합니다.

4)SEO 영향

검색엔진 최적화 관점에서도 파비콘은 중요합니다. 검색엔진은 파비콘을 노출하여 웹사이트의 신뢰성과 전문성을 평가하는 요소로 활용하고 클릭율을 높이는 효과가 있습니다.

Part2: 파비콘 만들기 위해 요구&방법

1. 파비콘 사이즈 요구

작은 공간에 표현되는 아이콘 형태이기 때문에 파일 크기가 작고 빠르게 로딩되는 것이 중요합니다. 그래서 파비콘 사이즈는 16x16 또는 32x32를 가장 많이 사용하고 선호합니다.

하지만 웹 브라우저나 모바일 디바이스에 따라 최적화 사이즈가 다르게 요구되기도 합니다. 예를 들어 아이폰 iOS와 안드로이드 크롬의 경우 각각 180x180, 196x196 크기로 요구합니다. 고해상도 및 디스플레이 환경에 맞춰 보다 큰 사이즈를 필요로 하기 때문입니다. 

2. 파비콘 확장자 요구

파비콘은 대표적으로 ico을 사용하지만 대부분의 브라우저가 ico와 png를 모두 지원합니다. 최근에는 png의 사용도 늘어나고 있고 jpg, gif 형식도 활용되고 있습니다. Svg는 백터 이미지로 크기 변환에 편리하지만 지원하는 브라우저가 아직 제한적이라 많이 사용되지 않습니다.

1)Ico

마이크로소프트에서 개발한 파비콘의 기본 파일 형식으로 모든 브라우저가 지원하며 다양한 크기의 이미지를 포함할 수 있습니다.

2)Png

웹사이트 제작자들에게 가장 익숙한 파일 형식으로 자주 사용되는 파일 형식입니다. 만들기 쉽고 파일이 가볍고 빠르게 로드된다는 것이 장점입니다.

3)Svg

고화질 이미지를 사이트의 속도와 성능을 저하하지 않고 전송할 수 있는 가벼운 파일 형식입니다. 아직은 브라우저 호환성 문제로 사용이 제한적이지만 앞으로 많이 사용될 것으로 기대되고 있습니다.

(사진출저: 나무위키)

마무리

파비콘은 웹사이트 대표하는 아이콘 또는 로고 이미지이기 때문에 명확하고 구분되기 쉽도록 단순하게 디자인 되는 것이 중요합니다. 동시에 주요 사용자의 웹 브라우저와 디바이스에 따라 적절한 사이즈와 파일 형식을 고려하여 제작되어야 합니다. 그래서 파비콘을 처음 만드는 초보자라면 Wizlogo, Website planet 등 온라인 파비콘 사이트를 활용해 제작하는 것을 추천합니다.