파비콘은 Convertico 같은 무료 생성기에 정사각형 로고 이미지를 올리기만 하면 몇 초 만에 만들 수 있습니다. 회원가입 없이 favicon.ico(16·32·48px)와 PNG, 애플 터치 아이콘, 안드로이드용 아이콘까지 ZIP 파일로 한 번에 받을 수 있어요. 받은 파일은 사이트 루트 폴더에 올리고, 함께 나오는 HTML 코드를 <head>에 붙이면 적용이 끝납니다.
핵심만 먼저
- 원본 이미지는 1:1 정사각형, 512×512px 이상이 좋습니다.
- favicon.ico에는 16·32·48px을 함께 넣고, 휴대폰용으로 180px(애플)·192/512px(안드로이드) PNG를 따로 둡니다.
- HTML에는
rel="icon"을 쓰고, 워드프레스는 관리자 화면의 사이트 아이콘 메뉴로 올리면 됩니다. - 구글 검색 결과에 파비콘이 반영되기까지 며칠에서 몇 주가 걸릴 수 있습니다.
목차
파비콘이란, 어디에 쓰이나
파비콘(favicon)은 즐겨찾기(favorites)와 아이콘(icon)을 합친 말로, 브라우저 탭과 북마크 목록에 사이트 이름 옆에 붙는 작은 그림입니다. 지금은 쓰이는 곳이 더 넓어졌습니다. 구글 검색 결과의 사이트 이름 옆, 아이폰·안드로이드에서 홈 화면에 추가한 바로가기 아이콘도 같은 파비콘 파일 묶음에서 가져옵니다.
그래서 예전처럼 16×16px ICO 파일 하나만 두기보다, 크기별 파일을 함께 준비하는 쪽이 좋습니다. 무료 생성기들이 여러 크기를 한 번에 만들어 주는 것도 이 때문입니다.
파비콘 크기와 파일 형식
작은 크기는 큰 이미지를 줄여서 만들기 때문에, 원본은 크게 준비할수록 결과가 깔끔합니다. 워드프레스는 사이트 아이콘으로 512×512px 이상 정사각형 이미지를 권장하고, 구글은 정사각형이면서 최소 8×8px, 가능하면 48×48px보다 큰 파비콘을 권합니다.
| 파일 | 크기 | 쓰이는 곳 |
|---|---|---|
| favicon.ico | 16·32·48px (한 파일에 여러 크기) | 브라우저 탭, 북마크, 구형 브라우저 |
| PNG 파비콘 | 16·32·48·96px | 최신 브라우저 탭, 검색 결과 |
| favicon.svg | 크기 제한 없음(벡터) | 고해상도 화면, 다크 모드 대응 |
| apple-touch-icon.png | 180px | 아이폰·아이패드 홈 화면 |
| 안드로이드·PWA 아이콘 | 192·512px | 안드로이드 홈 화면, 웹앱 설치 |
구글 검색이 읽는 형식은 ICO, PNG, GIF, JPEG, BMP, TIFF, PPM이고, 확장자보다 정사각형 비율인지가 더 중요합니다. 16px 크기에서는 글자나 가는 선이 뭉개지기 쉬우니, 로고가 복잡하면 첫 글자나 심벌만 따로 잘라 쓰는 편이 알아보기 좋습니다.
Convertico로 파비콘 만드는 방법
Convertico 파비콘 생성기는 무료이고 계정이 필요 없습니다. 이미지는 브라우저 안에서 처리되고 서버로 올라가지 않는다고 안내합니다. PNG, JPG, SVG, WebP, GIF를 20MB까지 올릴 수 있고, 이미지가 없으면 1~3글자나 이모지로도 만들 수 있습니다.
- Convertico 파비콘 생성기에 접속해 이미지를 끌어다 놓거나 Ctrl+V로 붙여 넣습니다.
- Crop(자르기), Fit all(전체 맞춤), Stretch(늘이기) 중 하나를 고르고 모양(사각·둥근 모서리·원), 여백, 배경색(투명·흰색·어두운색·직접 지정)을 정합니다.
- 미리보기에서 64·48·32·16px 크기와 밝은·어두운 탭, 홈 화면 아이콘 모양을 확인합니다.
- 필요한 파일을 고른 뒤 Generate favicons 버튼을 누릅니다.
- Download ZIP으로 전체 묶음을 받거나, ICO만 필요하면 favicon.ico only를 누릅니다. 화면에 나오는 HTML 코드는 Copy로 복사해 둡니다.
ZIP에는 favicon.ico, PNG 파비콘, 애플 터치 아이콘, 안드로이드 아이콘, site.webmanifest 등이 들어 있습니다. 기본 ICO는 16·32·48px이고, Large sizes 옵션을 켜면 64·128·256px이 추가됩니다. SVG나 글자로 만들면 다크 모드용 favicon.svg도 함께 생깁니다.
다른 무료 생성기
RealFaviconGenerator도 많이 쓰입니다. 이미지를 올리면 안드로이드·iOS·구글 검색에서 어떻게 보이는지 미리 보여 주고, SVG 파비콘과 애플 터치 아이콘, favicon.ico, HTML 코드를 함께 만들어 줍니다. 원본 로고의 화질이 낮다면 먼저 이미지 해상도 높이기 방법으로 키운 뒤 넣는 편이 작은 크기에서도 덜 흐려집니다.
내 웹사이트에 HTML로 적용하기
- 받은 파일을 사이트 루트 폴더(예:
https://내도메인/favicon.ico로 열리는 위치)에 올립니다. - 모든 페이지, 적어도 홈페이지의 <head> 안에 생성기가 준 코드를 붙여 넣습니다.
- 브라우저에서 사이트를 새로 열어 탭 아이콘이 바뀌었는지 확인합니다.
생성기 코드를 쓰지 않고 직접 적는다면 다음 정도면 충분합니다. 기존 글에 있던 코드는 따옴표와 경로 사이에 공백이 들어가 있어 그대로 붙이면 제대로 동작하지 않습니다.
<link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/favicon.svg" type="image/svg+xml">(SVG 파일이 있을 때)<link rel="apple-touch-icon" href="/apple-touch-icon.png">
예전 코드의 rel="shortcut icon"도 아직 인식되지만, 구글은 이를 과거 호환용으로만 지원한다고 밝히고 있습니다. 새로 만드는 사이트는 rel="icon"을 쓰면 됩니다.
워드프레스·티스토리에 적용하기
워드프레스
워드프레스는 코드를 건드릴 필요가 없습니다. ICO를 따로 만들지 않고 512×512px 이상 PNG를 올리면 필요한 크기를 알아서 만들어 줍니다.
- 클래식 테마: 설정 → 일반 → 사이트 아이콘 선택 → 업로드 후 사이트 아이콘으로 설정 → 변경사항 저장
- 블록 테마: 외모 → 편집기 → 아이덴티티(Identity) → 사이트 아이콘 → 이미지 선택 후 저장
메뉴 이름은 워드프레스 버전과 언어 설정에 따라 조금 다를 수 있습니다. 외모 메뉴 아래에 ‘편집기’가 있으면 블록 테마, ‘사용자 정의하기’가 있으면 클래식 테마입니다.
티스토리
티스토리는 관리자 페이지의 블로그 기본 정보 설정에 아이콘·파비콘 등록 항목이 있고, 파비콘은 ICO 파일로 올립니다. 관리자 메뉴 구성은 개편 때마다 바뀌어 왔기 때문에 정확한 메뉴 이름은 티스토리 공식 안내에서 확인이 필요합니다. 등록해도 반영되지 않으면 꾸미기 → 스킨 편집 → HTML 편집에서 <head>에 파비콘 링크 코드를 직접 넣는 방법도 있습니다.
파비콘이 안 바뀌거나 검색 결과에 안 뜰 때
내 브라우저에서 예전 아이콘이 계속 보이는 것은 대부분 캐시 때문입니다. 시크릿 창으로 열어 보거나, 주소창에 /favicon.ico를 직접 입력해 새 파일이 나오는지 확인해 보세요.
구글 검색 결과는 구글 검색 센터의 파비콘 가이드 기준을 맞춰야 표시됩니다.
- 파비콘 파일과 홈페이지를 robots.txt로 막지 않았는지 확인합니다(Googlebot-Image가 파일을 읽을 수 있어야 함).
- <link> 태그가 홈페이지 <head>에 있어야 합니다. 하위 폴더 홈페이지(예: example.com/news)는 별도 파비콘이 지원되지 않습니다.
- 파비콘 주소를 자주 바꾸지 않습니다.
- 재수집에는 며칠에서 몇 주가 걸리고, 서치 콘솔의 URL 검사 도구로 홈페이지 색인을 요청하면 앞당길 수 있습니다.
조건을 모두 맞춰도 구글이 파비콘 표시를 보장하지는 않습니다. 부적절하다고 판단한 이미지는 기본 아이콘으로 대체됩니다.
자주 묻는 질문
파비콘은 꼭 ICO 파일이어야 하나요?
아닙니다. 최신 브라우저와 구글 검색은 PNG, SVG(브라우저) 등도 읽습니다. 다만 일부 프로그램이 루트의 favicon.ico를 자동으로 찾기 때문에 ICO 하나는 함께 두는 편이 안전합니다.
파비콘 크기는 몇 픽셀로 만들어야 하나요?
원본은 512×512px 이상 정사각형으로 준비하고, 생성기로 16·32·48px ICO와 180px, 192·512px PNG를 뽑으면 대부분의 환경을 커버합니다.
사진이나 글자로도 파비콘을 만들 수 있나요?
가능합니다. Convertico는 1~3글자나 이모지로 파비콘을 만드는 기능이 있습니다. 사진은 16px로 줄이면 알아보기 어려우니 단순한 부분만 잘라 쓰는 것이 좋습니다.
파비콘을 바꿨는데 예전 아이콘이 계속 보여요.
브라우저 캐시 문제인 경우가 많습니다. 시크릿 창이나 다른 브라우저로 확인해 보고, 검색 결과의 아이콘은 구글이 다시 수집할 때까지 며칠에서 몇 주 기다려야 합니다.
2026년 10월 기준 Convertico·RealFaviconGenerator 사이트, 구글 검색 센터 파비콘 가이드, 워드프레스닷컴 사이트 아이콘 도움말을 확인해 정리했습니다.