파비콘

파비콘 크기는 몇 픽셀로 만드나요?

파비콘은 한 가지 크기로 끝나지 않고, 보이는 곳마다 알맞은 크기를 몇 개 준비하는 게 보통이에요. 브라우저 탭, 구글 검색 결과, 폰 홈 화면이 각각 다른 크기를 쓰기 때문이에요.

구글 검색 센터는 파비콘을 정사각형(1:1)으로 만들고, 여러 화면에서 잘 보이도록 48×48픽셀보다 크게 준비하라고 안내해요. 웹앱 설정 파일(매니페스트)을 쓰는 경우 web.dev는 최소 192×192와 512×512 아이콘을 넣으라고 해요.

아래 표는 많이 쓰는 준비 목록이에요. 실제로 필요한 파일은 홈페이지를 만드는 방식에 따라 조금씩 달라서 제작사와 함께 정하면 돼요.

파비콘은 한 번 정하면 오래 쓰는 게 좋아요. 손님은 탭과 즐겨찾기에서 아이콘 모양으로 가게를 기억하기 때문에, 자주 바꾸면 오히려 찾기 어려워져요.

파비콘 파일 형식은 ICO, PNG, SVG 중 무엇이 좋나요?

요즘은 PNG를 기본으로 두고, 필요하면 ICO와 SVG를 함께 두는 방식을 많이 써요. 구글은 ICO · PNG · GIF · JPEG 등 여러 형식을 지원한다고 안내해요.

ICO는 오래된 형식이라 한 파일에 여러 크기를 담을 수 있고, 거의 모든 브라우저가 읽어요. SVG는 크기를 키워도 깨지지 않지만, 아직 모든 곳에서 쓰이는 건 아니라서 PNG를 함께 두는 게 안전해요.

아이폰은 일반 파비콘 대신 ‘apple-touch-icon’이라는 별도 아이콘을 홈 화면에 써요. 이 아이콘은 투명 배경 대신 채운 배경으로 만들어야 홈 화면에서 깔끔하게 보여요.

SVG 파비콘은 어두운 화면 설정에 맞춰 색이 바뀌도록 만들 수도 있어요. 다만 브라우저마다 지원이 달라서, 꼭 필요한 게 아니라면 밝은 · 어두운 화면 모두에서 보이는 한 가지 디자인이 더 간단해요.

파비콘은 어떻게 만들고 홈페이지에 다나요?

로고 파일만 있으면 몇 단계로 만들 수 있어요. 직접 하든 제작사에 맡기든, 순서를 알아 두면 결과물을 확인하기 쉬워요.

요즘 홈페이지 제작 도구나 프레임워크 중에는 정해진 폴더에 아이콘 파일을 넣으면 연결 코드를 자동으로 만들어 주는 것도 있어요. 직접 코드를 넣어야 하는지는 제작사에 물어보면 돼요.

큰 원본 파일은 꼭 보관해 두세요. 나중에 새 크기가 필요할 때 작은 파일을 다시 키우면 흐릿해지기 때문이에요.

파비콘과 같은 디자인으로 공유 미리보기 사진이나 SNS 프로필 사진까지 맞춰 두면, 손님이 어디서 보든 같은 가게로 알아보기 쉬워요.

1. 01로고에서 작게 줄여도 알아볼 수 있는 부분(첫 글자, 상징)을 골라요.
2. 02정사각형 캔버스에 그 부분을 크게 배치하고, 가장자리 여백은 조금만 남겨요.
3. 03512×512 같은 큰 원본을 먼저 만들고, 거기서 필요한 작은 크기를 뽑아요.
4. 0416×16 · 32×32로 줄였을 때도 모양이 보이는지 확인하고, 뭉개지면 선을 굵게 다듬어요.
5. 05홈페이지 첫 페이지의 머리 부분에 ‘icon’ · ‘apple-touch-icon’ 연결 코드를 넣어요.
6. 06브라우저 탭, 폰 홈 화면 추가, 밝은 · 어두운 탭 화면에서 각각 확인해요.

