Favicon

이미지 한 장으로 웹사이트 파비콘(favicon)에 필요한 여러 크기의 PNG를 한 번에 만듭니다. 결과는 ZIP으로 받거나 32×32 파일만 따로 받을 수 있습니다.

사용 방법

1. 정사각형에 가까운 로고 이미지를 선택합니다.
2. 정사각형 맞춤 방식을 고릅니다: 꽉 채우기(잘라냄) 또는 안에 맞추기.
3. 파비콘 생성을 누르고 ZIP 또는 32×32 PNG를 다운로드합니다.

실무에서 알아 두면 좋은 점

• 작은 크기에서도 알아볼 수 있게 글자보다는 단순한 심볼을 쓰는 것이 좋습니다.
• 원본은 512×512 이상이면 모든 크기에서 선명하게 나옵니다.
• Next.js에서는 app 폴더에 icon.png를 두면 자동으로 파비콘 태그가 만들어집니다.

자주 묻는 질문

파일이 서버로 업로드되나요?

아니요. 파일은 사용 중인 브라우저 안에서만 처리되고 서버로 전송되거나 저장되지 않습니다. 네트워크를 끊은 상태에서도 페이지가 열려 있다면 동작합니다.

HTML에는 어떻게 넣나요?

<link rel="icon" href="/favicon-32x32.png" sizes="32x32"> 처럼 head에 추가합니다. 애플 기기용으로는 180×180 PNG를 apple-touch-icon으로 지정합니다.

관련 글

• Metadata·Open Graph·SEO 기본기

실무에서 이 도구를 어떻게 쓰고 계신가요? 업무에 맞춘 설정값, 다른 도구와 함께 쓰는 순서, 겪었던 문제와 해결 방법처럼 나만의 노하우가 있다면 아래 댓글로 공유해 주세요. 필요한 기능 요청도 환영합니다. 남겨 주신 내용은 도구 개선과 안내 보완에 반영합니다. 댓글 남기기 ↓