웹 도구 모음 › 파비콘 생성기

파비콘 생성기

이미지·글자·이모지로
파비콘 만들기

이미지를 올리거나 글자·이모지를 고르면 브라우저 탭 미리보기로 바로 확인하고, favicon.ico와 크기별 PNG, HTML 코드까지 ZIP 하나로 내려받습니다.

이미지는 서버로 올라가지 않고 전부 이 브라우저 안에서 처리됩니다.

이미지를 끌어다 놓거나 클릭해서 선택

PNG · JPG · SVG · WebP / 정사각 512px 이상 권장 / Ctrl+V 붙여넣기 지원

맞춤
배경
모양
8%

브라우저 탭에서 보면

내 사이트
라이트 탭
내 사이트
다크 탭

실제 크기로 보면

16px
32px
48px
180px · 아이폰 홈 화면 아이콘 실제 크기

이미지를 올리면 여기에서 바로 확인할 수 있습니다.

ICO(16·32·48) + PNG 6종 + site.webmanifest + 설치 안내가 담깁니다.
파일 하나씩 받기
HTML에 넣을 코드 (<head> 안)

파비콘 생성기 사용법

  1. 입력 방식 선택: 로고가 있으면 이미지에 올리고, 없으면 텍스트(이니셜 1~3글자)나 이모지로 즉석에서 만듭니다. 이미지는 PNG·JPG·SVG·WebP를 지원하고, 스크린샷을 Ctrl+V로 붙여넣어도 됩니다.
  2. 배경·모양·여백 다듬기: 배경색이나 투명 배경, 사각·둥근 사각·원형 모양, 내용 여백을 조절합니다. 미리보기가 실시간으로 바뀝니다.
  3. 미리보기 확인: 라이트·다크 브라우저 탭 목업과 16·32·48px 실제 크기를 확인하세요. 16px에서도 알아볼 수 있어야 좋은 파비콘입니다.
  4. 내려받아 적용: ZIP으로 전부 받기를 눌러 파일을 받고, 사이트 루트에 올린 뒤 HTML 코드를 <head>에 붙여 넣으면 끝입니다. ZIP 안의 README.txt에도 같은 안내가 들어 있습니다.

어떤 파일이 만들어지나요?

크기별 용도가 궁금하면 파비콘 사이즈·포맷 총정리에 자세히 정리해 두었습니다.

플랫폼별로 파비콘 넣는 법

티스토리

블로그 관리 홈에서 블로그 설정으로 들어가면 아이콘·파비콘 업로드 항목이 있습니다. 파비콘에는 favicon.ico를, 아이콘에는 PNG (apple-touch-icon.png 권장)를 올리면 됩니다.

워드프레스

관리자에서 외모 → 사용자 정의하기 → 사이트 아이덴티티의 사이트 아이콘에 android-chrome-512x512.png를 올리세요. 크기별 파일은 워드프레스가 알아서 만들어 줍니다.

노션으로 만든 사이트

노션 기본 공유 링크는 파비콘을 바꿀 수 없습니다. 우피(oopy)나 수퍼(super) 같은 배포 서비스, 또는 노션 사이트 설정에 있는 파비콘 업로드 항목에 32px 또는 48px PNG를 올리면 됩니다.

직접 만든 사이트 (HTML)

내려받은 파일 전부를 사이트 최상위(루트) 폴더에 올리고, 위의 HTML에 넣을 코드를 <head> 안에 붙여 넣습니다.

카페24·아임웹 등 쇼핑몰·빌더

대부분 관리자 화면의 디자인 또는 기본 설정 메뉴에 파비콘 업로드 항목이 있습니다. favicon.ico를 올리면 되고, PNG만 받는 곳이면 favicon-32x32.png를 쓰세요.

자주 묻는 질문 (FAQ)

올린 이미지가 서버로 전송되나요?

아니요. 이미지 변환부터 ICO·ZIP 파일 생성까지 전부 여러분의 브라우저 안에서 처리됩니다. 이미지가 외부로 전송되거나 저장되지 않으니 회사 로고 같은 파일도 안심하고 쓸 수 있습니다.

favicon.ico 파일 하나면 충분한가요?

대부분의 브라우저는 사이트 루트의 favicon.ico 하나로도 잘 동작합니다. 다만 아이폰 홈 화면(apple-touch-icon)과 안드로이드·PWA(192·512px PNG)까지 챙기려면 PNG 세트를 함께 올리는 것이 안전합니다. ZIP에 전부 들어 있으니 그대로 올리면 됩니다.

원본 이미지는 어떤 크기가 좋나요?

512×512px 이상의 정사각 이미지를 권장합니다. SVG는 벡터라서 크기와 상관없이 가장 선명하게 나옵니다. 원본이 너무 작으면 큰 크기(512px) PNG가 흐려질 수 있습니다. 가로세로 비율이 다른 이미지는 꽉 채우기(가운데를 정사각으로 자름)와 전체 보이기(비율 유지) 중에서 고를 수 있습니다.

파비콘을 적용했는데 사이트에 안 보여요.

대부분 브라우저 캐시 때문입니다. 강력 새로고침(Ctrl+F5)을 해 보고, 그래도 안 보이면 파일 경로가 코드와 일치하는지(/favicon.ico가 실제로 열리는지) 확인하세요. 구글 검색결과에 뜨는 파비콘은 구글이 다시 수집할 때까지 며칠 걸릴 수 있습니다.

투명 배경으로 만들 때 주의할 점이 있나요?

다크 모드 탭에서는 어두운 아이콘이, 라이트 모드 탭에서는 밝은 아이콘이 묻힐 수 있습니다. 위의 라이트·다크 탭 미리보기로 양쪽을 꼭 확인하세요. 참고로 아이폰 홈 화면 아이콘은 투명 영역이 검은색으로 채워지므로, 배경색을 넣는 편이 안전합니다.

글자·이모지 파비콘은 어떤 글꼴로 그려지나요?

텍스트는 고딕·명조·모노와 손글씨(강원교육모두체) 중에서 고를 수 있습니다. 이모지는 지금 쓰는 기기의 이모지 글꼴로 그려지기 때문에, 만드는 기기(윈도우·맥·리눅스)에 따라 모양이 조금씩 다릅니다. 미리보기에 보이는 그대로 파일이 만들어집니다.

파비콘 가이드

함께 쓰면 좋은 도구