왜 만들었나요
개인 프로젝트를 배포할 때마다 파비콘 하나 넣겠다고 파비콘 변환 사이트를 찾아 헤맸는데, 어떤 곳은 회원가입을 요구하고 어떤 곳은 내 로고를 서버에 올려야 해서 매번 찜찜했습니다. 필요한 건 이미지를 여러 크기로 줄여 묶고 <head>에 붙일 코드를 얻는 것뿐이라 직접 만들었습니다.
파비콘 만들기
로고 한 장으로 웹사이트 아이콘을 크기별로 한 번에 만듭니다. 웹사이트에 붙여넣을 코드까지 함께 나옵니다.
또는 파일을 여기에 끌어다 놓으세요
PNG · JPG · WebP · SVG · 정사각형 512px 이상 권장
Note
올린 로고는 서버로 전송되지 않습니다. 크기 변환과 파일 생성이 전부 브라우저 안에서 이뤄져, 공개 전 브랜드 로고도 기기 밖으로 나가지 않습니다.
파비콘 만들기 사용 방법
-
가운데 로고 이미지 선택 버튼을 누르거나, 파일을 그 자리에 끌어다 놓습니다(끌고 오는 동안에만 점선 테두리 안내가 화면을 덮습니다).
-
올리는 즉시 모든 크기가 만들어집니다. 왼쪽 위 + 다른 이미지로 로고를 바꾸고, 초기화로 옵션까지 기본값으로 되돌립니다. 밝은 탭·어두운 탭 미리보기로 실제 모습을 확인하고, 필요한 파일을 낱개로 받거나 ZIP 전체 다운로드로 한 번에 받습니다. 배경색·여백·둥근 모서리는 오른쪽 옵션을 펼쳐 손봅니다. 값을 바꾸면 모든 크기가 곧바로 다시 만들어집니다.
-
받은 파일을 사이트 최상위 경로에 올린 뒤, 아래 HTML 코드를 복사해 페이지의
<head>안에 붙여넣으면 적용됩니다.
이렇게 나옵니다
정사각형 로고 한 장을 올리면 이렇게 나옵니다.
| 넣은 것 | 나온 것 |
|---|---|
logo.png 512 × 512 | favicon.zip — ico 1개 + PNG 6종 + site.webmanifest + head-snippet.html |
브라우저 탭용(16·32·48px), 아이폰 홈 화면용(180px), 안드로이드·앱 설치용(192·512px)이 모두 들어 있습니다.
알아두면 좋은 것
어떤 파일이 왜 필요한가
| 파일 | 크기 | 어디에 쓰이나 |
|---|---|---|
favicon.ico | 16·32·48 | 오래된 브라우저·브라우저가 알아서 찾는 기본 경로 |
favicon-16x16.png | 16 | 브라우저 탭 |
favicon-32x32.png | 32 | 브라우저 탭 (고해상도 화면) |
favicon-48x48.png | 48 | 즐겨찾기·바탕화면 바로가기 |
apple-touch-icon.png | 180 | 아이폰 홈 화면에 추가할 때 |
android-chrome-192x192.png | 192 | 안드로이드 홈 화면 |
android-chrome-512x512.png | 512 | 앱처럼 설치했을 때 시작 화면 |
기기와 브라우저마다 요구하는 크기가 달라서 이렇게 여러 개가 필요합니다. 전부 한 번에 만들어 주므로 따로 준비할 필요가 없습니다.
HTML 코드도 함께 나옵니다
파일만 있으면 브라우저가 알아서 찾아 주지 않습니다. 웹페이지에 "이 아이콘을 쓰라"고 알려 주는 코드를 넣어야 합니다.
그 코드가 결과 화면에 함께 나오므로, 복사해서 웹페이지의 <head> 안에 붙여넣으면 됩니다. site.webmanifest 파일도 함께 들어 있습니다. 여기에는 아이콘과 배경색·표시 방식이 담기고, 앱 이름은 들어 있지 않아 직접 채워야 합니다.
배경·여백·둥근 모서리를 손볼 수 있습니다
옵션을 펼치면 세 가지를 조절할 수 있고, 바꾸는 즉시 모든 크기가 다시 만들어집니다.
| 옵션 | 무엇을 하나 |
|---|---|
| 배경 | 투명 그대로 두거나, 고른 색으로 정사각형을 채웁니다 |
| 여백 | 0~30% 사이에서 로고 주변 빈 공간을 넓힙니다 |
| 둥근 모서리 | 네 귀퉁이를 둥글게 깎아 앱 아이콘 같은 모양으로 만듭니다 |
투명 배경 PNG가 어두운 탭에서 잘 안 보이면 배경을 밝은 색으로 채우는 쪽이 낫고, 로고가 답답하게 꽉 차 보이면 여백을 10% 정도 주면 정돈되어 보입니다.
파일은 어디에 두나요
내려받은 파일들을 웹사이트의 최상위 폴더(주소로 치면 사이트주소.com/favicon.ico로 열리는 위치)에 그대로 올리면 됩니다. 폴더를 따로 만들지 말고 압축을 푼 그대로 올리는 게 가장 간단합니다.
이런 경우에는
원본은 어떻게 준비하나요
- 정사각형이 가장 깔끔합니다. 직사각형을 넣어도 찌그러지거나 잘리지는 않습니다. 비율을 지킨 채 정사각형 가운데에 넣기 때문에 위아래나 좌우에 빈 공간이 생깁니다
- 512px 이상이면 모든 크기에서 깨지지 않습니다
- 배경이 투명한 PNG를 쓰면 어두운 탭에서도 자연스럽습니다. 빈 공간이 신경 쓰이면 옵션에서 배경색을 채우면 됩니다
작은 크기에서 알아볼 수 없어요
탭에 뜨는 아이콘은 16px, 손톱만 한 크기입니다. 글자가 많거나 선이 가는 로고는 뭉개져서 안 보입니다.
- 글자보다 단순한 심볼이 낫습니다
- 회사명 전체보다 첫 글자 하나만 쓰는 방식이 흔합니다
- 미리보기에서 16px 모습을 꼭 확인하세요
바꿨는데 예전 아이콘이 그대로예요
브라우저가 파비콘을 오래 기억해 두기 때문입니다. 강력 새로고침(Ctrl+Shift+R / Cmd+Shift+R)을 하거나, 다른 브라우저·시크릿 창에서 확인해 보세요.
어떤 파일을 올릴 수 있나요
PNG · JPG · WebP · SVG · GIF · BMP를 올릴 수 있습니다. 로고 원본이 SVG로 있다면 SVG를 올리는 게 가장 깔끔하게 나옵니다.
.ico파일은 올릴 수 없습니다. ico를 만들어 주는 쪽으로만 동작하므로, 기존 ico에서 PNG를 뽑아내는 용도로는 쓸 수 없습니다- 아이폰 사진(HEIC)도 지원하지 않으니 이미지 변환으로 먼저 바꿔 주세요
- 이미지 여러 장을 골라도 첫 장만 처리합니다
이 도구로는 안 되는 것
용어 설명
- 파비콘
브라우저 탭에 뜨는 작은 아이콘입니다. 즐겨찾기 목록이나 검색 결과에도 함께 표시되어, 사이트를 알아보는 표시 역할을 합니다.
- .ico
윈도우와 오래된 브라우저가 쓰는 아이콘 전용 형식입니다. 한 파일 안에 여러 크기를 담을 수 있어서, 브라우저가 상황에 맞는 크기를 알아서 골라 씁니다.
- `<head>`
웹페이지에서 화면에 보이지 않는 설정이 들어가는 부분입니다. 파비콘 위치, 페이지 제목, 검색 정보 등이 여기 적힙니다. 만들어진 코드를 이 안에 붙여넣으면 됩니다.
파비콘 만들기 자주 묻는 질문
이미지 한 장만 있으면 favicon.ico까지 만들어지나요?
네. 로고나 이미지를 하나 올리면 16·32·48px가 모두 담긴 favicon.ico와 함께 브라우저 탭용 PNG, 아이폰 홈 화면용(apple-touch-icon 180px), 안드로이드·PWA용(192·512px)까지 한 번에 생성됩니다. 낱개로 내려받거나 'ZIP 전체 다운로드'로 한꺼번에 받을 수 있습니다.
어떤 이미지를 올리는 게 좋나요?
PNG·JPG·WebP·SVG는 물론 GIF·BMP도 올릴 수 있고, 정사각형에 가깝고 512px 이상인 이미지가 좋습니다. 파비콘은 16px까지 아주 작게 줄어들기 때문에, 여백이 적고 형태가 단순한 로고일수록 작은 크기에서도 또렷하게 보입니다. 배경이 투명한 PNG나 SVG를 올리면 투명도가 그대로 유지되고, 필요하면 옵션에서 배경색을 채울 수 있습니다.
만든 파비콘을 웹사이트에 어떻게 적용하나요?
내려받은 favicon.ico와 PNG 파일들을 사이트 최상위(루트) 경로에 올린 뒤, 화면 아래에 표시되는 HTML 코드를 복사해 페이지의 <head> 안에 붙여넣으면 됩니다. 안드로이드·PWA에 필요한 site.webmanifest 파일도 ZIP 안에 함께 들어 있어 그대로 올리면 됩니다.
이미지가 서버로 전송되나요?
아니요. 올린 이미지는 브라우저 안에서 직접 크기가 조절되어 파비콘으로 만들어집니다. 파일이 외부 서버로 업로드되거나 저장되지 않으므로, 공개 전 로고나 내부용 이미지도 안심하고 사용할 수 있습니다.
마지막 업데이트: