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

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

사용 방법

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

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

일반 HTML: ZIP 안의 파일을 사이트 최상위 폴더에 올리고, 받은 스니펫을 모든 페이지의 <head> 안에 붙여넣습니다.
티스토리: 스킨 편집 → HTML 편집에서 <head> 안에 스니펫을 붙여넣고, 파일은 "파일 업로드"로 올린 뒤 경로를 맞춥니다. 관리 → 블로그에서 대표 파비콘을 직접 지정할 수도 있습니다.
워드프레스: 외모 → 사용자 정의하기 → 사이트 기본 정보 → 사이트 아이콘에 512px PNG를 올리면 자동 적용됩니다. 테마 head.php에 직접 스니펫을 넣어도 됩니다.

크기 참고

파일	크기(px)	쓰임
favicon.ico	16·32·48 묶음	브라우저 탭·즐겨찾기 (구형 포함)
favicon-32.png	32 × 32	탭·고해상도 화면
apple-touch-icon.png	180 × 180	아이폰·아이패드 홈 화면
icon-192.png	192 × 192	안드로이드·PWA
icon-512.png	512 × 512	PWA 스플래시·고해상도

※ 적용 후에도 탭 아이콘이 그대로면 브라우저 캐시 때문입니다. 강력 새로고침(Ctrl+F5)하거나 잠시 뒤 다시 확인하세요.

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

아이콘은 쓰이는 곳에 따라 필요한 크기가 다릅니다. 아래 값은 오래 안정적으로 쓰여 온 표준 크기라 그대로 적용해도 됩니다. 브라우저 탭과 즐겨찾기에 쓰는 파비콘은 16×16, 32×32, 48×48 세 가지를 하나의 favicon.ico 파일에 함께 담아 두면, 화면 해상도와 환경에 맞는 크기가 자동으로 선택됩니다. 아이폰·아이패드 홈 화면에 추가할 때 쓰는 애플 터치 아이콘은 180×180을 권장하고, 안드로이드 홈 화면이나 PWA(앱처럼 설치되는 웹)는 192×192와 512×512 두 가지를 함께 두는 것이 일반적입니다. 192는 홈 화면 아이콘에, 512는 설치 화면이나 스플래시처럼 크게 보이는 자리에 쓰입니다.

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

ICO와 PNG는 무엇이 다른가

ICO는 윈도와 구형 브라우저가 오래전부터 써 온 아이콘 형식으로, 한 파일 안에 16·32·48 같은 여러 크기를 동시에 담을 수 있다는 점이 특징입니다. PNG는 한 파일에 한 크기만 담는 대신 투명 처리가 깔끔하고, 애플 터치 아이콘이나 PWA처럼 최신 환경이 선호하는 형식입니다. 그래서 favicon.ico 하나로 옛 환경을 받치고, 애플·안드로이드·PWA용은 PNG로 따로 두는 구성이 무난합니다. 이 도구는 두 형식을 모두 만들어 한 번에 내려받게 합니다.

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)을 하거나, 브라우저 설정에서 캐시·사이트 데이터를 지운 뒤 다시 열어 보세요. 환경에 따라 새 아이콘 반영까지 시간이 걸릴 수 있습니다.

파비콘 생성기

이미지 올리기

옵션·저장

파비콘, 이렇게 만드세요