파비콘 탭에서 구분 안 될 때

파비콘이 뜨는 자리는 아주 작습니다

파비콘이 뜨는 곳은 브라우저 탭, 즐겨찾기, 방문 기록, 휴대폰 홈 화면입니다. 하나같이 아주 작은 자리입니다. 그래서 큰 화면에서 만든 로고를 그대로 줄이면 대개 뭉개집니다.

한글이 들어가면 더 빨리 무너집니다. 획이 많아서 같은 크기라도 영문보다 먼저 뭉개집니다.

템플릿 사이트 23곳을 16px로 줄여 본 날

2026년 9월 5일, 저희 템플릿 사이트 23곳의 파비콘을 만들었습니다. 크게 그려 놓고 볼 때는 다 멀쩡했어요. 그래서 하나씩 16px로 줄여서 다시 봤습니다.

줄이자 한글부터 무너졌습니다. 셀·활·들처럼 받침 ㄹ이 들어간 글자는 뭉개졌고, 가는 획은 두꺼워졌습니다. 둥근 테두리는 아예 보이지 않았습니다.

막상 헷갈린 건 글자보다 색이었습니다

그래서 보는 기준을 바꿨습니다. 글자가 읽히는지를 따지지 않고, 탭 여러 개를 한 줄에 띄웠을 때 서로 구분되는지를 봤어요.

그렇게 보니 문제는 색 쪽이 더 컸습니다. 초록 계열이 3곳, 갈색 계열이 5곳이었는데, 작게 놓으니 같은 계열끼리 서로 비슷해 보였습니다. 이 사이트들은 바탕색과 글자색을 뒤집어서 서로 다르게 보이게 했습니다. 고급형 템플릿 4곳은 색 대신 모양을 달리해서 갈랐고요.

기기마다 모양이 달라 보인 파비콘

파일 형식에서도 문제가 하나 있었습니다. SVG 파비콘에 글자를 그림으로 바꾸지 않고 글자 그대로 넣으면, 보는 사람 기기에 깔린 글꼴로 그려집니다. 그래서 같은 파비콘이 기기마다 다른 모양으로 보였어요. 이런 파비콘은 글자를 그림으로 굳힌 PNG로 바꿨습니다.

내 사이트 파비콘, 이렇게 확인해 보세요

워드프레스를 쓰신다면 관리자 화면의 사이트 아이콘 설정에서 파비콘을 바꿀 수 있습니다. 정사각형으로 넉넉히 큰 그림을 올리는 게 기본입니다. 다만 크게 올려도 탭에서는 작게 뜨니까, 올린 뒤에 아래 두 가지는 직접 보시는 게 좋습니다.

• 내 사이트와 자주 여는 다른 사이트 몇 개를 탭으로 나란히 띄워 보세요. 파비콘만 보고 내 사이트 탭을 바로 고를 수 있는지 봅니다.
• 휴대폰 브라우저에서도 같은 탭 목록을 열어 보세요. 파비콘이 흐리게 보이거나 비어 있지 않은지 봅니다.

파비콘 같은 작은 자리부터 첫 화면까지 꼼꼼히 맞춘 홈페이지가 필요하시면 홈페이지 제작을 참고해 주세요.