레거시 CMS가 PNG 업로드를 허용하지만 사이트에 아직 여러 크기로 구성된 favicon.ico를 사용하고 있다면, ICO to PNG converter로 아이콘을 처음부터 다시 만들지 않고도 래스터 파일을 확보할 수 있습니다.
Mzu favicondl의 ICO to PNG converter는 바로 이 작업을 지원합니다. ICO 파일을 PNG 출력으로 변환해 미디어 라이브러리, 디자인 검토 또는 PNG 기반 favicon 링크에 사용할 수 있게 합니다. 여러 해상도를 담은 Windows 아이콘 컨테이너 대신 특정 비트맵이 필요할 때 유용합니다.
ICO to PNG converter 사용 시작하기
기존 .ico 파일이 있고 특정 용도로 PNG 복사본이 필요하다면 다음 과정을 활용하세요.
- Mzu favicondl을 열고 ICO to PNG converter를 선택합니다.
- 변환할
.ico파일을 업로드합니다. - 사용 목적에 맞는 출력 크기 또는 내장 이미지를 선택합니다. ICO 레이어가 여러 개 표시되면 가장 작은 레이어를 확대하는 대신 네이티브 레이어를 선택하세요.
- 변환을 실행한 뒤 생성된 PNG를 다운로드하고, 프로젝트 파일에는 원본 ICO를 보관합니다.
출력 결과에서 확인할 핵심 항목
네이티브 해상도 선택
ICO에는 여러 크기의 이미지가 들어갈 수 있으며, 각 레이어는 자체적인 픽셀 크기를 가집니다. 가장 가까운 네이티브 해상도로 내보내세요. 32×32 레이어는 16×16 이미지를 확대한 것보다 바람직합니다. 확대해 봐야 애초에 없던 디테일을 복원할 수는 없기 때문입니다.
투명도 확인
PNG를 대비되는 색상이나 체커보드 배경에서 열어 보세요. 투명한 가장자리가 그대로 투명하게 유지되고 아이콘 마크 주변에 원치 않는 흰색 상자가 나타나지 않는지 확인합니다.
올바른 컨테이너 유지
PNG 출력은 여러 크기의 ICO 컨테이너가 아니라 단일 래스터 이미지입니다. 배포의 다른 부분이 여전히 ICO 형식을 요구한다면 원본 ICO를 보관하고, 직접 이미지 파일을 사용하는 편이 편리한 곳에는 PNG를 사용하세요.
사이트에 PNG 추가하기
다운로드한 파일을 document head에서 참조합니다. 실용적인 구성은 두 형식을 모두 사용할 수 있도록 유지하는 것입니다.
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>
<link rel='icon' href='/favicon.ico'>HTML 표준은 외부 아이콘 링크를 rel='icon'으로 정의하며, type과 sizes 메타데이터를 선택적으로 사용할 수 있습니다. 정확한 속성은 HTML link relation specification에서 확인할 수 있습니다.
게시하기 전 팁
- 운영 환경의 에셋을 교체하기 전에 PNG의 실제 dimensions와 file size를 확인하십시오.
- 파일에 더 큰 native image가 이미 들어 있다면 작은 ICO 레이어를 upscale하지 마십시오.
- 브라우저가 계속 캐시된 사본을 제공한다�� PNG에 버전을 지정하거나 파일명을 변경하십시오. favicon cache-busting 가이드에서 이 절차를 다룹니다.
- format 선택 범위를 더 넓게 판단하려면 production stack을 표준화하기 전에 ICO vs PNG favicons를 읽어 보십시오.
결론
ICO to PNG converter를 사용하면 legacy Windows 아이콘 파일과 PNG 중심 워크플로를 연결할 수 있습니다. native resolution으로 추출하고 transparency를 확인한 뒤 markup에 PNG를 추가하십시오. legacy support가 여전히 필요하다면 ICO를 보관하십시오.
Mzu favicondl로 ICO를 변환해 보십시오. 그런 다음 게시하기 전에 dimensions와 markup을 확인하십시오.