브라우저에 탭을 여러 개 열어놓고 계신가요? 그중에 유독 물음표 아이콘이나 텅 빈 사각형만 떠 있는 탭이 있다면, 그 사이트는 이미 손해를 보고 있는 셈입니다. 파비콘(favicon)이 없으면 여러 탭 사이에서 눈에 띄지 않고, 즐겨찾기 목록에서도 다른 사이트들 틈에 묻히기 때문입니다. 아이비전트가 무료로 공개한 파비콘 생성기를 직접 써보면서, 파비콘이 정확히 무엇이고 왜 신경 써야 하는지, 그리고 무료 도구만으로 충분한지를 정리해봤습니다.
파비콘(favicon)이란 무엇일까요?
파비콘(favicon, Favorite Icon의 줄임말)이란 브라우저 탭·즐겨찾기·검색결과 옆에 표시되는 웹사이트의 작은 대표 아이콘을 말합니다. 보통 favicon.ico 파일 하나와 여러 크기의 PNG 이미지로 구성됩니다. 별것 아닌 것 같아도, 방문자가 여러 탭을 오갈 때 "아, 이게 그 사이트다" 하고 한눈에 알아보게 만드는 역할을 합니다.
구글은 검색결과에도 사이트 파비콘을 함께 노출합니다. 즉 파비콘이 없거나 깨져 있으면 검색결과 목록에서도 다른 사이트보다 신뢰도가 낮아 보일 수 있습니다. 작은 아이콘 하나가 브랜드를 대표하는 도장 같은 역할을 하는 셈입니다.
유료로 맡겨야 할까요, 무료 도구로 충분할까요?
파비콘도 디자인 영역이니 전문 디자이너에게 맡겨야 하지 않을까 생각하실 수 있습니다. 실제로 브랜드 로고를 새로 만드는 작업이라면 디자이너와 상의하시는 것이 맞습니다. 다만 이미 로고나 심볼 이미지를 갖고 계신 상태에서 "이걸 파비콘 크기로 변환"하는 작업이라면 이야기가 다릅니다.
이 경우는 단순 리사이즈와 포맷 변환 작업이라, 무료 온라인 도구로도 결과물에 차이가 없습니다.
"파비콘 제작에 필요한 건 대단한 디자인 실력이 아니라, 이미 있는 이미지를 정확한 크기로 뽑아내는 도구입니다." 이 전제만 맞는다면 무료 도구로 못 할 이유가 없습니다.
아이비전트 무료 파비콘 생성기, 직접 써봤습니다
아이비전트 무료 도구 메뉴에 있는 파비콘 생성기를 실제로 열어 사용해봤습니다. 회원가입도, 로그인도 필요 없이 바로 접근할 수 있었습니다.
PNG·JPG·WEBP·GIF 형식의 이미지를 업로드 영역에 끌어다 놓거나 클릭해 선택합니다. 정사각형 이미지, 최소 260px 이상을 권장하며 최대 10MB까지 올릴 수 있습니다.
업로드하자마자 16·32·48·180·192·512px 크기로 자동 변환된 미리보기가 화면에 뜹니다. 각 미리보기를 클릭하면 그 크기의 PNG만 따로 저장할 수도 있습니다.
favicon.ico 파일만 바로 받거나, 필요한 크기가 전부 담긴 ZIP 파일로 한 번에 받을 수 있습니다.
<head> 안에 붙여넣을 코드가 함께 생성되어, 복사해서 바로 적용할 수 있습니다.
실제로 써보니 이미지를 올리고 다운로드까지 1분이 채 걸리지 않았습니다. 광고나 회원가입 유도 없이 필요한 파일만 바로 받을 수 있다는 점이 인상적이었습니다.
크기(사이즈)별로 왜 다 필요할까요?
"그냥 하나만 만들면 안 되나요?"라고 물으실 수 있습니다. 안 됩니다. 파비콘은 노출되는 위치마다 요구하는 크기가 다르기 때문입니다. 스마트폰 배경화면에 큰 아이콘을 하나만 깔아두면 작은 화면에서는 뭉개져 보이는 것과 같은 이치입니다.
브라우저 탭과 즐겨찾기 목록에 표시되는 가장 기본 크기입니다.
고해상도 디스플레이에서 브라우저 탭이 더 선명하게 보이도록 준비하는 크기입니다.
아이폰에서 홈 화면에 사이트를 추가했을 때 쓰이는 애플 터치 아이콘 크기입니다.
안드로이드 홈 화면과 PWA(웹앱) 설치 아이콘에 쓰이는 큰 크기입니다.
구글 검색결과에 파비콘을 노출하려면 정사각형 이미지에 최소 48×48px 이상을 권장한다는 점도 함께 참고하시면 좋습니다. 여러 크기를 한 번에 준비해야 어느 화면에서 열어도 아이콘이 깨끗하게 보입니다.
이미지가 서버에 저장되지 않는다는 것, 실제로 어떤 의미일까요?
이 도구를 써보고 가장 눈에 띄었던 부분은 "이미지는 서버로 전송되지 않습니다"라는 안내 문구였습니다. 실제로 페이지 소스를 확인해보니, 업로드한 이미지를 캔버스(canvas)에 그려 브라우저 안에서 바로 크기별로 잘라내고 있었습니다. 서버로 파일을 보내는 과정 자체가 없다는 뜻입니다.
회사 로고나 아직 공개하지 않은 브랜드 이미지처럼 외부에 알려지면 곤란한 이미지도, 이 도구에서는 인터넷 연결이 끊겨도 변환이 계속될 정도로 로컬에서만 처리됩니다. 무료 도구라고 해서 개인정보나 회사 자산을 어딘가에 넘기게 되는 건 아닌지 걱정하실 필요가 없는 구조입니다.
만든 파비콘, 홈페이지에 어떻게 적용하나요?
다운로드까지 마쳤다면 마지막은 적용입니다. 직접 코딩한 사이트라면 생성된 favicon.ico와 PNG 파일들을 사이트 루트 폴더에 올리고, 함께 제공되는 코드를 <head> 태그 안에 붙여넣으면 끝입니다.
아이비전트 기능형 빌더로 홈페이지를 운영 중이시라면 코드를 직접 다룰 필요 없이 관리자 화면에서 파비콘 파일만 등록하면 됩니다. 코딩 지식이 없어도 파비콘까지 챙길 수 있는 구조입니다.
"작은 아이콘 하나가 브랜드를 완성하지는 않지만, 없으면 그 브랜드가 미완성처럼 보이게 만듭니다."
홈페이지를 다 만들어 놓고도 파비콘을 잊는 경우가 은근히 많습니다. 지금 운영 중인 사이트의 브라우저 탭을 한번 확인해보시고, 물음표나 빈 아이콘이 떠 있다면 오늘 5분만 투자해보시길 권해드립니다.