[BlogDev] Favicon 등록하기

도입

본 게시물은 공부하는 식빵맘님의 게시물을 통해 배우고 따라하는 과정입니다. 이 글을 누군가 보고 있다면, 그리고 보다 전문적이고 자세한 설명을 바라신다면 위 링크의 블로그를 확인해보시길.

파비콘(Favicon)

파비콘(favicon)은 크롬 브라우저 탭에서 해당 사이트의 대표 이모지를 의미한다. 크롬 브라우저의 기본 favicon은 회색 지구 모양이다.

😮 로컬 서버로 접속했을 때는 favicon이 잘 반영되지 않는다.

내 블로그에 favicon 등록하는 방법

1. 이모지 찾기

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

나는 일단 화학공학과 컨셉을 유지하기 때문에 양초를 선택했다.

2. 이모지 폴더 이동

다운로드한 이모지 알집 파일의 압축을 풀고 폴더 내 모든 파일들을 내 블로그 홈페이지 최상위 로컬 폴더로 옮겨준다.

orchemi.github.io 폴더로 잘 옮겨온 것을 알 수 있다. 이후에서 설명하겠지만, realfavicongenerator.net 에 해당 favicon을 업로드하여 생성되는 favicon package를 다운로드 받아 파일 개별로 폴더에 넣을 것.

3. 이미지 파일 업로드

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

사이트의 설명에 따르면 최소 70*70 사이즈의 이미지여야 하며, 260*260 사이즈는 되어야 시각적으로 유의미한 결과를 낼 수 있다고 한다. 나의 경우 제일 고화질이 좋을 거 같아서 512*512 사이즈의 이미지를 선택했다.

이 곳에 이미지 파일을 업로드 하고 사이트 최하단의 Generate your Favicons and HTML code 를 누른 후 기다리면 HTML 태그가 나타난다.

4. HTML 코드 복사/붙여넣기

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

이후 custom.html 파일을 commit, push하여 웹 서버에 반영한다.

오류 해결 1st Try : Directory

나는 📁head/📃custom.html 파일에 favicon HTML 코드를 잘 붙여넣었는데도, favicon이 반영되지 않았다. 왜 그럴까 한참 고민했는데, 애초부터 favicon 관련 파일들을 📁Orchemi.github.io/📁favicon.io/ 로 favicon.io의 폴더 내에 모아서 github blog 폴더 내에 넣어놓았는데, 이 때문에 favicon이 반영되지 않았나 생각이 들었다.

즉, 이를 폴더 밖으로 빼내는 것이 favicon 반영의 열쇠이지 않을까?

결과

아니었다. 반영이 안 된다.

오류 해결 2nd Try : Favicon Package

favicon 파일을 만드는 realfavicongenerator 사이트에 다시 접속해서 설명을 제대로 읽어보았다.

1. Download your package: Favicon package

Favicon package 버튼을 눌러 Favicon package를 다운로드 받는다. 이것이 기존에 favicon을 골랐던 알집파일과 다른 것은 📃safari-pinned-tab 이나 📃browserconfig 등의 파일이 더 생긴다는 것이다.

그래서 기존의 favicon 알집파일에 있던 기존 파일을 삭제하고, 이 Favicon package 내의 파일을 옮겨보았다.

결과

안된다. 울고싶다.

오류 해결 3rd Try : Favicon Check

1. Optional - Once your website is deployed, Check your favicon

“사이트가 배포되면, 파비콘을 확인” 이라는 의미. 버튼을 클릭하면 Favicon Checker 로 이동되며, 내 블로그 사이트 url을 입력하면 파비콘이 어떻게 적용이 되는지 체크할 수 있다.

오, 사실 모든 브라우저에서 잘 반영이 되고 있었다. 단, Classic, desktop browsers 만 빼고 말이다. 자극적인 빨간색을 띄고 있는 오류 메세지를 살펴보자.

Image https://orchemi.github.io/favicon.ico is ill-formed
: 이미지 https://orchemi.github.io/favicon.ico는 형식이 잘못되었습니다.

favicon.ico is missing some icons of recommended sizes (32x32, 48x48)
: favicon.ico에 권장 크기(32x32, 48x48)의 일부 아이콘이 없습니다.

favicon.ico does not contain the highest resolution icon (48x48)
: favicon.ico에는 최고 해상도 아이콘(48x48)이 포함되어 있지 않습니다.

음, 그래서 favicon.ico 파일을 살펴보기로 했다.

사진의 크기는 48x48. 즉, 최고 해상도 아이콘이다. 뭘 더 어쩌라는거죠? 울고 싶다 정말.

오류 해결 4th Try : 이상한 favicon?

진짜 설마, 내 favicon 자체가 이상했던 문제일까봐 favicon과 관련된 모든 것을 삭제한 뒤, 새 favicon을 다운받아 favicon package를 생성해 github.io 폴더에 파일을 넣고 commit & push 해보자.

화학공학과 컨셉은 못 잃지. 초록색 괴상한 액체가 담긴 실린더?를 선택했다.

잘 부탁드립니다.

결과

Favicon Check 에서는 기존의 desktop browsers의 에러가 사라졌다.

…저한테 왜 그러세요?

오류 해결 완료

혹시나 로컬 서버로 접속한 문제 때문에 내 컴퓨터에서만 보이지 않는 것인가 싶어 태블릿으로 사이트에 접속해보았다.

ㅠㅠㅠㅠㅠ성공한 것 같다. 꾸준한 노력에 이 영광을 돌린다.

References

• 공부하는 식빵맘