Github Blog 파비콘(Favicon) 생성 및 적용하기

깃헙 블로그에 파비콘(Favicon)을 생성하고 적용하는 방법을 작성한다.

[01] 파비콘(Favicon)?

“Favorites + Icon”의 합성어로 인터넷 웹 브라우저의 주소창, 탭에 표시되는 대표 아이콘

아래 블로그 왼쪽 편의 아이콘을 변경하려 한다.

[02] 이미지 준비 및 파비콘 생성

• 사용할 이미지

  정사각형 이미지를 사용하는 것이 좋음

  

• 파비콘 생성

  (링크) favicon-generator

  사용할 이미지 파일을 업로드하고 (파일선택) → 파비콘을 생성함 (Create Favicon)

  

  생성된 파일을 다운로드 받음 (Download the generated favicon) 아래 HTML document의 내용은 블로그 설정 파일에 입력해야함 (따로 복사)

  

  다운로드 받은 파일의 이름을 변경 (선택사항)
  이 때, ico 확장자는 유지하여야 함
  ex) ed00c6… 파일을 favicon.ico 파일로 변경함

  

[03] 블로그에 생성한 파비콘 적용하기

• 생성한 파일의 압축을 풀고, 블로그의 /assets/ 폴더 아래로 복사

  

• 파비콘 생성 시, 출력되었던 HTML document의 내용을 _includes/head/custom/html 에 입력

  minimal-mistakes 테마 기준
  생성한 파일의 경로를 herf 태그 경로에 추가하여 준다 (/assets/favicon.ico/)

  

[04] 적용된 모습