본문 바로가기
알고 있으면 좋은 정보.

파비콘 쉽게 만드는 방법. 누구나 따라 할 수 있는 파비콘 만들기 방법.

by Htower 2024. 12. 11.
반응형

오늘 포스팅은 웹사이트에서 사용되는 작은그림, 사진 파비콘 쉽게 만들기 포스팅입니다. 

 

파비콘(Favicon)은 "favorite icon"의 줄임말로, 웹사이트를 대표하는 작은 아이콘을 의미합니다. 보통 브라우저의 탭, 북마크, 즐겨찾기 목록, 그리고 모바일 디바이스에서 북마크된 앱 아이콘으로 사용됩니다. 파비콘은 웹사이트의 브랜드 정체성을 강화하고, 사용자가 특정 사이트를 빠르게 인식할 수 있도록 돕는 중요한 요소입니다. 

 

파비콘은 웹브라우져를 열었을 때 아래 사진과 같이 표시해 놓은 부분과 같이 내가 설정한 이미지로 내 사이트, 특정 사이트의 정체성을 확인 할 수 있습니다.

 

파비콘.

 

파비콘의 기본 특징.

  • 크기와 형식
    파비콘은 주로 정사각형 형태의 작은 이미지로, 가장 일반적인 크기는 16x16 픽셀이나 32x32 픽셀입니다. 하지만 고해상도 화면(Retina 디스플레이 등)에서는 64x64, 128x128 등의 더 큰 크기가 사용되기도 합니다.
    지원되는 파일 형식은 ICO(가장 전통적인 형식), PNG, SVG, GIF, JPG 등이 있습니다. 하지만 PNG 형식이 투명도와 호환성 면에서 많이 사용됩니다.
  • 위치
    파비콘 파일은 일반적으로 웹사이트의 루트 디렉토리에 저장되며, favicon.ico라는 이름으로 지정됩니다. 
  • 브라우저의 역할
    대부분의 브라우저는 자동으로 루트 디렉토리의 favicon.ico 파일을 감지하지만, 최신 웹사이트는 HTML 코드에서 명시적으로 파비콘을 정의하는 것이 일반적입니다.

 

파비콘의 주요 역할.

  • 브랜드 인식 강화
    파비콘은 웹사이트의 로고나 대표 이미지를 소형화한 것으로, 사용자가 브라우저 탭이나 북마크에서 쉽게 웹사이트를 식별할 수 있도록 합니다.
  • 사용자 경험 개선
    사용자는 여러 탭을 열었을 때 파비콘을 통해 각 웹사이트를 빠르게 구분할 수 있습니다. 또한, 북마크에 저장된 사이트를 탐색할 때 시각적 단서를 제공합니다.
  • 웹사이트의 신뢰도 향상
    파비콘이 없는 사이트는 기본 아이콘이 표시되어 전문성이 부족해 보일 수 있습니다. 따라서 파비콘을 설정하면 웹사이트의 신뢰도를 높이는 데 기여할 수 있습니다. 관리되고 있다는 느낌을 방문자에게 줄 수 있는 큰 장점이 있습니다.

 

파비콘 만들기 실전.

무료로 만들 수 있는 다양한 파비콘 사이트가 있습니다.  그중 가장 간단하게 만들 수 있는 사이트를 통해 쉽게 파비콘을 만들 수 있습니다.

 

https://favicon.io/

 

Favicon.io - The Ultimate Favicon Generator (Free)

With Favicon.io you can quickly generate a favicon for your website for free!

favicon.io

 

 

위 링크를 통해 사이트에 접속하면 화면에 PNG --> ICO 가 보입니다. 바로 눌러 줍니다.

 

파비콘 쉽게 만들기.

원하는 이미지를 드레그로 옮겨도 되며 파일 업로드도 가능합니다.

 

그 다음 바로 다운로드를 누르면 압축파일을 다운로드 할 수 있습니다.

 

 

 

이 사이트에서는 모양이나 디자인 보다는 .ICO 로 파일 변환을 쉽게 해줍니다.

 

 

이렇게 기본스팩에 맞는 파비콘 이미지가 완성됩니다.  파비콘은 .ICO 확장자가 유용합니다. 이렇게 작업이 된 파비콘은 내가 사용하는 블로그에 적용 시킬 수 있으며 사용하는 웹사이트에 따라 적용 방식은 다르기 때문에 확인이 필요합니다.

 

 

파비콘 이미지 업로드 방식 이외에 HTML 코드 입력을 통해도 가능합니다. 본 방법은 사이트를 통해 확인하시면 됩니다.

 

 

파비콘 제작 시 고려사항.

  • 단순성
    파비콘은 매우 작은 크기로 표시되기 때문에 복잡한 디테일보다는 단순하고 선명한 디자인이 적합합니다.
  • 브랜드 일관성
    웹사이트의 로고나 대표 색상을 사용하여 브랜드 정체성과 일치하도록 디자인합니다.
  • 다양한 크기 지원
    다양한 디바이스와 해상도를 고려하여 여러 크기의 파일을 준비합니다.

 

파비콘 쉽게 만들기 마무리.

파비콘이라는 용어 자체도 낯설 수 있습니다. 내가 관리하고 운영하는 웹사이트, 블로그에 정체성, 관리를 통해 사이트 방문하는 사람의 신뢰도를 올릴 수 있습니다. 세계적으로 유명한 모든 기업들이 자사네임, 이미지를 파비콘을 통해 전달 합니다. 더욱 신뢰감과 깔끔한 웹사이트를 통해 더 많은 사이트 방문객 북마크를 해 찾아 올 수 있어 장기적으로 큰 도움이 됩니다.누구나 쉽게 파비콘 만들기에 대해 알아보았습니다.

 

반응형