파비콘 만들기 — 브라우저 탭에 뜨는 그 작은 아이콘

탭을 여러 개 띄워놓고 일하다 보면, 탭 제목은 안 보이고 작은 아이콘만 보입니다. 그 아이콘이 파비콘입니다. 내 사이트만 회색 지구본이나 빈 종이로 떠 있으면 은근히 초라해 보입니다.

---

🖼️ 작아서 오히려 어렵습니다

파비콘의 함정은 너무 작다는 겁니다. 로고를 그대로 줄여 넣으면 대부분 실패합니다. 저도 처음엔 회사 로고 이미지를 그냥 넣었는데, 탭에선 그냥 뭉개진 얼룩으로 보였습니다.

가로로 긴 로고라면 더 그렇습니다. 정사각형 칸에 욱여넣으니 글자가 개미만 해집니다. 그래서 파비콘은 로고 전체가 아니라 일부만 쓰는 게 정석입니다. 이니셜 한 글자, 심볼 하나. 그게 훨씬 잘 보입니다.

---

🧪 만들 때 챙길 것

정사각형으로 만들고, 여백을 좀 주는 게 좋습니다. 꽉 채우면 탭에서 답답해 보입니다. 색은 대비가 확실한 쪽으로 가세요. 연한 색은 작아지면 그냥 안 보입니다.

그리고 어두운 화면에서도 보이는지 꼭 확인하세요. 흰 배경에 흰 글씨 심볼을 만들어두면 다크 모드 브라우저에서 아예 사라집니다. 저는 이걸 나중에 발견하고 다시 만들었습니다.

크기는 여러 벌이 필요합니다. 탭에 쓰는 작은 것, 홈 화면에 추가할 때 쓰는 큰 것이 다릅니다. 요즘은 큰 정사각형 하나를 올리면 알아서 줄여 쓰는 경우가 많지만, 홈 화면 아이콘까지 신경 쓴다면 별도로 챙기는 게 안전합니다.

---

😑 넣었는데 안 바뀔 때

파비콘도 캐시가 심합니다. 새로 올렸는데 예전 아이콘이 그대로 보입니다. 새로고침해도 그대로라 사람 미치게 만듭니다. 시크릿 창으로 열어보거나 다른 브라우저로 확인하면 실제로 바뀌었는지 알 수 있습니다.

이게 바뀐 걸 모르고 계속 파일을 다시 올리는 게 제일 흔한 삽질입니다. 확인 방법부터 알고 시작하세요.

---

👉 정리하면

파비콘은 우선순위 높은 일은 아닙니다. 다만 손이 적게 가면서 티는 확실히 나는 축에 듭니다. 즐겨찾기 목록에서 내 사이트를 알아볼 수 있느냐 없느냐가 갈리니까요.

레이블웹스로 만든 사이트는 이 아이콘이 기본으로 붙어서 나옵니다. 브랜드에 맞게 바꾸고 싶으면 이미지를 바꿔 넣으시면 되고요. 없는 것보단 뭐라도 있는 게 낫고, 있는 것보단 알아볼 수 있는 게 낫습니다.

레이블웹스에서 사이트 만들어보기 →

---

📚 함께 보면 좋은 글

포트폴리오 사이트 만들기 — 뭘 넣고 뭘 빼야 연락이 오나
인스타 프로필 링크 거는법 — 한 줄짜리 그 자리, 제대로 쓰는 법
링크트리 만들기 — 프로필 링크 페이지, 뭘 넣고 어떻게 정리하나
개인사업자 홈페이지 만들기 — 사업자라면 빠지면 안 되는 것들