파비콘 만들기
글자나 이모지, 로고 이미지로 favicon.ico와 크기별 PNG, iPhone・Android용 아이콘을 한꺼번에 만듭니다.
1. 글자나 이미지 넣기
아이콘으로 쓸 글자(이모지도 가능)를 입력하거나 로고 같은 이미지를 고릅니다.
만드는 방법
3자까지 입력할 수 있습니다. 작게 표시되므로 1~2자를 추천합니다.
글꼴
2. 모양과 색 고르기
배경의 모양과 색, 내용의 크기를 고릅니다. 미리보기로 바로 확인할 수 있습니다.
모양
배경색
iPhone 홈 화면용(apple-touch-icon)만은 투명하게 하면 검게 보이므로 위에서 고른 배경색으로 칠합니다.
글자색
어두운 화면(다크 모드)의 색
favicon.svg의 색만 바뀝니다. 자동은 어두운 화면에서 잘 안 보이는 색일 때만 밝기를 반전합니다.
3. 보이는 모습 확인하고 저장
브라우저 탭과 홈 화면에서 어떻게 보이는지 확인하고 ZIP으로 한꺼번에 저장합니다.
글자를 입력하면 여기에 미리보기가 나옵니다
브라우저 탭(밝은 화면・어두운 화면)
홈 화면에 추가했을 때의 이름으로 site.webmanifest에 들어갑니다.
64・128・256px를 더합니다. Windows 바탕 화면의 바로 가기처럼 크게 표시될 때 쓰입니다. 파일이 커집니다.
사이트에 붙일 HTML
ZIP 안의 파일을 사이트의 가장 위(/)에 두고, 이 HTML을 <head> 안에 붙여 넣습니다.
HTML 보기
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">ZIP에 들어가는 파일
- favicon.ico (16 / 32 / 48)
- favicon.svg
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest
- favicon-html.txt
처리는 이 기기 안에서 이루어지며, 이미지는 업로드되지 않습니다.
도움이 되었다면 공유해 주세요
잘 작동하지 않거나 ‘이랬으면 좋겠다’ 싶은 점이 있다면
사용 방법
1. 글자 넣기
「글자」가 선택된 상태로 「아이콘 글자」 입력란을 탭해 1~3자를 입력합니다. 이모지도 쓸 수 있습니다. 글자 모양은 그 아래의 「글꼴」에서 고를 수 있습니다.
왼쪽 칸에서 「글자」가 선택된 상태로 「아이콘 글자」 입력란을 클릭해 1~3자를 입력합니다. 이모지도 쓸 수 있습니다. 오른쪽 칸의 미리보기가 바로 바뀝니다. 글자 모양은 그 아래의 「글꼴」에서 고를 수 있습니다.
2. 모양과 색 고르기
「전체 화면에서 모양과 색 고르기」를 탭하면 전체 화면 편집 화면이 열립니다. 아래 띠의 「모양」 탭에서 「원」을, 「색」 탭에서 배경색 동그라미를 탭합니다. 가운데 미리보기로 밝은 화면과 어두운 화면에서의 모습을 바로 확인할 수 있습니다.
「모양과 색 고르기」 칸의 「모양」에서 「원」을 클릭하고, 「배경색」에서 색 동그라미를 클릭합니다. 오른쪽 칸의 미리보기로 밝은 화면・어두운 화면과 브라우저 탭에서 어떻게 보이는지 바로 알 수 있습니다. 미리보기 위의 「전체 화면으로 편집」을 클릭하면 큰 미리보기를 보면서 고를 수 있습니다.
3. 이미지로 만들 때
로고 같은 이미지로 만들 때는 위의 「이미지」를 탭하고 「파일 선택」에서 이미지를 고릅니다. 전체 화면 편집 화면이 열리고, 이미지 전체가 아이콘에 들어갑니다. 가장자리까지 채우고 싶다면 아래 띠의 「맞추는 방법」에서 「잘라서 꽉 채우기」를 탭합니다.
로고 같은 이미지로 만들 때는 왼쪽 칸 위의 「이미지」를 클릭하고 이미지를 끌어다 놓습니다(「파일 선택」으로도 고를 수 있습니다). 이미지 전체가 아이콘에 들어갑니다. 가장자리까지 채우고 싶다면 「모양과 색 고르기」 칸의 「맞추는 방법」에서 「잘라서 꽉 채우기」를 클릭합니다.
4. 한꺼번에 저장하기
「보이는 모습 확인하고 저장」 칸의 「ZIP으로 한꺼번에 다운로드」를 탭하면 파일 전체를 하나의 ZIP으로 저장합니다. 사이트에 붙일 HTML은 그 아래의 「HTML 복사」로 복사할 수 있습니다.
오른쪽 칸의 「ZIP으로 한꺼번에 다운로드」를 클릭하면 favicon.ico, favicon.svg, 크기별 PNG, site.webmanifest를 하나의 ZIP으로 저장합니다. 사이트에 붙일 HTML은 그 아래의 「HTML 복사」로 복사할 수 있습니다.
이럴 때 추천해요
만든 사이트에 바로 아이콘을
블로그, 개인 사이트, 직접 만든 웹 앱의 탭에 나오는 아이콘을 글자 하나나 이모지로 몇 초 만에 만들 수 있습니다. 디자인 프로그램은 필요 없습니다.
개인 사이트를 만드는 분
필요한 크기를 한꺼번에
favicon.ico, 16/32px PNG, iPhone과 Android용 아이콘을 한 번에 만들어 ZIP으로 묶어 저장합니다. 크기마다 따로 내보내는 수고가 없습니다.
웹 제작자・개발자
가게나 회사 로고로
로고 이미지를 고르기만 하면 탭과 홈 화면에 맞는 크기로 만들어 줍니다. 투명한 배경도 그대로 살릴 수 있습니다.
가게・작은 회사 담당자
HTML 연습용 페이지에
붙일 HTML이 함께 나오므로 어떤 파일을 어디에 두면 되는지 알 수 있습니다. 수업이나 연습으로 만드는 페이지에도 쓸 수 있습니다.
프로그래밍을 배우는 분・선생님
쓰기 전에 알아 두세요
- 작은 글씨나 사진을 그대로 쓰면 16px에서는 뭉개져 알아볼 수 없습니다. 모양이 뚜렷한 마크나 1~2자를 추천합니다.
- Windows 타일용 이미지는 만들지 않습니다. 요즘 브라우저와 스마트폰은 이 도구로 만든 파일로 표시할 수 있습니다.
- 로고 주변의 여백을 먼저 잘라 내고 싶다면 「이미지 자르기」가 편리합니다.
파비콘에 필요한 파일과 크기
파비콘은 브라우저 탭, 북마크, 검색 결과, 스마트폰 홈 화면에 나오는 사이트 아이콘입니다. 나오는 곳마다 쓰이는 크기가 달라서, 보통 그림 하나로 여러 종류의 파일을 준비합니다. 이 도구는 요즘 브라우저와 스마트폰에 필요한 파일을 한꺼번에 만들고, 사이트에 붙일 HTML도 준비합니다.
favicon.ico는 파일 하나에 16・32・48px의 세 가지 크기가 들어 있는 형식으로, 오래된 브라우저나 Windows 바로 가기에서도 표시됩니다. iPhone 홈 화면용(apple-touch-icon)은 투명하게 할 수 없고 모서리는 iPhone이 알아서 둥글게 처리하므로, 이 도구에서는 사각형 그대로 배경을 칠해 만듭니다. favicon.svg는 어두운 화면(다크 모드)에 맞춰 색을 바꿀 수 있는 형식으로, Chrome・Firefox・Edge의 탭에서 쓰입니다.
자주 묻는 질문
파비콘을 만들고 사이트에 두는 방법에서 궁금해하기 쉬운 점을 모았습니다.
이미지가 어딘가로 전송되나요?
아니요. 이미지를 불러오는 것부터 아이콘을 그려 ZIP으로 묶는 것까지 모두 이 기기의 브라우저 안에서 처리합니다. 고른 이미지나 입력한 글자가 어딘가로 전송되는 일은 없습니다.
어떤 이미지가 잘 맞나요?
정사각형이고 모양이 뚜렷한 이미지입니다. 16px에서는 아주 작아지므로 작은 글씨나 사진은 뭉개집니다. 로고의 마크 부분만 쓰거나, 「글자」로 1~2자짜리 아이콘을 만드는 것을 추천합니다. 가로로 긴 이미지는 「맞추는 방법」에서 「전체 넣기」나 「잘라서 꽉 채우기」를 고를 수 있습니다.
이모지로 파비콘을 만들 수 있나요?
네. 「아이콘 글자」에 이모지를 넣으면 이모지 아이콘이 됩니다. 이모지 그림은 사용 중인 기기(iPhone・Android・Windows 등)의 것으로 나옵니다.
만든 파일은 어디에 두면 되나요?
ZIP을 풀어 안의 파일을 모두 사이트의 가장 위 위치(https://example.com/favicon.ico 로 열리는 곳)에 둡니다. 그다음 「사이트에 붙일 HTML」을 복사해 각 페이지의 <head> 안에 붙여 넣습니다.
favicon.ico만 있어도 되나요?
브라우저 탭에 표시하기만 한다면 favicon.ico 하나로도 나옵니다. 스마트폰 홈 화면에 추가했을 때의 아이콘까지 깔끔하게 보이게 하려면 ZIP 안의 파일을 모두 두고 HTML을 붙여 넣어 주세요.
배경을 투명하게 할 수 있나요?
네. 「배경을 투명하게」를 켜면 배경과 모양 바깥이 투명해집니다. 다만 iPhone 홈 화면용(apple-touch-icon.png)은 투명한 부분이 검게 보이므로 「배경색」에서 고른 색으로 칠해 만듭니다.
WordPress에서도 쓸 수 있나요?
네. WordPress에서는 「외모」→「사용자 정의하기」→「사이트 아이덴티티」의 「사이트 아이콘」에서 ZIP 안의 android-chrome-512x512.png를 고릅니다(512px 이상의 이미지가 필요하기 때문입니다).
파비콘을 바꿨는데 표시가 바뀌지 않아요
브라우저는 파비콘을 오래 기억해 두는 경우가 있습니다. 페이지를 새로 고쳐도 바뀌지 않으면 브라우저 캐시를 지우거나 잠시 기다린 뒤 확인해 주세요.
SVG 파비콘도 만들 수 있나요?
네. ZIP에 favicon.svg가 들어갑니다. 어두운 화면(다크 모드)에서는 「어두운 화면(다크 모드)의 색」에서 고른 색으로 바뀝니다(자동은 잘 안 보이는 색일 때만 밝기를 반전합니다). 글자는 고른 글꼴의 모양을 이미지로 넣고, 색만 SVG로 칠합니다.
무료로 쓸 수 있나요?
무료입니다. 가입도 필요 없고 광고도 없습니다. 만들 수 있는 개수에도 제한이 없습니다.
다른 도구
- QR 코드 생성
URL·글·Wi-Fi 정보로 QR 코드를 만들어요. 모양과 색, 가운데 아이콘, 사진이 들어간 디자인도 고를 수 있어요.
- 이미지를 WebP로 변환
PNG나 JPEG를 가볍고 화질 좋은 WebP 형식으로 변환합니다.
- 이미지를 PNG로 변환
JPEG나 WebP를 화질이 떨어지지 않는 PNG 형식으로 변환합니다.
- 이미지를 JPG로 변환
PNG나 WebP를 어디서나 열리는 JPG(JPEG) 형식으로 변환합니다.
- HEIC를 WebP로 변환
iPhone으로 찍은 HEIC 사진을 가볍고 다루기 쉬운 WebP로 변환합니다.
- HEIC를 PNG로 변환
iPhone으로 찍은 HEIC 사진을 화질 손실 없이 어디서나 열리는 PNG로 변환합니다.