선명한 파비콘을 위한 PNG에서 ICO로 변환
파비콘은 웹사이트에 시각적 정체성을 부여하는 작은 이미지입니다. 페이지 제목 옆 브라우저 탭, 북마크 목록, 주소 표시줄 드롭다운 방문 기록, 때로는 검색 결과 옆에서도 볼 수 있습니다. 작지만 많은 역할을 합니다. 인식 가능한 파비콘은 수십 개의 탭 중에서 내 탭을 찾는 데 도움을 주고, 사이트가 완성도 있고 잘 관리되고 있음을 나타냅니다. 이 작은 아이콘의 전통적인 형식이 ICO이며, 가장 쉬운 제작 방법은 깔끔한 정사각형 PNG에서 시작하여 변환하는 것입니다.
이 도구는 PNG 이미지를 받아 브라우저 안에서 ICO 파비콘으로 변환합니다. 변환은 내 기기에서 로컬로 실행되므로 선택한 사진이 서버에 업로드되지 않습니다. 아이콘이 로고나 브랜드 자산일 경우 제3자에게 넘기고 싶지 않을 때 중요한 사항입니다. 파일이 준비되면 다운로드하기만 하면 됩니다.
ICO 형식이란 무엇이며 여러 크기를 담는 이유
ICO는 Microsoft Windows에서 프로그램, 바로 가기, 폴더에 사용되는 아이콘을 저장하기 위해 탄생한 아이콘 컨테이너 형식입니다. 그 정의적 특징, 그리고 웹 파비콘의 표준이 된 이유는 단일 ICO 파일이 동일한 이미지를 여러 해상도로 한 번에 담을 수 있다는 것입니다. 하나의 고정된 비트맵 대신, 파일에 작은 정사각형 이미지 세트가 들어 있으며 브라우저나 운영 체제가 아이콘을 그려야 하는 위치에 맞는 크기를 선택합니다.
이것은 실제로 유용합니다. 브라우저 탭에는 작은 아이콘이 필요하고, 북마크 표시줄에는 약간 더 큰 것이 필요하며, 데스크톱의 고정된 바로 가기는 더 큰 것을 요청할 수 있습니다. 다중 크기 ICO를 사용하면 각 맥락이 적합한 버전을 가져가므로, 단일 작은 비트맵에서 확대되어 흐릿해지는 것이 아니라 아이콘이 선명하게 유지됩니다. ICO는 또한 투명도를 보존하므로, 둥글거나 불규칙한 로고의 모서리가 어떤 탭 색상에서도 깔끔하게 유지됩니다.
권장 파비콘 크기
웹사이트 파비콘의 경우 포함할 가치가 있는 세 가지 크기는 16x16, 32x32, 48x48픽셀입니다. 16픽셀 버전은 대부분의 브라우저가 탭과 주소 표시줄에 표시하는 것입니다. 32픽셀 버전은 고해상도 디스플레이와 일부 북마크 및 방문 기록 보기에서 사용되므로 현대 화면에서 선명하게 유지됩니다. 48픽셀 버전은 Windows 사이트 바로 가기와 같은 더 큰 맥락을 위한 것입니다. 모두 하나의 ICO 파일 안에 있으므로, 단일 자산을 제공하고 각 표면이 필요한 것을 선택하도록 합니다.
아무것도 늘어나지 않도록 정사각형 PNG에서 시작하세요. 소스 이미지가 직사각형이거나 너무 크다면, 먼저 이미지 리사이저로 깔끔한 정사각형으로 자르거나 크기를 조정한 다음 변환을 실행하세요. 간단하고 고대비 디자인이 세밀한 일러스트레이션보다 16픽셀에서 훨씬 잘 읽히므로, 미세한 텍스트보다 굵은 도형을 선호하세요.
웹사이트에 파비콘 추가하는 방법
ICO 파일이 준비되면 웹사이트에 업로드하세요. 전통적으로 사이트 루트에 favicon.ico로 저장합니다. 많은 브라우저가 자동으로 찾아내지만, 추측이 없도록 HTML의 head에 명시적으로 선언하는 것이 모범 사례입니다. 다음과 같은 link 태그를 추가하세요:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
해당 줄을 페이지의 <head> 섹션 안에 배치하세요. rel="icon" 속성은 브라우저에 이 리소스가 페이지 아이콘임을 알리고, href는 파일을 저장한 위치를 가리킵니다. 위의 것과 같은 루트 상대 경로를 사용하면 사이트의 모든 페이지에서 동일한 선언이 작동합니다. 배포 후 브라우저가 파비콘을 적극적으로 캐시하므로 새 아이콘이 나타나기 전에 강제 새로 고침을 하거나 캐시를 지워야 할 수 있습니다.
브라우저에서의 개인 변환
모든 것이 내 기기에서 이루어집니다. 선택한 PNG는 로컬에서 읽히고, 디코딩되고, ICO로 재인코딩되며, 과정 중 내 기기를 벗어나는 것이 없습니다. 계정도, 대기열도, 서버 측 저장소도 없으므로 출시 전 로고나 계약 하의 클라이언트 작업에도 편리합니다. 그래픽을 준비하고 정리하는 더 많은 방법은 이미지 도구 전체 세트를 살펴보세요.
자주 묻는 질문
이미지가 어딘가에 업로드되나요?
아니요. PNG는 내 기기의 브라우저 안에서 완전히 ICO로 변환됩니다. 서버로 전송되거나 저장되는 것이 없으므로 이미지는 비공개 상태를 유지합니다.
파비콘에 어떤 크기가 포함되어야 하나요?
가장 유용한 크기는 16x16, 32x32, 48x48픽셀입니다. 16픽셀 이미지는 브라우저 탭에 표시되고, 더 큰 것은 고해상도 디스플레이와 데스크톱 바로 가기에서 아이콘을 선명하게 유지합니다.
PNG 대신 ICO를 사용하는 이유는 무엇인가요?
ICO는 오랜 파비콘 형식이며 하나의 파일 안에 여러 크기를 저장할 수 있습니다. 브라우저와 운영 체제가 각 맥락에 맞는 해상도를 선택하므로, 단일 비트맵에서 확대되는 것이 아니라 아이콘이 선명하게 유지됩니다.
ICO가 PNG의 투명도를 유지하나요?
예. ICO 형식은 투명도를 지원하므로 PNG의 투명한 영역이 보존되어 아이콘이 어떤 탭이나 배경 색상에서도 깔끔하게 어우러집니다.
웹사이트에 파비콘을 어떻게 추가하나요?
ICO 파일을 사이트에 업로드하고, 보통 루트에 favicon.ico로 저장한 다음, HTML head에 link rel icon type image x-icon href slash favicon.ico와 같은 link 태그를 추가하세요. 그런 다음 브라우저 캐시를 지우면 됩니다.
소스 이미지가 정사각형이 아닌 경우 어떻게 해야 하나요?
늘어나지 않도록 먼저 정사각형으로 자르거나 크기를 조정하세요. 이미지 리사이저를 사용하여 깔끔한 정사각형을 만든 다음 ICO로 변환하면 가장 보기 좋은 파비콘이 완성됩니다.