파비콘 생성기

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

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

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

사용 방법

기본 중앙 자르기는 긴 이미지의 양옆 또는 위아래를 버립니다. 가장자리를 남기려면 ‘로고 전체 담기’를 고르세요. 비율을 유지하므로 가로 로고는 위아래, 세로 로고는 양옆에 여백이 생깁니다. 아주 긴 로고나 가는 선은 16px에서 거의 보이지 않을 수 있습니다. 작은 원본을 확대해도 세부가 복원되지는 않습니다. 애니메이션·원본 메타데이터는 보존하지 않습니다.

• ① 정사각형에 가깝고 가장자리 여백이 적은 로고·심볼 이미지를 올립니다.
• ② 중앙 자르기 또는 로고 전체 담기를 고르고, 투명 유지·흰 배경 중 하나를 선택합니다.
• ③ 미리보기를 확인한 뒤 "파비콘 만들기"를 누르면 저장용 PNG와 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)을 하거나, 브라우저 설정에서 캐시·사이트 데이터를 지운 뒤 다시 열어 보세요. 환경에 따라 새 아이콘 반영까지 시간이 걸릴 수 있습니다.