파비콘(favicon)이란? 사이트 아이콘 만드는 법
브라우저 탭에서 사이트 이름 왼쪽에 보이는 작은 아이콘을 파비콘(favicon)이라고 합니다. 작은 이미지지만 사이트의 첫인상을 결정하는 중요한 요소입니다. 이미지 파일 하나로 파비콘을 무료로 만드는 방법을 알아봅니다.
파비콘이 중요한 이유
파비콘은 단순한 장식이 아닙니다. 탭을 여러 개 열어두었을 때 파비콘이 없으면 어떤 탭이 어떤 사이트인지 구분하기 어렵습니다. 파비콘이 있는 사이트는 더 완성도 있고 전문적으로 보이며, 북마크에 추가했을 때도 아이콘이 함께 표시되어 찾기 쉽습니다.
특히 구글 애드센스 심사에서도 파비콘이 있는 사이트는 "완성된 사이트"로 인식되어 긍정적인 영향을 줍니다.
파비콘 파일 형식
파비콘의 표준 형식은 favicon.ico입니다. ICO 파일은 16×16, 32×32, 48×48 픽셀처럼 여러 크기를 하나의 파일 안에 담을 수 있어 다양한 해상도에서 선명하게 보입니다. 최근에는 SVG나 PNG 형식으로도 파비콘을 설정할 수 있지만, 가장 넓은 호환성을 원한다면 ICO를 기본으로 두는 것이 좋습니다.
iOS, 안드로이드 홈 화면에 웹사이트를 추가할 때는 apple-touch-icon(180×180px PNG)이 별도로 필요하고, PWA 앱으로 배포한다면 192px, 512px PNG도 필요합니다. 이미지툴의 파비콘 생성기는 이 파일들을 한 번에 모두 만들어 줍니다.
파비콘 만들기 — 단계별
- 파비콘 생성기 도구를 엽니다.
- 파비콘으로 쓸 이미지를 올립니다. 정사각형 이미지가 가장 잘 어울립니다. 로고, 아이콘, 이니셜을 담은 이미지를 권장합니다.
- 생성이 완료되면 favicon.ico와 apple-touch-icon.png, icon-192.png, icon-512.png를 다운로드합니다.
- 파일들을 웹사이트 루트 폴더에 올리고, HTML
<head>에 아래 코드를 추가합니다.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">파비콘 이미지 선택 팁
- 16×16 픽셀에서도 알아볼 수 있게 최대한 단순한 형태가 좋습니다.
- 복잡한 사진보다 단색 배경에 아이콘이나 이니셜이 있는 디자인이 선명합니다.
- 브랜드 색상을 사용하면 탭에서 사이트를 바로 알아볼 수 있습니다.
- 정사각형 이미지를 사용하면 잘리거나 찌그러지지 않습니다.
자주 묻는 질문
파비콘을 바꿨는데 브라우저에 반영이 안 돼요.
브라우저가 이전 파비콘을 캐시(임시 저장)하고 있기 때문입니다. Ctrl+Shift+R (또는 Cmd+Shift+R)로 강제 새로고침하거나, 개인정보 보호 모드(시크릿 창)에서 열어보세요.
SVG 파비콘과 ICO 파비콘 중 어떤 게 낫나요?
SVG는 해상도에 상관없이 선명하고 파일 크기도 작습니다. 다만 구형 브라우저(IE 등)에서는 지원하지 않습니다. 두 가지를 함께 선언해 두면 최신 브라우저는 SVG를, 구형 브라우저는 ICO를 사용합니다.
파비콘 파일이 없으면 어떻게 되나요?
브라우저가 파비콘을 찾지 못하면 기본 아이콘(지구본 모양 등)이 표시되고, 서버 로그에 404 오류가 쌓입니다. 완성된 웹사이트라면 파비콘을 꼭 설정해 두세요.