Favicon 생성기

왜 여전히 멀티 파일 파비콘 세트가 필요한가

파비콘은 탭 아이콘만이 아닙니다. 검색 결과의 도메인 옆, 브라우저 즐겨찾기, iOS 사용자가 「홈 화면에 추가」할 때의 아이콘, Android의 PWA 설치 카드까지 등장하는 자리마다 요구하는 크기가 다르고 일부는 약간 다른 형식을 요구합니다. favicon.ico 하나만 두면 레티나 스크린과 설치 가능한 PWA에서 거친 가장자리가 그대로 노출됩니다.

이 도구는 현대 표준 세트를 한 번에 생성합니다 — 레거시 호환을 위한 ICO, 현대 <link rel=“icon”> 스택을 위한 멀티 사이즈 PNG, iOS용 apple-touch-icon, 그리고 사이트 이름, start_url, display, 192·512 아이콘을 적은 webmanifest입니다. Chrome이 사이트 설치를 안내하기 전에 확인하는 항목입니다.

HTML 스니펫 풀이

생성된 스니펫은 약 7줄로 모든 현대 환경을 다룹니다:

• <link rel=“icon” type=“image/x-icon” href=“/favicon.ico”> — 오래된 브라우저와 여전히 favicon.ico를 우선 파싱하는 즐겨찾기를 위한 폴백.
• <link rel=“icon” type=“image/png” sizes=”…”> 16/32/48 — 어느 것을 쓸지는 HTML 표준상 브라우저가 정합니다. 2026-10-02 실측에서 2× 화면의 Chromium 152는 ICO 링크가 있으면 favicon.ico만, PNG 링크만 있으면 favicon-32.png를 요청했습니다.
• <link rel=“apple-touch-icon”> 180×180 — iOS Safari가 「홈 화면에 추가」 시 사용.
• <link rel=“manifest”> — Android Chrome과 PWA 설치기가 site.webmanifest를 읽고, 그 안에는 「사이트 이름」 칸의 이름, “start_url”: ”/”, “display”: “standalone”, purpose: “any”인 192/512 PNG가 들어갑니다. 「사이트 이름」을 비우면 name과 short_name을 쓰지 않으며 Chrome이 설치를 안내하지 않습니다.
• <meta name=“theme-color”> — 모바일 주소창과 설치된 PWA의 타이틀 바 색상을 제어합니다.

패키지가 만들어지는 방식

렌더러는 각 타깃 크기마다 새 canvas를 생성하고, 선택한 배경과 모양 마스크를 적용한 뒤, padding 만큼 안쪽에 소스를 중앙 배치로 그립니다. 이어 canvas.toBlob(‘image/png’)로 컴팩트한 PNG 데이터를 받습니다. 16/32/48 PNG 세 개는 PNG 압축 항목 형식으로 단일 favicon.ico에 묶입니다 — ICONDIR 헤더와 16바이트 ICONDIRENTRY 3개 뒤에 3개의 PNG 페이로드를 연결한 구조입니다.

ZIP 라이터는 STORED 방식(DEFLATE 미적용)입니다: PNG는 이미 압축되어 있어 재 DEFLATE 이득이 1% 미만이고 코드는 5 KB가 늘어납니다. 파일 이름은 General Purpose Bit Field의 bit 11에서 UTF-8로 표시되어 향후 이름을 바꿔도 비 ASCII 이름이 깨지지 않습니다.

개인정보와 오프라인

• 페이지는 파일을 업로드하지 않습니다. 브라우저 네트워크 패널을 열고 Generate를 클릭해 보세요. 어떤 요청도 발생하지 않습니다.
• 페이지가 캐시되면 오프라인에서도 동작합니다. Canvas API, ZIP, ICO 라이터가 모두 페이지 번들 안에 인라인되어 있습니다.
• 사용량 집계만 합니다. 다른 도구 페이지와 마찬가지로 이 페이지는 Google Analytics를 불러옵니다. 도구는 generate와 download 이벤트를 한 번씩 기록하지만, 이벤트에는 도구 이름과 동작만 담기고 이미지는 담기지 않습니다.

흔한 함정

• 외부 이미지를 참조하는 SVG. SVG가 <image href=“https://…”>를 포함하면 브라우저가 canvas를 blob으로 읽기를 거부합니다(교차 출처 오염). 붙여 넣기 전에 이미지를 Data URI로 인라인하세요.
• 기업 관리 Linux에서 빈 이모지 상자. 일부 IT 관리 Linux 배포판에는 컬러 이모지 폰트가 없습니다. 미리보기가 빈 상자로 보이면 Text나 Image 탭으로 전환하세요.
• 16 px에서 사라지는 미세 디테일. 1.5 px보다 가는 선은 16×16에서 사라집니다. 32에서는 또렷한데 16에서 사라진다면 디자인을 단순화하거나 배경색으로 대비를 보강하세요.