구글 검색 결과에 파비콘이 안 보이는 이유는 뭔가요?

대부분 구글 안내 조건 중 하나를 놓친 경우예요. 구글은 파비콘 연결 코드가 홈페이지 첫 페이지에 있어야 하고, 구글 검색 로봇이 첫 페이지와 파비콘 파일을 모두 읽을 수 있어야 한다고 안내해요.

파비콘은 사이트 주소(호스트) 하나에 하나만 인정되고, 하위 경로(예: 주소/shop)의 첫 페이지는 따로 인정되지 않아요. 파비콘 파일 주소를 자주 바꾸지 않는 것도 중요해요.

조건을 다 맞춰도 바로 바뀌지는 않아요. 구글은 다시 읽어 가는 데 며칠에서 몇 주가 걸릴 수 있다고 하고, 서치 콘솔의 URL 검사 도구로 첫 페이지 색인을 요청하면 조금 빨라질 수 있어요. 조건을 지켜도 표시가 보장되지는 않는다는 점도 알아 두세요.

검색 결과에 우리 아이콘 대신 기본 아이콘이 보인다면, 구글이 아직 파비콘을 찾지 못했거나 조건에 맞지 않는다고 본 경우가 많아요. 위 조건을 하나씩 다시 확인해 보세요.

업종별로 파비콘은 어떻게 디자인하나요?

파비콘은 탭 수십 개 사이에서 우리 가게를 찾게 해 주는 표시라서, 업종 그림보다 우리 가게만의 모양이 더 쓸모 있어요. 커피잔이나 가위 같은 흔한 그림은 다른 가게와 구분되지 않기 쉬워요.

색은 로고의 대표 색 하나만 쓰는 게 작게 줄였을 때 가장 또렷해요. 그러데이션이나 얇은 선은 16픽셀 크기에서 거의 보이지 않아요.

만든 뒤에는 실제로 탭 여러 개 사이에 띄워 놓고 비교해 보세요. 자주 쓰는 사이트들 아이콘 옆에서 우리 아이콘이 바로 눈에 들어오는지가 가장 확실한 기준이에요.

• 카페: 가게 이름 첫 글자를 브랜드 색 원 안에 넣어요.
• 미용실: 로고 속 상징 부분만 떼어 굵은 선으로 다시 그려요.
• 공방: 손글씨 로고라면 작게 줄였을 때 읽히지 않으니, 이니셜 하나만 써요.
• 온라인 판매: 쇼핑몰 탭을 여러 개 띄워 두는 손님이 많아서 색 대비를 크게 해 눈에 띄게 해요.

파비콘에서 자주 하는 실수는 무엇인가요?

가장 흔한 실수는 가로로 긴 로고를 그대로 정사각형에 넣어 아주 작게 보이게 만드는 거예요. 투명 배경에 검은 로고만 넣어 어두운 탭 화면에서 보이지 않는 경우도 많아요.

홈페이지 제작 도구의 기본 아이콘이 그대로 남아 있는 경우도 있어요. 공개 전에 탭을 한 번만 봐도 알 수 있으니 꼭 확인해 보세요.

파비콘 파일을 바꿨는데 내 컴퓨터에서 그대로라면, 대부분 브라우저가 예전 아이콘을 저장해 둔 탓이에요. 다른 브라우저나 시크릿 창으로 열어 보면 바뀌었는지 확인할 수 있어요.

파비콘에 대해 제작사에 무엇을 확인하면 되나요?

공개 전에 아래 네 가지를 제작사에 확인해 두면 탭 · 검색 · 폰 홈 화면 어디서든 또렷하게 보여요.

• 브라우저 탭 · 구글 검색 · 폰 홈 화면용 아이콘을 모두 만들어 주나요?
• 어두운 화면에서도 보이도록 배경이나 테두리를 넣었나요?
• 구글 검색 로봇이 파비콘 파일을 읽을 수 있게 막지 않았나요?
• 원본 파일(큰 크기)을 받아 둘 수 있나요?