분류: 이미지 도구
파비콘 생성기
이미지 하나로 아이콘 세트 전체 만들기
로고를 열면 16, 32, 48, 64, 128, 180, 192, 512픽셀 PNG 아이콘과 head에 붙여넣을 link 태그를 얻습니다. 모든 크기는 브라우저에서 그려지며 이미지는 업로드되지 않습니다.
압축할 이미지를 선택하세요.
<head>에 넣을 HTML
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">
위 URL이 동작하도록 파일은 사이트 루트에 저장하고 이름은 그대로 두세요. 파비콘 위치가 바뀌면 다시 크롤링해야 합니다.
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
파비콘은 더 이상 파일 하나가 아닙니다. 브라우저 탭은 16, 32, 48픽셀을 원하고, 고해상도 화면은 64와 128을 요구하며, iOS는 180픽셀 apple-touch-icon을 읽고, 안드로이드 웹 앱 매니페스트는 192와 512를 요구합니다. 이 도구는 원본 이미지 하나에서 크기마다 canvas를 써서 전부 만들어 냅니다. 그림은 늘리지 않고 정사각형 안에 맞추며, 안정적인 URL로 이들을 참조하는 마크업도 함께 돌려줍니다. 전부 PNG인데, 현재 쓰이는 모든 브라우저가 PNG 파비콘을 읽고 오래된 ICO 형식은 그 대가로 얻을 게 없기 때문입니다.
사용 방법
- 로고나 정사각형 이미지를 고릅니다. 512 x 512 이상이면 좋습니다.
- 필요하면 여백을 넣고, 아이콘이 불투명해야 하면 배경을 채웁니다.
- 각 크기를 내려받아 사이트 루트에 저장하고 HTML을 head에 붙여넣습니다.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 로고가 업로드되나요?
- 아닙니다. 각 아이콘은 이 페이지의 canvas에서 그려져 로컬 다운로드로 제공됩니다. 이미지는 기기를 벗어나지 않습니다.
- 원본 이미지는 어느 정도 크기여야 하나요?
- 최소 512 x 512의 정사각형에 마크 주위로 약간의 여백이 있으면 좋습니다. 더 작으면 큰 크기에서 확대해야 해서 흐릿해집니다.
- favicon.ico 파일이 여전히 필요한가요?
- 요즘 브라우저에는 필요 없습니다. 모두 link 태그로 선언한 PNG 아이콘을 읽습니다. 아주 오래된 소프트웨어가 /favicon.ico를 찾기도 하므로 이미 있다면 그대로 두어도 무방합니다.