본문으로 건너뛰기
yutils
예시

입력

logo.png (512×512)

출력

favicon.ico (16·32·48) · apple-touch-icon.png (180×180) · icon-192.png · icon-512.png + HTML 스니펫

참고

`.ico` 는 한 파일에 여러 해상도를 담습니다 — 브라우저가 탭·즐겨찾기·바탕화면 바로가기에 맞는 크기를 알아서 고릅니다. PWA 설치 아이콘(192·512)과 manifest 항목까지 함께 나옵니다.

사용법 / 자주 묻는 질문

이런 경우 사용하세요

  • 새 프로젝트 파비콘 세팅 — 이미지 하나로 .ico · apple-touch-icon · PWA 아이콘을 한 번에
  • 디자인 도구 없이 이모지나 글자만으로 임시 파비콘 만들기
  • Lighthouse PWA 감사가 요구하는 192 · 512 아이콘 채우기
  • iOS 홈 화면 추가 시 표시될 apple-touch-icon 준비
  • 파비콘 교체 후 그대로 붙여 넣을 `<link>` 태그 · manifest 항목 확보

자주 묻는 질문

Q.PNG 로 충분한데 왜 아직 `.ico` 인가요?
A.PNG 파비콘도 대부분의 브라우저에서 동작합니다. 다만 `.ico` 는 **한 파일에 여러 해상도**를 담을 수 있어 크기별 파일과 `sizes` 속성을 따로 관리할 필요가 없고, `<link>` 태그가 없을 때 브라우저가 사이트 루트의 `/favicon.ico` 를 찾아보는 폴백이 HTML 표준에 남아 있어 하나 두는 편이 안전합니다.
Q.어떤 크기를 준비해야 하나요?
A.브라우저 탭은 16×16, 고해상도 화면은 32×32, Windows 바로가기는 48×48 을 씁니다 — `.ico` 하나에 셋을 담으면 끝입니다. iOS 홈 화면은 180×180 apple-touch-icon, PWA 설치 아이콘은 192 · 512 PNG 가 별도로 필요합니다.
Q.파비콘을 바꿨는데 반영이 안 됩니다.
A.파비콘은 브라우저가 특히 오래 캐시합니다. 강력 새로고침으로도 안 바뀌면 `<link rel="icon" href="/favicon.ico?v=2">` 처럼 쿼리를 붙여 URL 자체를 바꾸는 방법이 확실합니다.
재미있는 사실

  • 파비콘은 1999년 3월 Internet Explorer 5 가 도입했습니다. 표준이 아니라 '즐겨찾기에 추가하면 사이트 루트의 /favicon.ico 를 요청한다' 는 한 브라우저의 관습이었는데, 전 세계 서버 로그에 favicon.ico 404 가 쌓이면서 사실상의 표준이 됐습니다.

    Wikipedia — Favicon

  • .ico 는 원래 Windows 아이콘 포맷이라 한 파일 안에 여러 해상도의 이미지를 담을 수 있습니다. 16×16 · 32×32 · 48×48 을 하나로 묶어 두면 브라우저가 상황에 맞는 크기를 골라 쓰지만, PNG 파비콘은 크기마다 별도 파일과 sizes 속성이 필요합니다.

    Wikipedia — ICO (file format)

  • HTML5 에서 `<link rel="icon">` 이 정식 링크 타입이 됐지만, WHATWG HTML Standard 는 지금도 '아이콘 링크가 없으면 /favicon.ico 를 시도해도 된다' 는 폴백을 명세에 남겨 두고 있습니다. 브라우저 하나의 관습이 명세 문장으로 굳은 셈입니다.

    WHATWG HTML Standard — link types

관련 도구

이 카테고리 모든 도구 보기 →