티스토리 뷰

파비콘이란? 나만의 파비콘 만들기 (ico 파일 생성)

MerCSsm 2023. 11. 3. 10:32
반응형

ㅍㅏㅂㅣㅋㅗㄴ-icoㅁㅏㄴㄷㅡㄹㄱㅣ

파비콘이란?

파비콘(Favicon)은 웹사이트를 나타내기 위해 웹 브라우저 상에서 사용되는 16x16 픽셀 크기의 작은 이미지입니다. 주로 웹 브라우저 상단의 탭에 표시되며, 브라우저의 북마크바, 방문 기록, 검색 결과에서도 페이지 URL과 함께 표시됩니다. 최근에는 구글 크롬과 같은 브라우저에서는 브라우저 홈 화면에도 나타납니다. 이렇게 파비콘을 만들면 웹사이트의 아이콘으로 간주되어 사용자가 웹상에서 해당 웹사이트(블로그)를 쉽게 식별할 수 있습니다.

 

  • 웹 브라우저에 표시되는 파비콘

ㅍㅏㅂㅣㅋㅗㄴ-ㅇㅞㅂㅂㅡㄹㅏㅇㅜㅈㅓ

  • 북마크바에 표시되는 파비콘

ㅍㅏㅂㅣㅋㅗㄴ-ㅂㅜㄱㅁㅏㅋㅡ

 

  • 내 브라우저의 방문 기록에 표시되는 파비콘

ㅍㅏㅂㅣㅋㅗㄴ-ㅂㅏㅇㅁㅜㄴㄱㅣㄹㅗㄱ

파비콘이 중요한 이유

파비콘은 웹사이트의 브랜드를 강화하고, 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 일반적으로 로고나 대표 이미지를 파비콘으로 사용하지만, 로고가 없는 경우에도 간단한 이미지로 파비콘을 만들 수 있습니다.

 

1. 이미지 개선의 핵심 요소

파비콘은 웹사이트의 주소창, 북마크, 탭 등에서 사용되는 작은 이미지입니다. 비록 크기는 작지만, 웹사이트 이미지 개선에 있어 중요한 역할을 합니다.

 

2. 재방문 유도

파비콘은 강력한 브랜드 식별자이기 때문에 이를 활용하여 손쉽게 웹사이트가 검색 결과나 사용자의 브라우저 방문 기록에서 돋보이게 할 수 있습니다. 덕분에 쉽게 알아볼 수 있는 파비콘은 사용자가 웹사이트에 더 자주 방문하도록 유도합니다.

 

3. 브랜딩 강화

파비콘은 브랜드의 아이덴티티를 시각적으로 표현하는 역할을 합니다. 이를 통해 웹사이트의 브랜딩 및 가시성이 강화됩니다. 또한, 웹사이트에 적법성과 전문성을 더해주어 웹사이트의 완성도를 높여줍니다.

 

4. 신뢰도 향상

파비콘은 사이트의 보안에 영향을 미치지는 않지만, 사용자들에게 신뢰감을 줄 수 있습니다. 브랜드를 검색했든 혹은 다른 것을 검색하다가 브랜드를 발견하게 되든 사용자는 파비콘을 통해 사이트가 명백하게 존재한다는 것을 알 수 있습니다.

 

5. 뿌듯하다

파비콘 만드는 방법

파비콘을 제작하기 위해 전문적인 이미지 편집 소프트웨어를 사용할 수도 있지만, 저희는 간단한 온라인 툴을 사용하여 파비콘을 생성해 보도록 합시다.

 

1. 기본 이미지 만들기
파비콘 이미지를 만들기 위해서 포토샵이나 일러스트로 이미지를 만듭니다. 마음에 드는 마스코트나 아이콘의 캡쳐도 괜찮겠지요. 아래 알려드릴 사이트에서는 여러 운영체제에 맞게 다양한 사이즈의 파비콘을 만들수 있는데 그 중 최대 사이즈가 310x310입니다. 픽셀의 깨짐이 없고 선명하게, 여러 운영체제에서 잘 보이길 원한다면 310x310 사이즈가 가장 좋지만 엄청나게 상관이 있는건 아닙니다.

ㅍㅏㅂㅣㅋㅗㄴ


2. 파비콘 이미지인 ico 확장자로 변환하기
이미지가 준비되었다면 ico 파일로 변환하면 됩니다. ico로 변환은 파비콘 변환 사이트를 사용하면 편리합니다. 간단하게 ico는 물론 app 아이콘까지 만들어주는 사이트입니다.

 

👉파비콘 작성 사이트 바로가기

 

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

 

3. 파일 및 옵션 선택

Generate your favicon icon에서 [파일선택]을 한 후 [Create Favicon]을 클릭해줍니다.

ㅍㅏㅂㅣㅋㅗㄴ-ㅁㅏㄴㄷㅡㄹㄱㅣ

 

*옵션

  • "Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps" : 일반 웹사이트, 안드로이드, ms 아이폰(애플)에서 적용되는 아이콘을 만들때 선택하세요.
  • 귀찮으시면 "Generate only 16x16 favicon.ico"를 선택하면 됩니다. ⇐ 간단해서 개인적으로 추천합니다.

  • Maintain Image Dimensions (don't resize to be square)
    업로드한 이미지 사이즈 그대로 이용할 것인지 체크합니다.

  • Include your favicon.ico in the public gallery.
    만들어진 파비콘을 이 사이트의 갤러리에 게시할 것인지를 선택합니다.

4. 다운로드 

[Download the generated favicon] 을 클릭하여 파비콘 파일을 다운 받습니다.

 

5. 티스토리 블로그 적용(티스토리 기준)

블로그 관리 메뉴의 파비콘에 다운 받은 파일을 업로드 해줍니다.

ㅍㅏㅂㅣㅋㅗㄴ-ㅁㅏㄴㄷㅡㄹㄱㅣ2

 

 

참 쉽죠? 여기까지 해주시면 본인만의 파비콘이 다른 블로그와는 구별, 차별되어 적용되어 나타남을 볼 수 있습니다.

 

 

 

반응형
댓글
공지사항