파비콘(탭 아이콘)

브라우저 탭 맨 앞에 붙는 아주 작은 아이콘이에요. 이게 비어 있으면 손님은 내 사이트를 회색 빈 종이로 기억해요.

쉽게 말하면

상가 복도를 떠올려 보세요. 가게 문이 나란히 붙어 있고, 손님은 간판만 보고 어느 문을 열지 정해요. 손님 브라우저 위쪽에 탭이 열 개쯤 나란히 뜬 모습이 딱 그 복도예요. 탭 하나에 들어가는 건 제목 앞 몇 글자와 아이콘 하나뿐이에요. 파비콘이 그 간판이에요. 간판을 안 달면 손님은 회색 빈 종이 표시를 보며 "여기가 어디였지" 하다가 옆 탭을 눌러요.

이름은 favorite icon(즐겨찾기 아이콘)을 줄인 말이에요. 처음에는 즐겨찾기 목록만 꾸미는 기능이었는데, 지금은 탭·북마크·방문 기록·검색 결과·휴대폰 홈 화면까지 따라다녀요. 한 장만 제대로 준비하면 그 자리 전부가 채워져요.

아이콘이 없을 때

[회색 빈 종이] 내 가게 - 매일 아침 볶는 원두로…

탭이 여러 개 열려 있으면 손님이 내 것을 못 찾아요. 급하게 만든 사이트처럼 보여서 결제 화면 앞에서 손이 멈춰요.

아이콘이 있을 때

[진한 배경에 흰 글자 마크] 내 가게

작아도 색과 모양으로 구분돼요. 탭을 스무 개 열어 둔 손님도 색만 보고 내 것을 눌러요.

탭 말고도 나오는 자리

파비콘 한 장이 생각보다 여러 곳에 쓰여요. 어디에 나오는지 보면 왜 대충 만들면 안 되는지도 같이 이해돼요.

나오는 자리	어떻게 보이나	비어 있으면
브라우저 탭	제목 왼쪽에 아주 작게	회색 빈 종이나 지구본 표시가 대신 들어가요
즐겨찾기·북마크 목록	제목 앞 아이콘. 목록이 길어지면 사실상 아이콘으로 찾아요	줄줄이 똑같은 회색이라 내 가게가 묻혀요
방문 기록	날짜별 목록에 아이콘으로	손님이 어제 본 그 사이트를 다시 못 찾아요
구글 모바일 검색 결과	제목 옆에 사이트 아이콘으로 함께 나와요	주소 첫 글자만 들어간 기본 표시가 나와요
휴대폰 홈 화면 바로가기	앱 아이콘처럼 큼직하게	화면 축소판이 들어가서 무슨 가게인지 알 수 없어요

링크 공유 미리보기와는 다른 것이에요

카톡이나 인스타에 주소를 붙였을 때 뜨는 큰 가로 이미지는 파비콘이 아니에요. 그건 따로 준비하는 미리보기 이미지예요. 파비콘은 탭에 들어가는 작은 정사각형, 미리보기 이미지는 대화방에 뜨는 큰 사각형이에요. 자리도 크기도 다르니 둘 다 챙겨야 완성이에요.

손톱만 한 크기가 규칙을 정해요

탭 아이콘이 화면에서 차지하는 자리는 보통 가로세로 16점이에요. 고해상도 화면이면 32점이고요. 손톱보다 작아요.

여기가 첫 번째 함정이에요. 공들여 만든 로고를 그대로 줄여 넣으면 뭉개져요. 가로로 긴 로고, 가게 이름이 글자로 들어간 로고는 특히 그래요. 전단지를 우표 크기로 축소 복사하는 것과 같아요. 글자는 회색 얼룩이 되고 얇은 선은 아예 사라져요.

그래서 파비콘 만들기는 로고를 줄이는 작업이 아니라, 로고에서 한 조각만 떼어내는 작업이에요.

