디자인

Favicon 생성기

PNG, JPG, SVG, WebP 이미지를 업로드하여 표준 크기(16×16~512×512)의 웹사이트 favicon을 일괄 생성. 모든 처리가 브라우저에서 완결되며 이미지는 서버로 전송되지 않습니다.

[[ labels.upload_title ]]

[[ labels.upload_hint ]]

[[ labels.upload_formats ]]

[[ labels.drop_active ]]
preview
[[ imageFile?.name ]]

[[ labels.result_title ]]

[[ g.def.size ]]×[[ g.def.size ]]
[[ sizeLabel(g.def) ]]
[[ g.def.filename ]]

[[ labels.html_title ]]

[[ labels.html_desc ]]

[[ htmlSnippet ]]

사용 팁

  • 업로드한 이미지는 서버로 전송되지 않습니다. 모든 처리는 브라우저 내에서 완결됩니다.
  • 권장 이미지: 정사각형 PNG(최소 512×512 px)를 사용하면 모든 크기에서 선명하게 축소됩니다. 투명도(알파 채널)도 완벽하게 지원합니다.
  • SVG favicon은 일부 최신 브라우저에서 <link rel="icon" type="image/svg+xml">으로 직접 사용할 수 있습니다. 단, iOS Safari는 PNG 형식의 Apple Touch Icon이 필요합니다.
  • PWA(Progressive Web App)를 개발하는 경우 manifest.json에 192×192와 512×512 PNG 아이콘을 등록하세요.

자주 묻는 질문

이 도구는 PNG 형식으로 출력합니다. 모든 최신 브라우저(Chrome, Firefox, Edge, Safari)는 PNG favicon을 지원하므로 실용적으로 ICO 형식은 필요하지 않습니다. ICO 형식은 IE11 이하를 지원해야 할 때만 필요한데, 현재 그런 요건이 발생하는 경우는 매우 드뭅니다.

최소한 32×32(브라우저 탭)와 180×180(Apple Touch Icon / iOS 홈 화면)을 준비하는 것을 권장합니다. PWA를 구축하는 경우 192×192와 512×512도 필요합니다.

현재 버전에서는 비율을 유지하면서 이미지를 정사각형 캔버스에 맞게 축소합니다. 로고나 텍스트가 포함된 이미지는 미리 정사각형으로 크롭한 후 업로드하는 것을 권장합니다.

여담 ― Favicon의 역사 ― 16px의 작은 혁명

1999년, Internet Explorer 5가 처음으로 즐겨찾기에 작은 아이콘을 표시하는 기능을 구현했습니다. 이로 인해 사이트 루트에 favicon.ico라는 파일명으로 아이콘을 두는 관습이 생겨났으며, "favicon"이라는 단어는 "favorite icon"의 줄임말입니다.

ICO 형식은 Windows 아이콘 파일 형식을 차용한 것으로, 하나의 파일에 여러 크기(16×16, 32×32, 48×48)를 포함할 수 있는 특수한 포맷이었습니다. 오늘날에는 PNG와 SVG로 대체할 수 있으며, 특히 SVG favicon(image/svg+xml)은 해상도에 독립적이고 다크 모드에도 대응할 수 있어 주목받고 있습니다. <link rel="icon"> 태그는 2000년대 중반에 공식 표준화되었지만, favicon.ico를 루트에 두는 관행은 하위 호환성을 위해 지금도 남아 있습니다.

Apple이 2007년 iPhone을 발표했을 때, 독자적인 Apple Touch Icon(apple-touch-icon.png) 사양을 도입했습니다. 사용자가 iOS 홈 화면에 바로가기를 추가할 때 표시되는 아이콘으로, 처음에는 57×57 px였지만 Retina 디스플레이의 보급에 따라 현재의 180×180 px가 표준이 되었습니다. PWA 확산으로 192×192, 512×512 같은 대형 크기도 필요해지면서 favicon 관리의 복잡성은 해마다 증가하고 있습니다.

같은 카테고리의 도구