PNG를 ICO(파비콘)로 변환

파비콘이 해야 할 일

파비콘은 아주 작은 크기, 흔히 16픽셀 정사각형으로 표시돼요. 그 크기에서는 세밀한 디테일이 사라지고 가는 선은 아예 보이지 않아요. 좋은 파비콘은 대비가 강하고 굵고 단순한 모양이에요. 글자 하나, 로고 심볼을 단순화한 형태, 또는 브랜드 색상의 꽉 찬 도형 같은 것이죠. 전체 로고에 워드마크가 있다면 심볼만 쓰거나 첫 글자만 사용하세요.

.ico 파일에 여러 크기가 담기는 이유는, 이미지 한 장을 표시할 때 확대하거나 축소하면 흐릿해 보이기 때문이에요. 16, 32, 48, 64픽셀 버전을 제공하면 운영체제나 브라우저가 상황마다 픽셀이 정확히 맞는 이미지를 보여 줄 수 있어요. 탭에는 16 px, 고해상도 화면의 북마크 목록에는 32 px, Windows 작업 표시줄 바로 가기에는 48 px 하는 식이에요.

원본 PNG 준비하기

• 정사각형으로 만드세요. 로고가 가로로 길다면 먼저 정사각형 투명 캔버스에 올리거나, 자르기 도구로 심볼만 남기세요.
• 256픽셀 이상에서 시작하세요. 크고 깔끔한 원본을 축소하는 편이 작은 이미지를 확대하는 것보다 결과가 매끄러워요.
• 모양이 꽉 차 있다면 투명 배경을 유지하세요. 그래야 브라우저의 밝은 테마와 어두운 테마 모두에서 잘 어울려요. 모양이 가늘거나 색이 밝다면 단색 사각형 위에 올리세요.
• 한두 글자보다 긴 텍스트는 피하세요. 16픽셀에서는 읽을 수 없어요.

파비콘 설치하기

다운로드한 파일을 favicon.ico로 저장해서 사이트의 루트 폴더에 넣으세요. 그런 다음 모든 페이지의 <head> 안에 다음 코드를 추가하세요.

<link rel="icon" href="/favicon.ico" sizes="any">

대부분의 플랫폼에는 전용 설정이 따로 있어요. WordPress는 Appearance 아래의 Site Icon, Shopify와 Squarespace는 테마 설정의 Favicon 항목, Webflow는 Project Settings에 있어요. 그곳에 .ico를 업로드하세요. 전체 과정은 파비콘 만드는 방법에서 자세히 확인하세요.

한 걸음 더

최신 기기가 요구하는 아이콘을 모두 갖추려면 iOS 홈 화면 바로 가기용 180픽셀 PNG(apple-touch-icon)와 Android 및 웹 앱 매니페스트용 192, 512픽셀 PNG도 필요해요. 이것들은 일반 PNG 파일이므로 크기 조정 도구로 같은 마스터에서 만들면 돼요. 이 페이지에서 만든 .ico는 브라우저 탭, 북마크, Windows를 담당하는데, 파비콘이 없다는 걸 사람들이 가장 많이 알아차리는 곳이 바로 여기예요.