여기에 로고를 놓으세요
탭해서 파일을 골라도 됩니다. 512px 이상의 정사각형 이미지가 가장 좋습니다.
PNG, JPG, WebP, SVG, ICO, GIF
이미지는 이 탭 안에서 읽히고, 크기가 조정되고, 파일로 묶입니다. 어디에도 올라가지 않고, 어느 단계에서도 서버를 거치지 않습니다.
2026년에 정말 필요한 파비콘 크기는 무엇일까요?
대부분의 생성기가 아직도 건네주는 스무 개짜리 묶음보다 훨씬 적습니다. 다섯 곳이면 의미 있는 브라우저와 운영체제를 모두 덮고, 그 이상은 얻는 것 없이 <head>만 무겁게 만듭니다.
favicon.ico, 16과 32와 48
브라우저가 HTML을 한 줄도 읽기 전에 도메인 루트에서 찾는 파일은 여전히 이것입니다. 컨테이너 하나가 세 크기를 모두 담기 때문에, 이 파비콘 변환기는 PNG의 이름만 바꾸지 않고 진짜 .ico를 만듭니다. 16px은 탭, 32px은 레티나 탭과 북마크 바, 48px은 윈도우 바로 가기입니다.
favicon.svg, 벡터가 있다면
벡터 파비콘은 어떤 크기에서도 선명하고, 파일 안에 미디어 쿼리를 넣으면 시스템 다크 모드에 반응하게도 할 수 있습니다. 이를 이해하는 브라우저는 .ico보다 이 파일을 먼저 씁니다. 여기에 SVG를 올리면 벡터 그대로 남고, 래스터로 바꿔 가짜 벡터를 돌려주는 일은 없습니다.
apple-touch-icon.png, 180×180
누군가 사이트를 홈 화면에 추가할 때 iOS가 쓰는 아이콘입니다. 파일 하나면 충분합니다. iOS 8부터 180px 아이콘 하나를 알아서 줄여 쓰기 때문에, apple-touch-icon-57x57부터 152x152까지 쌓아 두던 시절은 끝났습니다. 이 애플 터치 아이콘 생성기는 하나만 쓰고, 불투명하게 만듭니다.
android-chrome 192와 512, 그리고 maskable
link 태그가 아니라 site.webmanifest에서 참조합니다. 192px은 홈 화면, 512px은 스플래시 화면과 설치 안내입니다. maskable 변형은 안드로이드가 런처 모양에 맞춰 잘라내는 파일이라, 그래픽에 실제 여백이 필요합니다.
mstile-150x150.png, 남겨 둬도 부담 없는 파일
윈도우에 고정한 사이트는 아직 이 파일을 읽습니다. 작은 PNG 하나와 메타 태그 두 줄이면 되니 포함해 두었지만, 지워도 깨지는 것은 없습니다. 그게 솔직한 답이고, 그래서 필수인 척하지 않고 목록 맨 끝에 두었습니다.
.ico 파일 하나에 왜 여러 이미지가 들어 있을까요?
.ico는 이미지 형식이 아니라 컨테이너 형식이기 때문입니다. 이 차이를 아는지 모르는지가, 어디서나 잘 보이는 파비콘과 윈도우나 피드 리더에서 조용히 실패하는 파비콘을 가릅니다.
먼저 디렉터리, 그다음 이미지
파일은 뒤따르는 이미지 개수를 알려 주는 6바이트 헤더로 시작하고, 이미지마다 너비, 높이, 바이트 길이, 파일 내 위치를 담은 16바이트 항목이 붙고, 그다음에야 실제 이미지 데이터가 옵니다. 전부 리틀 엔디언입니다. 이 구조 때문에 확장자만 .ico로 바꾼 PNG는 .ico가 아닙니다.
크기는 읽는 쪽이 고릅니다
16px 탭을 그리는 브라우저는 디렉터리를 읽고 16px 항목을 찾아 그것만 디코딩합니다. 512px 이미지 하나만 주면 그릴 때마다 값싼 샘플링으로 줄여서 흐릿하게 나옵니다. 16px용으로 따로 만든 이미지를 주면 그걸 그대로 씁니다.
안에 든 데이터는 PNG여도 됩니다
원래 형식은 픽셀 순서가 뒤집힌 BMP와 1비트 투명 마스크를 따로 담았습니다. 비스타 이후의 모든 윈도우와 모든 브라우저는 컨테이너 안의 PNG도 받아들이고, 이 ico 변환기가 쓰는 것이 바로 그 방식입니다. 파일은 더 작고, 알파는 진짜이며, 낡은 인코더도 없습니다.
품질은 16px에서 드러납니다
1024px 로고를 한 번에 16px로 줄이면 원본 픽셀을 너무 적게 참조해 회색 얼룩만 남습니다. 이 도구는 중간 canvas에서 1024에서 512, 512에서 256처럼 절반씩 줄여 모든 픽셀이 결과에 기여하도록 합니다. 작은 파비콘이 알아볼 만하게 남는 이유는 이것 하나뿐입니다.
apple-touch-icon은 아직도 필요할까요?
필요합니다. 그리고 묶음 안의 다른 아이콘과 규칙이 다른 유일한 파일입니다. 알아 둘 것이 두 가지인데, 둘 다 위에서 알아서 처리됩니다.
iOS는 투명도를 버립니다
Safari는 홈 화면 아이콘을 배경화면이 아니라 검은색 위에 합성합니다. 그래서 투명 배경으로 정성껏 내보낸 로고가 검은 타일 위에 떠 있는 모양으로 도착합니다. 이 도구가 나머지를 투명으로 설정해도 apple-touch-icon만은 항상 불투명 배경, 기본값 흰색으로 쓰는 이유입니다. iOS 7부터는 시스템이 광택 효과도 더 얹지 않으니, 넘긴 그대로가 사람들이 보는 화면입니다.
안드로이드는 여백을 더하지 않고 잘라냅니다
안드로이드 런처는 maskable 아이콘을 받아 기기에 따라 원, 스퀘어클, 둥근 사각형 등 자기 모양으로 잘라냅니다. 살아남는 것이 보장된 영역은 가운데 80%뿐이라, 화면 가장자리까지 꽉 채운 로고는 끝부분을 잃습니다. 여기서 maskable 파일은 슬라이더를 어떻게 두든 20% 여백을 유지하고, 원형 미리보기가 런처에 남을 부분을 그대로 보여 줍니다.
내 사이트에 파비콘을 어떻게 넣나요?
두 단계이고, 실수는 대부분 두 번째에서 나옵니다. 기억에 의존해 쓰지 말고 도구가 만들어 준 블록을 그대로 복사하세요.
파일은 루트에 둡니다
favicon.ico와 나머지 파일을 index.html 옆에 두어 yoursite.com/favicon.ico에서 응답하게 하세요. 브라우저는 아무도 시키지 않아도 그 경로를 스스로 요청합니다. link 태그보다 파일 위치가 더 중요한 이유입니다.
head 블록은 모든 페이지에
홈페이지만이 아닙니다. 깊은 페이지로 들어와 그 페이지를 북마크한 방문자에게도 제대로 된 아이콘이 보여야 합니다. 사이트가 템플릿이나 프레임워크를 쓴다면 블록은 공용 레이아웃에 들어가야 합니다.
.ico는 크기 없이 선언합니다
rel="icon" href="/favicon.ico" sizes="any"를 쓰세요. 크기는 이미 컨테이너 안에 있고, 마크업에 하나를 박아 두면 브라우저가 나머지를 가져가지 못합니다. SVG 줄을 먼저 두어 벡터를 이해하는 브라우저가 그것을 고르게 합니다.
그다음 강력 새로 고침, 두 번
파비콘은 페이지와 별도로, 그리고 아주 공격적으로 캐시됩니다. 예전 아이콘이 일반 새로 고침으로는 며칠씩 버틸 수 있습니다. 뭔가 고장 났다고 결론 내리기 전에 yoursite.com/favicon.ico를 직접 열어 새 파일이 실제로 응답하는지 확인하세요.
이미 있는 QR 코드나 단축 링크가 실제로 어디로 가는지 확인하고 싶나요? QR 코드 리졸버로 확인해 보세요
새 사이트에 함께 쓸 짧은 링크가 필요한가요? 무료 링크 단축기로 하나 만들어 보세요
아이콘은 첫인상의 작은 절반입니다.
파비콘은 사람들이 이미 사이트에 들어온 다음에 보는 것입니다. 더 어려운 일은 그들을 데려온 링크가 하고 있고, 보통 아무도 재지 않는 부분이 바로 그쪽입니다. 그 이야기가 와닿는다면, LinkScale이 우리가 만드는 것입니다.
방문이 어디서 왔는지 봅니다
남의 대시보드에 뜨는 숫자 하나가 아니라, 나눠 준 링크마다 클릭, 국가, 기기, 그리고 그다음에 무슨 일이 있었는지까지.
목적지는 나중에 바꿉니다
인쇄했거나 이미 올린 링크의 도착지를 나중에 바꿉니다. 저장해 둔 사람에게 갱신해 달라고 부탁할 필요가 없습니다.
한 페이지에 전부
스토어, 예약 폼, 소셜 계정을 한데 모은 링크 인 바이오 페이지로, 하나만 허락된 링크를 더 멀리 보냅니다.
파비콘 생성기 자주 묻는 질문
무료이고 계정도, 워터마크도, 생성 개수 제한도 없습니다. 이미지는 절대 업로드되지 않습니다. 브라우저의 FileReader로 읽어 canvas에 그리고 Blob으로 묶는 일이 전부 페이지 안에서 일어납니다. 이 도구 뒤에는 엔드포인트가 없어서 보낼 곳 자체가 없습니다. 사용하는 동안 브라우저의 네트워크 탭을 열어 보거나, 페이지를 불러온 뒤 인터넷 연결을 끊어 보면 직접 확인할 수 있습니다.
파비콘은 끝났습니다. 사람을 데려오는 링크가 나머지 절반입니다.
LinkScale은 클릭 이후에 무슨 일이 일어나는지 알고 싶고, 아무것도 다시 인쇄하지 않고 도착지를 바꾸고 싶은 사람들을 위한 링크 관리 플랫폼입니다.
Free 14-day trial on every plan