파비콘 (Favicon)
엔지니어 · 2021년 9월 17일 업데이트
파비콘은 사용자가 웹사이트를 인식하는 데 도움이 되는 작은 아이콘입니다. 일반적으로 브라우저 탭의 페이지 제목 옆에 표시되는 로고 또는 비유적 표시의 단순화된 이미지를 말합니다. 동시에 많은 탭을 사용하거나 브라우저에 탭을 첨부하는 사용자의 경우 작은 사각형 아이콘이 현재 열려 있는 웹사이트 사이에서 사이트를 쉽게 찾아낼 수 있도록 해주는 기능을 합니다.
PC 버전 파비콘
약 20년 전, 파비콘의 개발 역사는 16x16 픽셀이 사이트의 파비콘을 표시할 수 있었던 IE 5의 출시와 함께 시작되었습니다. 현재에 와서는 해상도가 3232 및 4848 픽셀로 증가했지만 .ico 형식의 16픽셀 이미지는 오늘날 여전히 파비콘의 일반적인 웹 표준으로 인식됩니다.
브라우저와 디바이스가 증가함에 따라 파비콘에 대한 요구가 더욱 높아졌습니다. .ico 형식 뿐만 아니라 .png, .gif, .jpg, svg 등의 다양한 이미지 확장자를 사용할 수 있도록 보완되었으며 모든 주요 브라우저에서 .png와 .gif를 지원하고 있습니다.
브라우저가 자동으로 파비콘을 검색하기 때문에 가능한 경우 파비콘은 사이트의 루트 디렉토리(/)에 저장하는 것이 좋습니다. 브라우저가 예상한 경로에서 파비콘 파일을 찾지 못하면 웹 서버의 응답 코드가 404가 되어 사이트 로딩 시간이 느려질 뿐만 아니라 사용성에도 부정적인 영향을 미칠 수 있습니다. 브라우저에서 파비콘을 찾을 수 있도록 하려면 아래 예시와 같이 메타 태그를 사용하여 HTML 헤드에 해당 경로를 지정해야 합니다.
<link rel="icon" type="image/png" size="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" size="32x32" href="/favicon-32x32.png">
우리 사이트 https://jettanalysis.com에서 파비콘 메타 태그는 다음과 같습니다.
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
더 최근에는 .svg 형식이 추가되었는데, 이제 거의 모든 최신 브라우저에서 .svg 그래픽을 파비콘으로 표시할 수 있지만, 오래된 버전의 브라우저에서는 .svg 형식의 파비콘을 인식하지 못하는 경우가 있습니다.
모바일 장치의 파비콘
스마트폰 운영 체제 iOS가 출시되면서 Apple은 웹 앱에 점점 더 의존하게 되었습니다. 따라서 파비콘은 고해상도에서도 기술적인 필수 요소가 되었습니다. Apple 외에도 Android를 사용하는 Google도 파비콘에 점점 더 의존하고 있습니다. 예를 들어 웹 페이지를 앱의 형태로 홈 화면에 표시 할 수 있는데, 이 때 파비콘이 앱 아이콘으로 사용됩니다.
데스크탑 브라우저용 파비콘 지정은 루트 디렉토리에만 저장하면 되지만 모바일 장치 및 태블릿용 파비콘 설치는 훨씬 더 복잡합니다. 파비콘에 대한 각 플랫폼의 요구 사항은 매우 다릅니다.
iOS가 소위 터치 아이콘을 찾으려면 HTML 코드의 헤드 영역에 메타 태그를 통해 저장 위치를 지정해야 합니다. 과거에는 다양한 크기가 사용했지만, 최근 Apple의 터치 아이콘은 180픽셀 .png 파일만 선언해도 충분합니다.
<link rel="apple-touch-icon" 크기="180x180" href="/apple-touch-icon.png">
Android에서의 파비콘 지정은 다소 복잡합니다. Android의 파비콘 지정은 manifest 파일을 사용해야 합니다. manifest 메타 태그는 .json 파일의 위치를 지정하는 데 사용됩니다. 이 .json 파일에는 .png 형식의 아이콘에 대한 정보가 있고 이를 통해 Android에서 파비콘에 대한 지정을 확인 할 수 있습니다.
manifest.json은 사이트의 앱 이름 및 색 구성표에 대한 데이터 소스이기도 합니다. 이 표준 형식은 Android 및 Opera Mini용 Chrome에서만 지원됩니다. .json 파일의 구조에 대한 자세한 설명은 Web app manifests | MDN에서 찾을 수 있습니다.
<link rel="manifest" href="/manifest.json">
Windows 시작 메뉴의 아이콘
안타깝게도 Windows는 시작 메뉴에 사이트에 대한 아이콘을 지정할 때 .json 형식 매니페스트를 사용하지 않습니다. Microsoft는 manifest.json과 유사한 정보를 포함하지만 형식이 다른 독점 .xml 파일이 필요합니다. 이 .xml 파일의 위치는 헤더에 메타 태그로 지정할 필요가 없습니다. Windows는 항상 사이트의 루트 디렉터리(/)에 있는 파일을 탐색하기 때문입니다.
웹 서비스
모바일 분야에서는 표준이 설정되지 않았기 때문에 파비콘의 올바른 통합은 웹 개발자에게 어려운 과제가 되었습니다. 다행스럽게도 개발자 및 그래픽 디자이너는 포토샵이나 다른 소프트웨어에서 개별 파일을 직접 만들 필요가 없습니다. 다양한 온라인 이미지 변환 사이트가 있기 때문입니다.
파비콘 SEO 진단하기
검색엔진 최적화를 위한 파비콘을 진단해보세요.
결론
파비콘은 최근 몇 년 동안 많이 발전했으며 이제는 브라우저 탭의 아이콘 그 이상입니다. 특히 사용성과 관련하여 파비콘은 인지도와 브랜딩에 없어서는 안될 도구가 되었습니다. 매력적인 아이콘을 만들기 위해 더 이상 이미지 처리 소프트웨어와 텍스트 편집기에 의존할 필요가 없습니다. 인터넷의 파비콘 생성기 덕분에 필요한 모든 파일을 빠르고 쉽게 만들 수 있습니다.