티스토리 블로그 아이콘과 파비콘 만들기/설치하기- Blog Mastery

내가 운영하는 티스토리 블로그에 아이콘과 파비콘을 만들어 넣는 방법에 대해서 알려드리도록 하겠습니다. 아이콘과 파비콘이란 웹사이트에서 사용할 수 있는 작은 사이즈의 아이콘으로 웹 브라우저의 검색 엔진(구글, 네이버 등)에 표시되는 것을 말하는데요 빠르게 진행해 보겠습니다.

파비콘 만들어 넣기

네이버 검색시 티스토리 파비콘 안 나올 때

Go to content

1. 아이콘, 파비콘이란

1. 아이콘이란

티스토리나 블로그의 아이콘이란 블로그를 대표하는 작은 이미지를 말합니다. 주로 웹 브라우저상의 검색에서 글의 제목 앞에  표시되는 블로그의 브랜드나 정체성을 시각적으로 나타내는 역할을 합니다.

 

이러한 아이콘은 "파비콘"이라고 불리기도 하며, 블로그를 방문한 사용자들이 쉽게 기억하고 다시 방문할 수 있도록 도와줍니다.

 

아이콘은 블로그의 첫인상을 결정하는 요소 중 하나로, 블로그의 로고나 상징적인 이미지를 사용하여 설정할 수 있어요.

크기는 32x32, 64x64 PX 등 다양하고  파일형식 JPG, PNG를 주로 사용합니다.

2. 파비콘이란

파비콘(favicon)은 웹사이트의 상단 주소창에 표시되는 작은 아이콘을 말합니다. 사용자가 웹 브라우저에서 여러 탭을 열어놓았을 때, 해당 웹사이트의 파비콘이 보이게 되어 쉽게 구분할 수 있습니다.

 

파비콘은 사이트의 브랜드를 강조하고 사용자 경험을 개선하는 역할을 합니다. 일반적으로 16x16 픽셀 크기와 파일형식 JPG, PNG를 주로 사용하며, 사이트의 로고나 상징적인 이미지를 활용하는 경우가 많습니다.

2. 만드는 방법

먼저 아이콘이나 파비콘으로 사용할 이미지를 준비합니다. 이미지의 해상도는 32x32, 64x64픽셀이 적당합니다. 갠바나 미리캔버스등 디자인 툴을 사용하여 이미지를 제작하면 됩니다

 

캔바 / 바로가기

 

미리캔버스 / 바로가기

 

티스토리에서 이미지 포맷은 아이콘은 png, .jpg을, 파비콘은 ico 형식을 선호하는데요 , 저의 경우 아이콘으로  64x64픽셀의 이미지를 만들어서 png 파일로 저장을 하여 이것으로 아이콘으로 사용하고, 이 png파일의 이미지를  ico 파일로 변환해 주는 사이트를 이용해서 ico 파일로 변환하고 변환된 iso 파일을 파비콘으로 사용을 합니다.

 

iso 파일 변환 사이트 / 바로가기

미리캔버스에 64x64픽셀의 이미지로 설정를 하여 이미지를 제작후 png 파일로 다운로드하여 저장 후 아이콘으로 사용하고, 그 이미지를 ico  파일로 변환해주는 사이트를 이용해서  ico  파일로 변환후 그 이미지로 파비콘으로 사용을 한다

 

또는 파비콘 생성 도구를 사용하면 좀 더 쉽게 만들 수 있는데요. 온라인 파비콘 생성 사이트를 이용하면, 이미지를 업로드하고 원하는 크기와 형식으로 변환할 수 있습니다. 대표적인 파비콘 생성 사이트로는 favicon.io, RealFaviconGenerator 등이 있습니다.

 

favicon.io / 바로가기

 

RealFaviconGenerator /바로가기

3. 설정하는 방법

1. 위에서 설명한 것처럼 미리캔버스나 캔바로 64x64픽셀의 png 이미지를 만들어 다운로드한 다음 티스토리의 관리자 창에서 왼쪽 최하단의 "블로그"를 클릭하여  아이콘 불러오기를 클릭하고 다운로드한 이미지를 넣으면 되고요

 

아이콘과 파비콘을 설치하여 넣는 방법

 

2. 이 이미지를 아이콘으로 써먹고 64x64픽셀의 png이미지를 ico파일로 변환해 주는 사이트를 이용해서 ico파일로 변환한 다음 다운로드하여 저장한 다음, 위와 같이 티스토리의 관리자 창에서 왼쪽 최하단의 "블로그"를 클릭하여 파비콘 불러오기를 클릭하고 다운로드한 ico이미지를 넣으면 됩니다.

4. 함께 보면 좋은 글

▶ 근로 장려금 신청방법과 2025년도 신청기간과 서류 

 

▶ 장기 렌트카를 하면 - 장점 6가지와 단점 6 가지 정리

 

▶ 비타민 B 의 종류(분류)와 종류별 효능(역할) 및 결핍시 증상과 과잉 섭취의 부작용 

 

▶ 전기 자동차의 전기 엔진(electric engine): 미래를 선도하는 혁신 기술과 진화

 

▶ 대장암(colon cancer): 예방법과 원인 그리고 치료 및 미래의 치료법