이렇게 만들면	탭에서 어떻게 보이나
가게 이름 전체를 넣는다	글자가 서로 붙어 회색 얼룩이 돼요. 가장 흔한 실수예요
첫 글자 한 개만 크게 넣는다	16점에서도 읽혀요. 가장 안전하고 빠른 방법이에요
로고에서 상징 부분만 떼어 쓴다	브랜드가 그대로 살아요. 상징이 단순할 때만 통해요
가게 사진을 잘라 넣는다	무슨 사진인지 알 수 없어요. 색 덩어리로 보여요
얇은 선으로 그린 그림을 넣는다	선이 끊겨 보여요. 선을 훨씬 두껍게 고쳐야 살아나요

배경을 비워 두지 마세요

손님 브라우저가 어두운 화면일 수도 있어요. 배경 없이 검은 마크만 그려 두면 어두운 탭에서 아이콘이 사라져요. 정사각형 배경에 내 색을 꽉 채우고 그 위에 밝은 마크를 올리면, 밝은 탭이든 어두운 탭이든 똑같이 보여요. 간판에 조명을 넣는 것과 같은 이유예요.

파일 준비하기

파일 형식이 세 가지 나와요. 이름만 알아 두면 개발자와 말이 통해요.

형식	무엇인가	언제 쓰나
.ico	옛날부터 쓰는 아이콘 전용 형식. 한 파일 안에 여러 크기를 같이 담을 수 있어요	어느 브라우저에서든 확실히 뜨게 하고 싶을 때
.png	우리가 아는 그 그림 파일. 배경을 투명하게 둘 수도 있어요	요즘 가장 많이 쓰는 방법이에요. 이거 하나로 끝나는 경우가 많아요
.svg	점이 아니라 선과 도형으로 그린 그림. 아무리 키워도 안 뭉개져요	요즘 브라우저는 잘 읽지만 오래된 것은 못 읽어요. png를 같이 두면 안전해요

1마크 한 조각을 정해요. 첫 글자든 로고 상징이든 하나만요. 정사각형 안에 넣는다고 생각하고 고르면 판단이 쉬워요.
2정사각형으로 만들고 여백을 조금 둬요. 가장자리까지 꽉 채우면 브라우저나 휴대폰이 모서리를 다듬을 때 잘려요. 사방에 숨통을 남겨요.
3크게 한 장으로 저장해요. 512점 정사각형이면 넉넉해요. 큰 그림 하나가 있으면 작은 크기들은 거기서 줄여 만들 수 있어요. 반대로는 안 돼요.
4사이트에 넣어요. 바이브캠퍼스에서는 스튜디오 채팅에 "탭 아이콘을 이 마크로 넣어 주세요"라고 말하면 돼요. 직접 다루는 경우라면 사이트 맨 위 폴더에 favicon.ico 라는 이름으로 두기만 해도 브라우저가 알아서 찾아가요.
5휴대폰용 큰 아이콘도 한 장 챙겨요. 손님이 홈 화면에 바로가기를 만들 때 쓰는 아이콘이에요. 180점 정사각형이면 충분해요.

마크 하나로 전부 돌려 써요

탭용 작은 아이콘, 홈 화면용 큰 아이콘, 검색 결과용 아이콘이 따로 있는 것처럼 보이지만 그림은 하나면 돼요. 크기만 다르게 뽑는 거예요. 자리마다 그림이 다르면 손님이 같은 가게로 못 알아봐요.

사장님이 실제로 겪는 장면

장면 1 · 외주 개발자가 말했다

“파비콘은 마지막에 넣을게요. 기능부터 하죠.”

순서 자체는 틀리지 않았어요. 다만 마지막에 넣겠다는 말은 잊겠다는 말이 되는 경우가 많아요. 오픈 전 점검 목록에 한 줄로 적어 두세요. 작업 자체는 10분인데, 미루면 개업한 가게에 간판 없이 손님을 받는 상태가 돼요.

장면 2 · 아이콘을 바꿨는데 안 바뀐다

