사용 방법

아이콘 재료를 고릅니다. 로고 이미지를 올리거나, 글자·이모지(예: T, 툴, 🔥)를 입력해 색 배경 위에 아이콘을 만듭니다.
모양(정사각형·둥근 모서리·원), 색, 여백을 조절하면 16px부터 512px까지 미리보기가 바로 바뀝니다. 브라우저 탭 모양으로도 확인할 수 있습니다.
사이트 이름과 테마 색을 넣고 전체 ZIP 받기를 누릅니다. 아래의 <head> 코드를 복사해 사이트에 붙여넣으면 끝입니다.

이미지는 브라우저 안에서만 처리되고 서버로 전송되지 않습니다.

만들어지는 파일

파일	크기	쓰이는 곳
`favicon.ico`	16·32·48px 묶음	브라우저 탭·즐겨찾기. 링크 태그가 없어도 브라우저가 사이트 최상위에서 찾아 씀
`favicon-16x16.png`, `favicon-32x32.png`	16, 32px	PNG 아이콘을 지원하는 브라우저 탭
`apple-touch-icon.png`	180px	iPhone·iPad에서 “홈 화면에 추가” 했을 때
`android-chrome-192x192.png`, `-512x512.png`	192, 512px	Android 홈 화면, 설치형 웹앱(PWA) 아이콘·시작 화면
`site.webmanifest`	—	앱 이름·아이콘·색을 알려 주는 웹 앱 매니페스트

favicon.ico는 여러 크기의 PNG를 한 파일에 담은 형식으로, 브라우저가 화면 배율에 맞는 크기를 골라 씁니다. 이 도구는 ICO 헤더를 직접 만들어 각 크기를 PNG 그대로 넣습니다(Windows Vista 이후와 모든 주요 브라우저가 지원하는 방식).

ZIP을 풀어 파일을 사이트의 최상위 폴더(예: https://example.com/favicon.ico로 열리는 곳)에 올립니다. 다른 폴더에 둔다면 아이콘을 둘 경로에 그 경로를 적으세요.
생성된 코드를 모든 페이지의 <head> 안에 붙여넣습니다.
브라우저는 파비콘을 오래 캐시하므로 바뀐 아이콘이 바로 안 보이면 강력 새로고침하거나 시크릿 창으로 확인하세요.

16px에서도 알아볼 수 있어야 합니다. 글자가 많은 로고는 뭉개지니 심볼이나 첫 글자만 쓰는 편이 좋습니다. 미리보기의 16×16 칸을 꼭 확인하세요.
투명 배경은 어두운 탭에서 안 보일 수 있습니다. 어두운 탭 미리보기로 대비를 확인하세요.
iOS는 홈 화면 아이콘에 직접 둥근 모서리를 씌우고 투명한 부분을 검게 표시할 수 있어서, apple-touch-icon은 기본으로 배경을 채운 정사각형으로 만듭니다.
Google 검색 결과에 표시되는 파비콘은 48px의 배수 크기를 권장합니다. 이 도구의 48px(ICO 안)과 192px PNG가 이 조건에 맞습니다.

네. SVG를 올리면 각 크기로 렌더링합니다. SVG를 그대로 PNG로 바꾸고 싶다면 SVG PNG 변환을 쓰세요.

작은 PNG는 이미지 Base64 변환으로 data URI를 만들어 <link rel="icon" href="data:…">에 넣을 수 있습니다. 다만 페이지마다 다시 내려받으므로 파일로 두는 편이 일반적입니다.

Android의 Chrome 등 일부 모바일 브라우저가 주소창·상단 바를 그 색으로 칠합니다. 매니페스트의 background_color는 설치형 웹앱이 열릴 때 잠깐 보이는 시작 화면의 배경색입니다.