• 1. 발단
• 2. 전개
  • 글자 Favicon 만들기
  • 위키에 적용하기

1. 발단

• 일단 이슈를 등록해놓기도 했고..
• chrome에서 탭을 여러개 띄워놓을 때 구별하기 좋으라고 ..
• 미뤄두던 파비콘 적용을 하기로했다.

2. 전개

글자 Favicon 만들기

• Johngrib님도 관련 글을 올렸는데..
• Johngrib님 사용한 favicon-generator.org는 별도 이미지 파일이 필요해서 일단 거르고 ..
• 구글 폰트에서 폰트를 선택하여 글자 파비콘을 만들 수 있는 favicon.io에서 만들어 보았다.
  • 구글 폰트 사이트에서 만들 글자를 타이핑해서 모양을 보고…
  • favicon.io에서 해당 구글 폰트를 선택하면 편하게 만들 수 있다.
• 만들고 나면, 잊지 말고 오른쪽 위에 ⬇ Download 버튼을 눌러 다운받도록 하자.

위키에 적용하기

• favicon.io 에서 만드는 부분 아래에 보면 Installation 섹션이 있는데..
• 다음과 같은 코드를 복사해 가도록 제공하고 있다.

  <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">
  

• 관련 해서 Johngrib님 Commit이 있는데 참고해서 적용하면 된다.