PNG 로고로 favicon.ico 만드는 법
파비콘은 브라우저 탭, 즐겨찾기, 검색 결과에서 사이트 이름 옆에 보이는 작은 아이콘입니다. 파비콘이 없으면 브라우저가 빈 문서 모양의 기본 아이콘을 띄워서 사이트가 덜 완성된 느낌을 줍니다.
이 글에서는 PNG나 JPG 로고를 제대로 된 favicon.ico로 바꾸고 웹사이트에 적용하는 방법을 알려드립니다.
파비콘은 어떤 크기가 필요할까?
브라우저는 상황에 따라 다른 크기로 파비콘을 보여줍니다. 탭에서는 16×16픽셀, 고해상도 화면과 일부 즐겨찾기에서는 32×32, 윈도우에서는 48×48, 바로가기에서는 더 큰 크기를 씁니다.
ICO 파일 하나에 여러 크기를 함께 담을 수 있고, 브라우저가 알맞은 크기를 골라 씁니다. PixShift는 16, 32, 48, 256픽셀 버전을 자동으로 한 파일에 담아 줍니다.
이미지 준비하기
- 정사각형 이미지를 쓰세요. 정사각형이 아니면 가운데 정렬되고 남는 부분은 투명하게 채워집니다.
- 큰 크기도 선명하도록 최소 256×256픽셀 이상에서 시작하세요.
- 단순할수록 좋습니다. 작은 글자나 얇은 선은 16픽셀에서 사라지므로 글자 하나나 심볼 하나가 가장 잘 보입니다.
- 밝은 탭과 어두운 탭 모두에 자연스럽게 어울리려면 투명 배경 PNG를 쓰세요.
PNG를 ICO로 변환하기
- PixShift의 PNG → ICO 변환기를 엽니다.
- 로고를 상자에 끌어다 놓습니다. ICO 파일이 브라우저에서 바로 만들어집니다.
- 파일을 다운로드하고 이름을 favicon.ico로 바꿉니다.
웹사이트에 파비콘 적용하기
- favicon.ico를 웹사이트 최상위 폴더에 올려서 https://내사이트.com/favicon.ico 주소로 열리게 합니다.
- 각 페이지의 <head> 안에 아래에 있는 코드 한 줄을 추가합니다.
- 사이트를 새로고침합니다. 예전 아이콘이 계속 보이면 브라우저 캐시를 지우거나 시크릿 창으로 열어 보세요. 브라우저가 파비콘을 오래 기억합니다.
<link rel="icon" href="/favicon.ico" sizes="any">요즘 브라우저에도 ICO가 필요할까?
최신 브라우저는 PNG와 SVG 파비콘도 지원합니다. 그래도 최상위 폴더의 favicon.ico는 여전히 가장 호환성이 좋습니다. 일부 도구, 피드 리더, 오래된 브라우저는 정확히 그 파일을 찾기 때문입니다. 그래서 많은 사이트가 ICO와 SVG(또는 PNG)를 함께 제공합니다.