파비콘은 몇 px 로 만들어야 하나요?

브라우저 탭은 16·32px, Windows 바로가기는 48px, iOS 홈 화면은 180px, Android·PWA 는 192·512px 를 씁니다. 멀티사이즈 favicon.ico 에 16·32·48 을 담고 PNG 로 180·192·512 를 함께 올리면 사실상 모든 환경을 커버합니다.

업로드한 이미지가 서버로 전송되나요?

전송되지 않습니다. 이 도구는 FileReader 로 이미지를 읽고 Canvas 로 리사이즈한 뒤 자바스크립트가 직접 ICO·ZIP 바이너리를 조립합니다. 네트워크 요청이 전혀 없으며 페이지를 닫으면 메모리에서 사라집니다.

ICO 와 PNG 중 무엇을 써야 하나요?

둘 다 씁니다. favicon.ico 는 여러 해상도를 한 파일에 담을 수 있고 루트 경로 자동 탐색이 되는 안전망입니다. PNG 는 apple-touch-icon·PWA manifest 처럼 특정 규격을 명시할 때 필요합니다.

파비콘 생성기 — 이미지 하나로 멀티사이즈 ICO·PNG 파비콘 만들기

33. 미리보기

이미지를 올리면 사이즈별 미리보기가 여기에 나타납니다.

44. 내려받기

ICO · PNG 전 규격 · site.webmanifest · HTML 스니펫이 한 폴더에 담깁니다.

55. HTML 붙여넣기

<head> 안에 붙여넣기

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#4f46e5">

site.webmanifest

{
  "name": "My Site",
  "short_name": "My Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#4f46e5",
  "background_color": "#ffffff",
  "display": "standalone"
}

생성하지 않은 사이즈의 태그는 자동으로 빠지므로 404 가 나지 않습니다.

파비콘 생성기 (ICO · PNG · PWA)

11. 이미지 올리기

22. 규격과 스타일

33. 미리보기

44. 내려받기

55. HTML 붙여넣기

가이드 · FAQ · bal.pe.kr 도구 모음