깃블로그(17) 파비콘(favicon) 등록

파비콘(favicon) 개요

파비콘이란 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지입. 즐겨찾기 아이콘(favorite icon)의 줄임말로 주로 웹 브라우저 상단에 있는 탭에 표시된다. 그 외에도 브라우저의 북마크바나 방문 기록, 검색 결과에서 페이지 url과 함께 표시되기도 한다. 심지어 Google Chrome과 같은 경우에는 브라우저 홈 화면에 나타나기도 한다. 즉, 파비콘을 만들면 웹사이트의 아이콘으로 여겨지거나 사용자들이 웹상에서 내 웹사이트임을 알아볼 수 있는 시각적인 식별자가 됩니다.

파비콘 영역

• 웹 브라우저에 창탭에 표시되는 파비콘
• 북마크바에 표시되는 파비콘
• 내 브라우저의 방문 기록에 표시되는 파비콘
• 검색 결과에 표시되는 파비콘

파비콘의 중요도

파비콘은 사이트의 SEO에 직접적인 영향을 주지는 않지만 아주 작은 크기임에도 불구하고, 파비콘은 웹사이트 이미지의 전반적인 효과에 아주 중요한 영향을 미치며, 사용자 경험, 브랜딩, 전문성을 향상시킴으로써 브라우저에서 사이트가 돋보일 수 있도록 해주기 때문에 파비콘의 품질은 검색 결과에서 사이트 순위를 유기적으로 향상시킬 수 있습니다.

• 사용자 경험
  파비콘은 내 웹사이트가 기억에 남도록 하는 시각적 신호 역할을 하여 사용자 경험을 향상시킵니다. 사용자가 브라우저 및 북마크바와 같은 다양한 응용 프로그램에서 웹사이트 탭을 쉽게 찾을 수 있도록 돕기 때문에 파비콘을 사용하면 사이트를 계속해서 몇 번이고 재방문할 수 있습니다. 또한, 모바일의 사용자 경험에도 긍정적인 영향을 줄 수 있는데요. 모바일 웹디자인은 영향을 주기 위해 있는 것으로 많은 경우에 훌륭한 파비콘만큼 강력하면서도 손쉽게 영향을 줄 수 있는 것은 없습니다.

• 브랜딩
  진정으로 응집력 있는 브랜드에서는 아주 사소한 디테일조차도 정말 중요합니다. 파비콘은 작은 사이즈에도 불구하고 브랜드의 언어를 사이트의 외부로 확장하고 웹 브라우저에 드러냄으로써 웹사이트의 브랜딩 및 가시성에 기여합니다. 또한, 웹사이트에 적법성과 전문성을 더해주어 웹사이트의 완성도를 높여줍니다.

• 신뢰도
  파비콘은 사이트의 보안에 영향을 미치지는 않지만 사람들의 말에 따르면 사용자들이 파비콘이 있는 사이트를 신뢰하는 것으로 보입니다. 브랜드를 검색했든 혹은 다른 것을 검색하다가 브랜드를 발견하게 되든 사용자는 파비콘을 통해 사이트가 명백하게 존재한다는 것을 알 수 있기 때문입니다.

• 재방문 사용자
  파비콘은 강력한 브랜드 식별자이기 때문에 이를 활용하여 손쉽게 내 사이트가 검색 결과나 사용자의 브라우저 방문 기록에서 돋보이게 할 수 있습니다. 덕분에 쉽게 알아볼 수 있는 파비콘은 사용자가 내 사이트에 더 자주 방문하도록 유도합니다. 게다가 사용자들이 내 사이트를 북마크에 추가하면 이미 북마크에 추가된 사이트들 사이에서 내 사이트를 돋보여 쉽게 찾을 수 있습니다.

파비콘(favicon) 가이드라인

중요한 가이드라인은 다음과 같다.

크기

파비콘을 만들 때 가장 적합한 크기는 가장 일반적으로 표시되는 크기인 16x16 픽셀입니다. 하지만, 더 큰 크기(예: 32x32 픽셀)로 보일 수도 있습니다.

표준 파비콘 크기와 각 크기에 알맞은 사용 용도를 알려드리겠습니다.

파비콘(favicon)크기
16x16: 브라우저용
32x32: 작업표시줄 단축키용
96x96: 데스크탑 단축키용
180x180: 애플 터치용

확장자

원래 파비콘 파일 형식은 ICO였지만, 오늘날 기본 파일 형식 또는 벡터 아트는 PNG 또는 JPEG입니다. SVG는 계속해서 많은 브라우저가 지원하고 있기 때문에 점점 더 대중적인 선택이 되고 있습니다. 또한, 브라우저는 GIF로 만들어진 파비콘을 표시할 수 있기 때문에 크기가 작으면 GIF로 생성된 것은 보기가 어렵습니다.

• ICO

  Microsoft에서 개발한 파일 형식인 ICO는 파비콘의 기존 파일 형식이었습니다. ICO는 모든 브라우저에서 지원하며 파일 하나가 여러 가지 크기의 이미지를 포함할 수 있습니다. 이렇게 하면 브라우저에 의존하지 않고도 이미지의 크기와 비율을 조정할 수 있습니다. 많은 경우에, 그리고 ICO와 다른 파일 형식으로 저장한 경우에도 브라우저는 여전히 ICO 버전을 표시하도록 선택할 수 있습니다.

• PNG

  PNG는 웹사이트 제작자들에게 아주 익숙한 파일 형식이기 때문에 파비콘의 파일 형식으로 자주 사용됩니다. 만들기 쉬운 파일 형식이며, 일반적으로 이미지 및 파비콘을 고화질로 전송합니다. PNG 파일은 가볍다는 이점 또한 가지고 있는데요. 이는 파일들이 빠르게 로드된다는 것을 의미합니다.

• SVG

  SVG 파일은 가볍기로 유명합니다. 이러한 유형의 파비콘 파일 형식의 가장 큰 장점은 페이지 속도나 사이트의 성능을 저하시키지 않으면서 고화질 이미지를 전송할 수 있다는 것입니다. 과거에는 브라우저 호환성 문제로 파비콘의 SVG 사용이 제한되었지만 점점 변화되고 있습니다.

• 투명도

  디자인에 투명 배경이 있는 경우, 투명도 설정이 켜져 있는 상태에서 파일을 PNG로 저장해야 합니다.

파비콘(favicon) 적용

1. https://favicon.io/emoji-favicons에 들어가서 마음에 드는 이모지를 찾은 후 다운로드 받는다. (압축 파일)

2. 압축을 풀고 폴더에 있는 .ico, .png, site.webmanifest 같은 모든 파일들을 내 블로그 홈페이지 최상위 로컬 폴더로 옮겨준다.

    --압축해제한 파일 목록
    apple-touch-icon.png
    favicon-32x32.png
    favicon-16x16.png
    favicon.ico
    site.webmanifest
    android-chrome-192x192.png
    android-chrome-512x512.png
    about.txt
   

3. png나 jpg 확장자의 이미지 파일을 https://realfavicongenerator.net/에 있는 select your favicon image 버튼을 누른 후 업로드 한다.

4. 이 곳에 이미지 파일을 업로드 하고 맨 밑에 Generate your Favicons and HTML code를 누른 후 조만 기다리면 HTML 태그가 나타난다.

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
   

5. 해당 HTML 태그를 복사해서 📁_includes/📁head/에 있는 custom.html에 붙여 넣고 저장한다.

6. git commit, git push하여 웹 서버에 반영한다.