[HTML] 파비콘(주소창 아이콘) 적용 방법

웹 페이지에서 주소창 위에 나타나는 아이콘을 파비콘(Favicon)이라고 부릅니다.

(즐겨찾기 등에서도 파비콘으로 지정한 아이콘이 나타납니다.)

오늘은 홈페이지 제작 시 파비콘을 적용하는 방법을 알아보도록 하겠습니다.

1. 파비콘용 파일 제작하기

먼저 파비콘으로 사용할 파일을 만들도록 하겠습니다.

우선 파비콘으로 만들 이미지 파일을 준비하고, 구글 등에 favicon이라고 검색하시면 이미지 파일을 파비콘으로 변경해주는 웹 페이지들이 많이 있습니다.

저는 글을 포스팅하는 시점에서 구글에 검색 시 가장 위에 나타나는 페이지를 기준으로 제작하도록 하겠습니다.

웬만한 페이지들이 사용 방법이 유사하기 때문에 다른 홈페이지를 쓰셔도 무방합니다.

(※ 일부 사이트는 이미지 크기가 맞지 않거나, 파일 크기가 어느정도 이상을 초과하는 경우 변경이 필요한데 아래 사이트는 별도의 변경 없이 진행되었습니다.)

(에디터 기준 2000*2000 2MB 이상의 파일도 제대로 작동하였습니다.)

Favicon & App Icon Generator

Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.

www.favicon-generator.org

페이지로 들어오시면 우선 설정을 'Generate only 16x16 favicon.ico'를 선택해주세요.

다음 파비콘으로 만들 이미지 파일을 선택한 후, 'Create Favicon'버튼을 클릭하시면 됩니다.

화면이 바뀌면 'Download the generated favicon'을 눌러주시면 됩니다.

브라우저에 설정된 다운로드 폴더에 ico 파일이 생성되어 있습니다.

파일 수정은 비교적 간단합니다.

우선 html 파일이 있는 폴더로 방금 만든 ico 파일을 이동시켜주고, 아래 코드를 적용시키면 됩니다.

해당 코드는 <head></head>사이에 입력해주시면 됩니다.

<link rel="favicon" href="./favicon.ico">

코드를 입력하기 전에는 브라우저의 기본 로고가 나타납니다.

코드를 입력하고 파일을 열어보시면 마찬가지 그대로 나타납니다..

그래서 다른 브라우저(네이버 웨일)로 확인해보았습니다.

네이버 웨일에서는 자동으로 뜨는 것을 확인 할 수 있습니다.

확인을 해보니 브라우저에서 기존의 파비콘을 캐시 형태로 저장하고 있어서 변경이 된 것을 제대로 확인하지 못한다고하네요.

제대로 뜨는 것을 확인하기 위해서는 아래와 같이 자신의 사이트 주소를 입력하는 코드를 넣어주시면 된다고 합니다.

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

수정 후 제대로 나타나는 것을 확인할 수 있습니다.

※ 위 방법으로도 제대로 해결되지 않는 경우가 있어 다른 해결방법을 추가하였습니다.

- 참고 문헌 -

stackoverflow - How do I force a favicon refresh?

[HTML / CSS] 이미지(div) 수평&수직 가운데 정렬하기 (1)	2021.09.06
[HTML/CSS] Footer 화면 아래에 고정시키는 방법 (0)	2021.07.26
[HTML/CSS] 들여쓰기 및 내어쓰기 방법 (1)	2021.02.12
[HTML] 파비콘 변경, 수정, 표시가 안될때 해결 방법 (0)	2021.02.10
[HTML5] 구글 폰트 사용하기 (0)	2020.07.14