웹사이트 파비콘 제대로 넣는 법

사이트를 새로 만들고 나면 브라우저 탭에 회색 지구본이나 빈 문서 아이콘이 떠 있는 걸 보게 돼요. 파비콘(favicon)이 없다는 뜻이에요. 작은 아이콘 하나지만 탭을 여러 개 띄워 둔 사람에게는 내 사이트를 찾는 표시가 되고, 구글 검색 결과에서도 사이트 이름 옆에 함께 나와서 첫인상에 영향을 줘요.

1. 어떤 파일이 필요할까요

예전에는 favicon.ico 하나면 충분했지만, 지금은 기기마다 찾는 파일이 달라요. 아래 다섯 가지면 대부분의 환경을 챙길 수 있어요.

ICO 파일은 여러 크기의 그림을 한 파일에 담을 수 있는 형식이에요. PNG 파일 이름만 .ico로 바꾸면 일부 환경에서 깨지니, 제대로 인코딩된 ICO를 쓰는 게 좋아요.

2. 파일은 어디에 두나요

모든 파일을 사이트의 맨 위 폴더(도메인 바로 아래)에 두는 게 가장 안전해요. 그러면 https://내도메인/favicon.ico로 바로 열려요. 일부 서비스와 브라우저는 HTML에 적힌 링크를 보지 않고 이 주소부터 찾아보기 때문이에요. 그다음 모든 페이지의 <head> 안에 아래처럼 링크를 넣어요.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

워드프레스나 블로그 서비스처럼 관리 화면에서 아이콘을 올리는 곳은 그 메뉴를 쓰면 이 작업을 대신해 줘요.

3. 작은 크기에서 잘 보이게 디자인하기

• 단순하게: 16px은 정말 작아요. 로고 전체보다 로고의 상징 한 부분이나 첫 글자가 더 잘 보여요.
• 여백을 줄이기: 아이콘 둘레에 여백이 많으면 탭에서 점처럼 작아 보여요. 칸을 거의 꽉 채우세요.
• 다크 모드 확인: 투명 배경에 검은 아이콘은 어두운 탭에서 사라져요. 배경색이 있는 사각형이나 원 위에 올리면 어느 테마에서도 잘 보여요.
• 아이폰 아이콘은 배경을 채우기: 홈 화면 아이콘은 투명한 부분이 검게 보일 수 있어서 배경색을 넣는 편이 좋아요.

4. 바꿨는데 그대로일 때

브라우저는 파비콘을 아주 오래 기억해요. 파일을 바꾼 뒤에도 예전 아이콘이 보이면 강력 새로고침(Ctrl+Shift+R)을 하거나 시크릿 창으로 확인해 보세요. 그래도 그대로라면 파일 이름 뒤에 ?v=2처럼 버전을 붙여 링크를 바꾸는 방법이 확실해요. 구글 검색 결과의 아이콘은 다시 수집될 때까지 며칠에서 몇 주가 걸리니 조금 기다려야 해요.

앱으로도 내놓는다면 앱 스토어용 아이콘 크기가 따로 필요해요. 그때는 아래 앱 아이콘 생성기로 한 번에 만들 수 있어요.

이 글에 나온 도구