[HTML] 파비콘(Favicon) 이미지 생성 및 적용 방법 / 티스토리 또는 웹 사이트에 적용하기

티스토리 블로그를 운영하거나 웹 사이트를 개발하면서 탭에 보여지는 이미지를 적용하고 싶은 경우 이미지 생성부터 티스토리, 자체 웹 사이트 적용 방법을 알려 드리겠습니다.

 

파비콘(Favicon) 생성

 

PNG 이미지 준비

 - 파일 형식이 다르다면 그림판 등에서 파일 형식 .png 로 변경 후 진행

 

파비콘 생성 사이트 진입

 

https://favicon.io/ 

Favicon.io - The Ultimate Favicon Generator (Free)

 

PNG → ICO 선택

 - 경우에 따라 TEXT, 이모지로도 진행 가능합니다.

PNG - ICO 선택 후 진행

 

컨버터에 이미지 업로드 하기

 - 드래그 앤 드롭 또는 다운로드 왼쪽 버튼 눌러서 선택

컨버터에 이미지 업로드

 

이미지 업로드 시 다운로드 왼쪽에 이미지 표시

 - 다운로드 클릭 시 favicon_io 압축 파일 다운로드

png 이미지 등록 후 favicon 다운로드

 

.zip 압축 파일에 다양한 사이즈의 .png 파일과 .ico 파일이 있는 것을 볼 수 있습니다.

favicon_io.zip 파일 목록

 

압축 해제 후 이미지 파일 확인

.ico 파일 확인

 

티스토리에 파비콘 적용하기

 

블로그 관리 - 관리 - 블로그 

관리 - 블로그

 

블로그 설정 - 파비콘 - 불러오기

 - 다운 받았던 .ico 파일 등록

ico 파일 등록

 

변경사항 저장 후 웹 페이지 탭 확인

파비콘(Favicon) 이미지 적용 예시

 

웹 페이지에 파비콘 적용하기

 

HTML head 태그 사이에 아래와 같은 link 태그를 입력하시면 됩니다.

 - 분류를 위해 images 라는 폴더 안에 favicon.ico 파일을 넣어놨습니다.

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

.ico 파일 사용 태그

 

 - png 파일을 사용하여 파비콘을 적용하려면 해당 태그를 사용하면 됩니다.

<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon_16.png">

.png 파일 사용 태그