favicon(파비콘) 설정 및 갱신 오류 해결방법

favicon 설정 방법

파비콘은 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘입니다. 저는 간단하게 제 블로그의 대표 이미지로 설정을 해봤습니다.

 

파비콘

파비콘은 png, jpg등의 이미지를 ico로 만들어주는 사이트를 이용해서 쉽게 만들 수 있습니다.

 

Favicon & App Icon Generator

 

favicon generator에서 생성한 파일들

많은 파일들을 생성하지만, 여기서 필요한 건 favicon.ico 하나입니다. 이걸 이제 적당한 위치에 복붙한 뒤 코드를 작성합니다. 파비콘 설정은 다음과 같이 HTML의 head 부분에 설정할 수 있습니다.

<link rel="icon" type="image/x-icon" href="content/images/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="content/images/favicon.ico">

 

favicon 갱신 오류 해결  방법

파비콘을 설정하고 나서 변경을 해도 브라우저에서 이전 파비콘이 그대로 보여지는 경우가 있습니다. 파비콘 갱신 오류는 개발자의 문제가 아니라 브라우저 캐시의 문제입니다. 코드에서 아무런 설정을 하지 않아도 이런 파비콘 같은 경우에는 브라우저 자체적으로 캐시에 저장을 해놓습니다. 이를 해결하기 위해서는 브라우저에서 생성한 캐시를 삭제하면 됩니다.

 

크롬의 경우에는 주소창 옆 아이콘(느낌표 or 자물쇠)를 누르면 아래와 같이 쿠키 정보를 볼 수 있습니다.

 

크롬 브라우저 쿠키 삭제하는 방법 - 1

그리고 이 사이트에서 설정된 쿠키를 모두 삭제합니다.

 

 

이제 다시 접속하면 새로 설정한 파비콘으로 갱신이 된 걸 확인할 수 있습니다 :)

 

---

 

잘못된 내용이 있다면 언제든지 댓글이나 메일로 알려주시면 감사하겠습니다.

이 포스팅이 도움이 되었다면 공감 부탁드립니다.

궁금한 점은 언제든지 댓글 남겨주시면 답변해드리겠습니다:D