사이트를 위한 완전한 파비콘 세트 만들기
이 도구가 만들어 주는 것
파비콘은 파일 하나로 끝나는 경우가 드뭅니다. 브라우저, 스마트폰, 설치된 웹 앱이 저마다 다른 해상도를 요구하기 때문에, 사이트에는 이미지 한 장이 아니라 여러 크기로 이루어진 작은 아이콘 묶음이 필요합니다. 이 도구는 업로드한 이미지, 1~2글자의 텍스트, 또는 이모지라는 하나의 원본에서 시작해, 최신 사이트가 요구하는 모든 크기로 HTML 캔버스 위에 그려 냅니다.
완성된 아이콘은 PNG 파일로 돌아오며, site.webmanifest와 이들을 페이지에 연결해 주는 HTML 스니펫이 함께 제공됩니다. 어떤 태그가 어떤 파일을 가리키는지 헷갈릴 일이 없습니다.
세 가지 시작점
PNG, JPG, SVG, WebP 이미지를 업로드하면 도구가 각 아이콘 크기로 축소해 줍니다. 텍스트 마크라면 1~2글자를 입력하고 글꼴과 글자색을 고르면 되는데, 로고가 아직 준비되지 않았을 때 유용합니다. 이모지 방식에서는 선별된 목록에서 고르거나, 시스템이 표시할 수 있는 아무 이모지나 붙여 넣을 수 있습니다.
어떤 원본을 고르든 같은 스타일 설정이 적용됩니다. 배경색, border-radius 슬라이더를 통한 모서리 둥글리기, 그리고 아이콘을 꽉 찬 타일 위에 얹고 싶지 않을 때 쓰는 투명 배경 전환입니다.
구체적인 예시
예를 들어 글자 A를 입력하고 배경을 파란색으로 지정한 뒤 border-radius를 높여 모서리를 부드럽게 만든다고 해 봅시다. 미리보기는 모든 크기가 한 번에 갱신되고, 다운로드하면 브라우저 탭과 Windows 타일용 favicon-16x16.png·favicon-32x32.png·favicon-48x48.png, iOS 홈 화면용 180×180 apple-touch-icon.png, Android와 PWA 설치용 android-chrome-192x192.png와 android-chrome-512x512.png가 모두 하나의 ZIP에 담겨 나옵니다.
크기, 형식, 그리고 link 태그
각 크기에는 역할이 있습니다. 16×16과 32×32는 브라우저 탭에, 48×48은 Windows에, 180×180은 Apple의 터치 아이콘에, 192×192와 512×512는 Android와 웹 앱 매니페스트에 쓰입니다. 생성된 스니펫은 이들을 <link rel="icon">, <link rel="apple-touch-icon">, <link rel="manifest"> 태그와 theme-color 메타로 선언하므로, 그대로 <head>에 붙여 넣을 수 있습니다.
출력은 여러 해상도를 담는 옛 방식의 .ico가 아니라 PNG이며, 요즘 브라우저는 모두 이 link 태그를 통해 PNG 파비콘을 받아들입니다. 둥근 아이콘을 탭 줄에 자연스럽게 녹이고 싶다면 투명 배경을 켜서, 색이 채워진 사각형 대신 모서리가 투명하게 유지되도록 하세요.