파비콘은 주소 표시줄의 지구 아이콘을 대체합니다.
이미지 크레디트: r0mu/iStock/게티 이미지
파비콘은 웹사이트의 존재감에 미묘한 시각적 감각을 더할 수 있는 창의적이고 실용적인 방법입니다. 파비콘은 웹 브라우저가 페이지 탭과 주소 표시줄에서 사용하는 작은 이미지입니다. 제목 또는 URL 옆에 시각적 브랜드 식별자 역할을 하는 웹사이트와 관련된 로고 또는 이미지를 표시합니다. 파비콘은 탭 브라우징에서 특히 유용한 사이트 식별자입니다. 사용자가 더 많은 탭을 열면 페이지 제목에 사용되는 텍스트 공간이 거의 없을 정도로 줄어들기 때문입니다.
1 단계
사진이나 그래픽 편집 프로그램에서 사용할 아이콘을 디자인합니다. 사이트 또는 브랜드와 관련된 기존 로고 또는 이미지를 가져와 파비콘 표준에 맞게 조정할 수 있습니다. 파비콘은 항상 정사각형 치수를 사용하며 지원되는 최대 크기는 256x256픽셀입니다. 아이콘 패커를 사용하여 여러 크기를 지원하려는 경우 256x256픽셀 정사각형에 맞게 이미지를 자르고 크기를 조정합니다. 한 가지 버전만 사용하려는 경우 16x16픽셀 크기를 사용하세요.
오늘의 비디오
2 단계
그래픽 디자인 프로그램에서 아이콘 그래픽을 PNG 이미지 파일로 내보냅니다. PNG는 파비콘용 W3C 표준 이미지 형식입니다. 일부 브라우저는 JPG 파일을 파비콘으로 표시할 수 있지만 표준은 공식적으로 지원되지 않습니다. 또한 아이콘 패커 프로그램은 다른 형식의 이미지에서 작동하지 않을 수 있습니다. Favicon은 GIF 및 ICO 파일도 지원합니다.
3단계
내보낸 PNG 파일을 ICO 변환기 프로그램을 사용하여 ICO 파일로 압축합니다. 아이콘 변환기 프로그램은 PNG 파비콘을 처리하고 널리 지원되는 여러 파비콘 크기로 형식을 지정하고 단일 파일에 포함합니다. ICO 파일은 지원하는 장치에 대해 16x16 픽셀보다 더 높은 해상도의 파비콘을 제공합니다.
4단계
웹사이트 호스팅 서비스에 로그인하고 PNG 또는 ICO 파일을 웹사이트의 미디어 서버에 업로드합니다. 업로드된 파일의 URL을 복사합니다. 파비콘을 사이트에 연결하려면 이 파일이 필요합니다.
5단계
사이트 편집 프로그램을 열고 표시된 대로 favicon 파일의 URL로 수정한 다음 코드를 웹사이트 섹션에 추가합니다.
PNG 파일의 경우:
ICO 파일의 경우:
CMS 제어 사이트를 사용하거나 파일 기반 섹션을 포함하지 않는 한 아이콘을 표시하려는 각 페이지에 코드를 추가해야 합니다. 사이트 페이지를 저장하고 업데이트하면 파비콘이 나타납니다.
팁
Photoshop 및 Corel Draw와 같은 사진 편집 프로그램은 아이콘을 디자인하고 서식을 지정하는 데 적합합니다. 또는 Paint.net 및 Pixlr과 같은 무료 프로그램을 사용할 수 있습니다.
경고
일부 브라우저는 /favicon 디렉토리에 있는 이미지 파일을 자동으로 favicon으로 연결합니다. 그러나 W3C 조직은 보편적으로 지원되는 표준이 아니며 웹 아키텍처 원칙에 위배되기 때문에 이 방식을 권장하지 않습니다. 또한 많은 웹 호스팅 서비스와 CMS 시스템은 사용자가 미디어 콘텐츠를 미디어 파일 디렉터리 외부에 배치하는 것을 허용하지 않으므로 이러한 관행이 불가능합니다.
