본문 바로가기
IT Labs/IT 생활 꿀팁

블로그, 사이트 운영 중이라면 파비콘 만들어보세요!

by 원더리나 2024. 11. 12.

파비콘은 웹사이트의 아이콘으로, 브라우저 탭이나 즐겨찾기 목록에서 웹사이트를 나타내는 작은 이미지 입니다.

이 작은 이미지가 웹사이트의 첫 인상을 결정짓는 중요한 요소인 점, 알고 계셨나요?

파비콘은 사이트의 브랜드를 상징하며, 방문자가 페이지를 탐색할 때 더 쉽게 인식할 수 있도록 도와줍니다.

따라서, 웹 사이트를 운영하거나 블로그 포스팅을 작성하는 분들에 파비콘 제작은 필수적이라 할 수 있습니다.

 

파비콘 정의

파비콘(Favicon)은 'Favorites Icon'의 줄임말로, 주로 16x16 픽셀 또는 32x32 픽셀 크기의 작은 이미지 파일입니다.

이는 웹 브라우저의 탭, 즐겨찾기 목록에서 사이트를 상징하는 데 사용됩니다.

 

요즘에는 웹 서핑하면서 사이트를 여러 개 열어두는 게 일반적이잖아요?

사용자들은 파비콘을 통해 화면에서 원하는 사이트를 빠르게 인식할 수 있습니다.

파비콘은 사이트의 정체성을 강화하고, 사용자가 기억하기 쉽게 만들어줍니다.

 

파비콘 만드는 법

파비콘을 만드는 방법은 여러 가지가 있습니다.

기본적으로 다음과 같은 과정을 통해 쉽게 만들 수 있습니다.

  1. 디자인 준비 : 먼저, 어떤 이미지를 사용할지를 결정해야 합니다. 웹사이트의 로고나 상징적인 이미지를 선택하는 것이 좋습니다. 이미지의 크기는 16x16 픽셀 또는 32x32 픽셀로 조정합니다.
  2. 파일 포맷 : 파비콘은 일반적으로 ico 포맷을 사용하지만, png나 gif 포맷도 사용할 수 있습니다. 다만, ico 포맷이 가장 일반적입니다.
  3. 제작 도구 사용 : 이제는 파비콘을 쉽게 만들 수 있는 온라인 도구가 많습니다. 그 중 하나는 Favicon Generator입니다. 이 사이트에 접속하여 준비한 이미지를 업로드하고, 생성 버튼을 클릭하면 자동으로 파비콘 파일을 다운로드할 수 있습니다.
  4. 웹사이트에 적용 : 생성한 파비콘을 웹사이트의 루트 디렉토리에 업로드한 후, HTML의 <head> 태그 안에 아래와 같은 코드를 추가합니다.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

 

무료 파비콘 생성 사이트: favicon-generator.org

다양한 무료 파비콘 생성 사이트가 있어서 선택하는 데 어려움을 겪을 필요가 없습니다.

제가 사용하고 있는 사이트는 아래입니다.

 

https://www.favicon-generator.org/

 

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

 

파피콘으로 생성할 이미지를 준비합니다.

1x1 의 정사각형 이미지이면 됩니다.

저는 아래 이미지로 파비콘을 생성해보겠습니다.

원더리나

 

웹사이트에서 이미지 파일을 선택하고, 'Create Favicon'을 클릭하면 끝입니다.

옵션은 아래를 체크 해제 해줍니다.

  • (v) 이미지 크기 유지(사각형으로 크기 조정하지 않음)
  • (x) 공개 갤러리에 생성한 아이콘.ico를 포함시킵니다.

 

파비콘이 생성되고, 다운로드 받을 수 있습니다.

 

 

압축된 파일을 다운받아 열어보면, 다양한 크기의 파비콘이 생성된 것을 확인할 수 있습니다.

 

티스토리에서 파비콘 넣는 법

위에서는 html 에 코드를 넣는 법을 알려드렸습니다.

하지만, 티스토리에서는 관리자 페이지에서 간단하게 파비콘을 적용할 수 있습니다.

블로그 관리 홈 > 관리 > 블로그

 

 

파비콘은 단순한 웹사이트 아이콘이 아닙니다. 이는 브랜드 인지도와 사용자 경험을 향상시키는 데 큰 역할을 합니다. 

멋진 파비콘은 사이트의 전문성을 높여주는 요소이며, 사용자가 다시 돌아오고 싶어하는 사이트로 기억되게 만듭니다. 

또한, 소셜 미디어나 다른 플랫폼에서 링크가 공유될 때, 파비콘이 사이트의 첫 인상을 결정짓는 데 중요한 역할을 합니다.

정리하자면, 파비콘을 제작하고 적용하는 것은 웹사이트 운영에 있어 매우 중요한 과정입니다. 

시간을 들여서라도 자신만의 특별한 파비콘을 만들어서 사이트에 적용해 보세요.

 사용자에게 긍정적인 인상을 남길 수 있을 것입니다.