파비콘 생성기

파비콘은 브라우저 탭과 즐겨찾기, 휴대폰 홈 화면에 뜨는 작은 사이트 아이콘입니다. 이미지나 로고를 올리면 그 파비콘 규격으로 만들어 주고, head에 붙일 HTML 스니펫까지 함께 내줍니다.

파비콘(favicon)은 브라우저 탭, 즐겨찾기, 휴대폰 홈 화면 아이콘에 표시되는 작은 사이트 상징입니다. 작은 점처럼 보이지만 탭이 여러 개일 때 사이트를 찾게 해 주고, 검색 결과와 공유 링크에서 신뢰감을 줍니다. 사이즈가 한 종류만 있으면 고해상도 화면이나 안드로이드·iOS 홈 화면에서 흐릿하게 나오므로, 16px부터 512px까지 여러 크기를 함께 두는 것이 좋습니다.

이 도구는 이미지를 서버에 올리지 않고 브라우저에서 중앙 정사각으로 잘라 8가지 크기를 만든 뒤, 16·32·48을 하나로 묶은 표준 favicon.ico와 애플·PWA용 PNG, 그리고 바로 붙일 HTML 스니펫까지 ZIP으로 묶어 줍니다.

사용 방법

긴 이미지는 중앙 정사각형을 남기고 양옆 또는 위아래가 잘립니다. 배경색은 투명 부분에만 적용되며 흰색을 투명하게 지우는 기능은 아닙니다. 작은 원본을 확대해도 세부가 복원되지는 않습니다. 애니메이션·원본 메타데이터는 보존하지 않습니다.

• ① 정사각형에 가깝고 가장자리 여백이 적은 로고·심볼 이미지를 올립니다.
• ② 투명 PNG면 "그대로", 투명 부분을 흰색으로 바꾸려면 "흰 배경"을 고릅니다.
• ③ "파비콘 만들기"를 누르면 미리보기와 ZIP, HTML 스니펫이 만들어집니다.
• ④ ZIP을 풀어 파일을 사이트 루트에 올리고, 스니펫을 <head>에 붙여넣습니다.

적용 방법 (HTML · 티스토리 · 워드프레스)

• 일반 HTML: ZIP 안의 파일을 사이트 최상위 폴더에 올리고, 받은 스니펫을 모든 페이지의 <head> 안에 붙여넣습니다.
• 블로그·CMS: 서비스의 사이트 아이콘 설정에서 허용하는 파일 형식과 크기를 확인하고 업로드합니다. 업로드 경로가 사이트 루트가 아니라면 스니펫의 경로도 실제 주소로 바꿔야 합니다.
• 기존 설정 확인: 테마 파일을 바로 수정하기 전에 관리 화면의 아이콘 설정을 확인하세요. 기존 icon 링크와 새 스니펫을 중복 삽입하지 않도록 합니다.

크기 참고

2026.09.14 데스크톱 Edge에서 직접 만든 800×400px PNG(7,955바이트)를 시험했습니다. 양옆의 빨강·초록은 잘리고 중앙의 파랑과 투명 여백이 남았습니다. ZIP의 PNG 8개와 ICO 내부 16·32·48px 이미지를 각각 열어 확인했고, 투명 유지 결과의 모서리는 투명, 흰 배경 결과는 흰색이었습니다. 작은 크기는 미리보기와 실제 결과를 함께 확인하세요.

ZIP에는 PNG 8개(16·32·48·64·128·180·192·512px), ICO 1개, 적용 안내 1개로 총 10개 파일이 들어갑니다. 48·64·128px PNG도 개별 파일로 보관할 수 있습니다.

※ 아이콘이 안 바뀌면 먼저 파일 URL이 열리는지, head의 경로와 기존 아이콘 설정이 맞는지 확인한 뒤 캐시를 점검하세요.

브라우저·용도별 권장 크기

아래는 이 도구가 만드는 크기입니다. 실제 표시 위치와 선택되는 파일은 브라우저·운영체제·사이트 설정에 따라 다릅니다. 192·512px 이미지를 내려받는 것만으로 PWA 설치 기능이 만들어지지는 않습니다. 웹 앱 매니페스트의 icons 설정 등은 사이트에서 별도로 구성해야 합니다. MDN 매니페스트 icons 설명 (확인: 2026.09.14)

• 16×16 · 32×32 · 48×48 → 한 개의 ICO에 함께 담는 파비콘(탭·즐겨찾기). 환경이 알아서 골라 씁니다.
• 180×180 → 애플 터치 아이콘(아이폰·아이패드 홈 화면).
• 192×192 → 안드로이드 홈 화면·PWA 아이콘.
• 512×512 → PWA 설치 화면·스플래시 등 크게 보이는 자리.

ICO와 PNG는 무엇이 다른가

ICO는 여러 크기의 이미지를 담는 컨테이너이고 PNG는 개별 이미지입니다. 이 도구의 ICO에는 16·32·48px PNG 데이터가 들어갑니다. PNG 압축 ICO를 읽지 못하는 구형 프로그램도 있으므로 해당 환경은 직접 확인해야 합니다.

HTML head에 넣는 법

받은 파일을 사이트에 올린 뒤, 모든 페이지의 <head> 안에 링크 태그를 넣으면 됩니다. 파비콘은 <link rel="icon" href="/favicon.ico">처럼, 애플 터치 아이콘은 <link rel="apple-touch-icon" href="/apple-touch-icon.png">처럼 적습니다. PWA 아이콘(192·512)은 보통 manifest 파일에 등록하지만, head에 icon 링크를 함께 두어도 무방합니다. 이 도구가 만들어 주는 HTML 스니펫에 이 줄들이 정리되어 있으니, 복사해 붙여넣고 파일 경로만 사이트 구조에 맞게 맞추면 됩니다.

※ 링크를 넣었는데도 옛 아이콘이 보이면 브라우저가 이전 파비콘을 캐시에 들고 있는 경우가 대부분입니다. 강력 새로고침(Ctrl+F5)을 하거나, 브라우저 설정에서 캐시·사이트 데이터를 지운 뒤 다시 열어 보세요. 환경에 따라 새 아이콘 반영까지 시간이 걸릴 수 있습니다.