← 전체 글 보기

이미지로 파비콘 만드는 방법

2026-07-27

짧은 답: 이미지로 파비콘을 만들려면 ToolKoala의 파비콘 생성기를 열고 정사각형 이미지를 넣은 뒤 다운로드하세요. favicon.ico(16, 32, 48px 포함) 하나와 16, 32, 48, 180, 192, 512px 크기의 독립된 PNG들, 그리고 바로 붙여넣을 수 있는 HTML <link> 태그 블록을 받게 돼요. 무료이고, 전부 브라우저 안에서 실행돼요 — 이미지는 절대 업로드되지 않아요. 16픽셀짜리 아이콘 하나 받으려고 로그인을 요구하는 파비콘 사이트들에 질려버린 주에 이 도구를 만들었어요.

파비콘이 여러 크기로 필요한 이유

예전에는 파비콘이 16×16 .ico 하나면 끝이었어요. 이제는 아니에요. 아이콘이 표시되는 곳마다 요구하는 크기가 달라요.

  • 16 / 32 / 48px — 클래식한 브라우저 탭과 북마크 아이콘이에요. favicon.ico 안에 들어가요.
  • 180px — 애플 터치 아이콘이에요. 누군가 사이트를 아이폰 홈 화면에 추가할 때 쓰여요.
  • 192 / 512px — 안드로이드와 PWA 아이콘이에요. 홈 화면 설치와 앱 전환기에 쓰여요.

16px 아이콘 하나만 배포하면 탭에서는 선명하지만 누군가 휴대폰에 저장하는 순간 흐릿해 보여요. 이 도구는 소스 이미지 하나로 전체 세트를 만들어주기 때문에 이런 걸 일일이 신경 쓸 필요가 없어요.

파비콘 만드는 방법

  1. ToolKoala의 파비콘 생성기를 열고 이미지를 넣으세요.
  2. 16부터 512까지 모든 크기의 미리보기를 즉시 렌더링해줘서, 아이콘이 작게 표시될 때 어떻게 보이는지 확인할 수 있어요.
  3. 필요한 걸 다운로드하세요.
    • favicon.ico — 브라우저 탭용 다중 해상도 아이콘(16 + 32 + 48)이에요.
    • 모든 PNG — 클릭 한 번으로 모든 크기를 개별 PNG로 받아요.
    • 또는 미리보기 하나를 클릭해 그 크기만 다운로드하세요.
  4. 제공된 HTML 스니펫을 복사해서 페이지의 <head>에 붙여넣으세요.

이 스니펫에는 올바른 rel, type, sizes 속성이 이미 채워져 있어요.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

파일들을 사이트 루트(또는 href가 가리키는 위치)에 넣고 태그를 붙여넣으면 끝이에요.

16픽셀에서도 알아볼 수 있는 아이콘을 위한 팁

  • 정사각형에 단순하게 시작하세요. 16×16에서는 굵은 도형 하나나 글자 하나 들어갈 공간밖에 없어요 — 태그라인이 붙은 풀 로고는 무리예요. 로고가 세밀하다면 이 용도만을 위한 단순화된 "아이콘 마크" 버전을 따로 만드세요.
  • 큰 소스 이미지를 넣으세요. 큰 PWA 아이콘이 선명하게 유지되도록 최소 512px로 업로드하세요. 이 도구는 축소만 할 뿐 디테일을 새로 만들어내지는 못해요.
  • 높은 대비가 이깁니다. 아이콘은 통제할 수 없는 브라우저 크롬이나 휴대폰 배경화면 위에 올라가요. 대비가 강할수록 어디서나 잘 보여요.
  • 작은 미리보기를 확인하세요. 이 도구는 16px와 32px 버전을 픽셀 단위로 정확하게 보여줘요 — 그 크기에서 뭉개져 보인다면 배포하기 전에 디자인을 단순화하세요.

솔직한 한계

이 도구는 이미지를 정사각형 캔버스에 그리기 때문에 정사각형이 아닌 소스는 찌그러져요 — 깔끔한 결과를 원한다면 먼저 정사각형으로 자르기를 해주세요. 둥근 모서리나 여백을 자동으로 추가해주지도 않아요 — 업로드한 그대로 크기만 조정돼요. 그리고 표준적인 최신 세트만 생성해요 — 구식 마이크로소프트 타일이나 사파리 고정 탭용 SVG까지 모조리 필요하다면, 더 무거운 생성기가 그런 예외 케이스들을 커버해요. 사이트의 99%에는 여기서 만드는 ICO + PNG 세트가 브라우저가 실제로 요구하는 것과 정확히 일치해요.

자주 묻는 질문

이미지로 파비콘을 어떻게 만드나요? ToolKoala 같은 브라우저 기반 파비콘 생성기를 열고 정사각형 이미지를 넣은 뒤 favicon.ico와 모든 크기의 PNG를 다운로드하세요. 그런 다음 제공된 HTML 태그를 페이지의 <head>에 붙여넣으세요.

어떤 크기와 형식을 받게 되나요? 16, 32, 48px를 담은 favicon.ico 하나와, 16, 32, 48, 180(애플 터치), 192, 512px(안드로이드/PWA)의 독립된 PNG들을 받아요.

.ico 파일이 여전히 필요한가요, 아니면 PNG만 있으면 되나요? 둘 다 필요해요. favicon.ico는 브라우저 탭 호환성이 가장 넓고, 더 큰 PNG들은 애플 터치와 안드로이드/PWA 홈 화면 아이콘을 커버해요. 이 도구는 둘 다 제공해서 어디서든 문제없어요.

제 이미지가 업로드되나요? 아니요. 파비콘은 캔버스를 이용해 브라우저 안에서 생성되고, 이미지는 기기 밖으로 나가지 않아요.

소스 이미지가 정사각형이 아니에요. 괜찮을까요? 정사각형이 아닌 이미지는 늘어나서 정사각형으로 맞춰져요. 깔끔한 아이콘을 위해 먼저 1:1 비율로 잘라주세요.

— Milo 🐨