“새 아이콘으로 올렸는데 제 화면에는 계속 옛것이 떠요.”

고장이 아니에요. 브라우저는 아이콘을 한 번 받아 두고 오래 쓰는 습성이 있어요. 매번 다시 받으면 느려지니까요. 새 창을 열어도 그대로일 수 있어요. 확인 순서는 바로 아래에 정리해 뒀어요.

장면 3 · 손님이 보낸 문의

“링크를 눌렀는데 탭에 아무 표시가 없어서 가짜 사이트인 줄 알았어요.”

아이콘 하나가 신뢰 문제로 넘어가는 지점이에요. 결제나 개인정보를 다루는 화면이면 더 세게 작용해요. 손님은 정상적인 가게는 간판이 있다고 알고 있어요. 없으면 의심부터 해요.

바꿨는데 안 바뀔 때

1주소로 직접 열어 확인해요. 사이트 주소 뒤에 /favicon.ico 를 붙여서 열어 보세요. 새 그림이 뜨면 올리기는 성공한 거예요. 옛것이 뜨거나 안 열리면 그때가 파일 문제예요.
2저장된 것을 버리는 새로고침을 해요. 그냥 새로고침이 아니라 받아 둔 것을 무시하고 다시 받는 새로고침이에요. 윈도우는 Ctrl 키와 F5, 맥은 Command 키와 Shift 와 R 이에요.
3시크릿 창에서 열어요. 저장된 것 없이 새로 받아오니까 손님이 처음 보는 화면과 가장 가까워요. 여기서 잘 나오면 사장님 브라우저만 옛것을 붙들고 있는 거예요.
4검색 결과는 며칠 기다려요. 검색 로봇이 다시 훑어가야 반영돼요. 오늘 고치고 오늘 검색해서 안 나오는 건 정상이에요.

순서를 지키는 이유

"안 바뀐다"는 대부분 파일 문제가 아니라 내 브라우저가 옛것을 붙들고 있는 문제예요. 그래서 파일을 다시 만들기 전에 시크릿 창으로 한 번만 확인해 보세요. 이 한 단계를 건너뛰면 멀쩡한 파일을 몇 번이나 다시 만들게 돼요.

자주 묻는 것

Q. 로고가 아직 없어요. 그래도 넣을 수 있나요?: 네, 오히려 지금 넣는 편이 나아요. 진한 배경 정사각형에 가게 이름 첫 글자 하나만 흰색으로 올려도 충분해요. 비어 있는 것보다 훨씬 낫고, 나중에 로고가 생기면 그때 갈아 끼우면 돼요. 색을 고르는 이야기는 가게 이름과 색 정하기에 있어요.
Q. 그냥 로고 파일을 그대로 올리면 안 되나요?: 올라가긴 해요. 다만 가로로 긴 로고는 정사각형 칸에 맞춰 줄어들면서 아주 작아져요. 손님 눈에는 로고가 아니라 회색 줄 하나로 보여요. 상징 한 조각만 떼어 쓰는 게 정답이에요.
Q. 크기는 몇으로 만들어야 정확한가요?: 한 장만 만든다면 크게, 정사각형으로요. 512점이면 어디에 쓰든 넉넉해요. 구글이 검색 결과용으로 권하는 크기는 48점의 배수라서, 192점 정사각형 한 장을 따로 챙겨 두면 그쪽까지 딱 맞아요.
Q. 파일 이름이 꼭 favicon.ico 여야 하나요?: 아니에요. 다른 이름과 형식을 쓰고 사이트 코드에 "이게 아이콘이다"라고 표시해 주면 돼요. 다만 사이트 맨 위 폴더에 favicon.ico 가 있으면 표시가 없어도 브라우저가 찾아가요. 그래서 그 이름이 관례로 굳었어요.
Q. 페이지마다 다른 아이콘을 쓸 수 있나요?: 기술로는 가능하지만 하지 마세요. 파비콘은 페이지 표시가 아니라 가게 간판이에요. 사이트 전체가 같은 아이콘이어야 손님이 알아봐요. 검색 로봇도 사이트 하나에 아이콘 하나로 봐요.
Q. 아이콘이 검색 결과에 안 나와요.: 세 가지를 확인해요. 검색 로봇이 아이콘 파일에 접근할 수 있는지, 정사각형인지, 아이콘 주소가 바뀌지 않고 그대로 유지되는지요. 그리고 반영에 며칠 걸려요. 어제 고쳤다면 아직 기다릴 때예요.
Q. 탭에 뜨는 제목도 같이 봐야 하나요?: 네, 같이 손봐야 효과가 나요. 탭에는 아이콘과 제목 앞부분만 보여요. 제목이 길면 앞 몇 글자만 남아요. 그러니 가게 이름을 앞에 두고 설명은 뒤로 미뤄요. 아이콘과 제목 앞 글자, 이 둘이 탭에서 손님이 보는 전부예요.

확인해 보세요

가로로 긴 가게 로고를 그대로 탭 아이콘으로 넣으면 어떻게 될까요?

하나 더

새 아이콘을 올렸는데 사장님 화면에는 옛것이 그대로예요. 가장 먼저 할 일은?

직접 해보기

스튜디오에서 탭 아이콘을 부탁해 보세요

채팅에 이렇게 적어 보세요. "탭 아이콘을 만들어 주세요. 진한 남색 정사각형 배경에 가게 이름 첫 글자를 흰색으로, 사방에 여백을 조금 두고요." 색과 글자만 내 가게 것으로 바꿔서 그대로 쓰면 돼요.

스튜디오 열기

직접 해보기

문 열기 전에 점검표에서 한 번 더

오픈 전에 확인할 것들을 모아 둔 문서예요. 탭 아이콘은 마지막까지 잊기 가장 쉬운 항목이라, 점검표에서 짚고 넘어가는 게 안전해요.

오픈 점검표 보기

더 깊이 (안 읽어도 괜찮아요)

이름이 파비콘인 이유 · favorite icon 을 줄인 말이에요. 1999년에 한 브라우저가 즐겨찾기 목록을 꾸미려고 만든 기능이었어요. 사이트 맨 위 폴더에서 favicon.ico 라는 이름을 자동으로 찾는 방식이었는데, 다른 브라우저들이 따라 하면서 표준처럼 굳었어요. 그래서 지금도 코드에 표시를 안 해도 그 이름이면 찾아가요.

한 파일에 여러 크기를 담는 이유 · 16점에서 잘 보이는 그림과 48점에서 잘 보이는 그림은 실제로 다를 수 있어요. 작을 때는 상징만 남기고, 클 때는 세부를 넣는 게 좋으니까요. ico 형식은 그 여러 장을 한 파일에 같이 담을 수 있어서 오래 쓰였어요. 요즘은 큰 png 한 장을 두고 브라우저가 알아서 줄이게 맡기는 방식이 흔해요. 대부분의 가게에는 이 방식으로 충분해요.

홈 화면에 저장할 때는 잘려요 · 휴대폰 홈 화면에 저장되는 아이콘은 기기가 알아서 둥글게 깎거나 모서리를 다듬어요. 가장자리까지 꽉 채워 그리면 중요한 부분이 잘려 나가요. 안쪽 8할 정도 안에 핵심을 넣고 바깥은 배경색으로 남기면 어떤 기기에서도 안전해요. 앱 스토어에 올리는 아이콘도 같은 규칙이에요.

이것만 기억하세요

·탭 아이콘은 손님 브라우저 복도에 붙는 내 가게 간판이에요
·로고를 줄이는 게 아니라 한 조각만 떼어 써요. 글자는 한 개까지
·정사각형 배경에 색을 꽉 채워요. 어두운 탭에서도 보이게
·크게 한 장(512점) 만들어 두면 나머지 크기는 거기서 나와요
·안 바뀌면 파일을 의심하기 전에 시크릿 창으로 확인해요