웹사이트 아이콘 설정 방법 총정리 - 파비콘부터 모바일 앱 아이콘까지 한 번에 끝내기

정성 들여 만든 웹사이트를 열었는데 브라우저 탭에 회색 지구본이나 빈 문서 모양만 떠 있으면 어딘가 미완성처럼 보입니다. 방문자는 보통 탭을 여러 개 띄워 놓고 사이트를 오가는데, 아이콘이 없는 탭은 다시 찾기도 어렵습니다. 웹사이트 아이콘 설정 방법 자체는 어렵지 않지만, 브라우저와 기기마다 요구하는 규격이 달라서 한 번은 제대로 정리하고 넘어갈 필요가 있습니다. 이 순서대로 따라 하면 데스크톱 브라우저부터 아이폰 홈 화면까지 빠짐없이 적용할 수 있습니다.

파비콘, 작지만 첫인상을 좌우합니다

웹사이트 아이콘은 흔히 파비콘(favicon)이라고 부릅니다. 즐겨찾기를 뜻하는 favorites와 icon을 합친 말로, 브라우저 탭, 북마크 목록, 방문 기록, 모바일 홈 화면 바로가기 등 사이트 이름 옆에 붙는 작은 이미지를 전부 포함하는 개념입니다.

단순한 장식이 아닙니다. 구글은 검색 결과에서 사이트 이름 옆에 파비콘을 함께 표시하기 때문에, 아이콘이 없거나 깨져 있으면 검색 결과 화면에서부터 신뢰도가 깎입니다. 구글은 검색용 파비콘으로 48px의 배수 크기를 권장하고 있습니다.

파비콘은 웹사이트의 명함입니다. 사용자가 사이트 이름을 기억하지 못해도 탭에 떠 있는 아이콘 모양은 기억합니다. 재방문율을 높이는 가장 저렴한 브랜딩 수단이 바로 이 작은 이미지입니다.

아이콘 파일 형식과 권장 크기

파비콘에 쓰이는 파일 형식은 크게 세 가지입니다. 각각 쓰임새가 다르므로 하나만 만들지 말고 조합해서 준비하는 것이 안전합니다.

• ICO: 가장 오래된 표준 형식입니다. 파일 하나에 16x16, 32x32, 48x48 등 여러 크기를 함께 담을 수 있어 구형 브라우저까지 호환됩니다.
• PNG: 제작이 쉽고 모든 브라우저가 지원합니다. 크기별로 파일을 따로 만들어야 합니다.
• SVG: 벡터 형식이라 파일 하나로 모든 해상도에 대응합니다. 크롬, 파이어폭스, 엣지는 지원하지만 사파리는 지원이 제한적이므로 단독으로 쓰면 안 됩니다.

용도별 권장 크기는 아래 표와 같습니다.

디자인 원본은 크게 만드세요

512x512 이상의 원본 한 장을 먼저 만든 뒤 축소하는 방식이 정석입니다. 16x16처럼 작은 크기에서는 세부 묘사가 뭉개지므로, 글자보다는 단순한 도형과 뚜렷한 색 대비 위주로 디자인하는 것이 좋습니다.

HTML 코드로 웹사이트 아이콘 설정하는 방법

파일을 준비했다면 HTML 문서의 head 영역에 link 태그를 추가합니다. 아래 세 줄이 기본 구성입니다.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

브라우저는 SVG를 지원하면 SVG를 우선 사용하고, 지원하지 않으면 ICO로 대체합니다. 애플 터치 아이콘은 별도 태그가 필요하며, 파일명을 apple-touch-icon.png로 지정해 루트에 두면 태그가 누락돼도 iOS가 찾아가는 경우가 많습니다.

제작 도구 활용

포토샵 없이도 만들 수 있습니다. realfavicongenerator.net 같은 무료 서비스에 이미지 한 장을 올리면 크기별 파일과 link 태그 코드를 한꺼번에 생성해 줍니다. 사이트 제작 초기라 본문 콘텐츠가 아직 없다면 Lorem Ipsum 생성기로 더미 텍스트를 채워 넣고, 레이아웃과 아이콘 표시 여부를 한 화면에서 같이 점검하면 작업 왕복이 줄어듭니다.

모바일 홈 화면과 PWA 아이콘 설정

데스크톱 탭 아이콘만 설정하고 끝내면 절반만 한 것입니다. 모바일 사용자가 사이트를 홈 화면에 추가할 때 보이는 아이콘은 별도 규격을 따릅니다.

• iOS: apple-touch-icon 180x180 PNG를 사용합니다. iOS는 투명 배경을 검은색으로 채우므로 배경색을 직접 지정한 이미지를 쓰는 것이 안전합니다.
• 안드로이드: 웹 앱 매니페스트(manifest.json)의 icons 항목에 192x192와 512x512 PNG를 등록합니다.
• PWA: 설치형 웹앱으로 배포한다면 매니페스트에 purpose를 maskable로 지정한 아이콘을 추가해야 기기별 마스킹에 대응할 수 있습니다.

아이콘이 안 보일 때 점검할 것들

코드를 넣었는데도 아이콘이 안 뜨는 경우가 생각보다 많습니다. 원인의 대부분은 아래 네 가지 중 하나입니다.

• 캐시 문제: 브라우저는 파비콘을 오래 캐싱합니다. 파일을 교체했다면 href 뒤에 ?v=2처럼 버전 쿼리를 붙여 강제로 갱신하세요.
• 경로 오류: 상대 경로로 지정하면 하위 페이지에서 깨질 수 있습니다. /favicon.ico처럼 루트 기준 절대 경로를 쓰세요.
• 파일 크기: 지나치게 큰 파일은 일부 환경에서 무시됩니다. 탭용 아이콘은 수십 KB 이내로 유지하세요.
• 시크릿 모드 확인: 수정 결과는 캐시가 없는 시크릿 창에서 확인하는 것이 가장 빠르고 정확합니다.

지금 바로 할 일은 두 가지입니다. 첫째, 내 사이트 주소 뒤에 /favicon.ico를 붙여 접속해서 파일이 실제로 존재하는지 확인하세요. 둘째, 스마트폰에서 사이트를 홈 화면에 추가해 보고 아이콘이 의도한 모양으로 나오는지 점검하세요. 이 두 가지만 통과하면 웹사이트 아이콘 설정은 사실상 완성입니다.