온라인 도구를 이용한 간단한 파비콘(favicon) 만들기

파비콘(Favicon)이란?

**파비콘(Favicon)**은  인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 작은  아이콘으로 브라우저의 탭, 북마크, 주소 표시줄 등에 표시됩니다.

 

파비콘을 만들어서 티스토리에 적용하는 것까지 한번 따라 해 볼게요~

 

 

파비콘의 특징

1. 작은 크기
   •   일반적으로 16 ×16, 32 ×32, 48 ×48 픽셀 크기로 사용됩니다.
   •   최근에는 64 ×64, 128 ×128 등의 고해상도 버전도 사용됩니다.
2. 파일 형식
   •   가장 일반적인 포맷: .ico
   •   지원되는 포맷: .png, .svg, .gif 등
3. 웹사이트의 브랜드 아이덴티티를 강화
   •   사용자는 파비콘을 통해 쉽게 웹사이트를 인식할 수 있습니다.
   •   북마크 목록에서도 웹사이트를 구분하는 데 도움이 됩니다.

 

파비콘을 만들 때 고려할 점

• 심플하고 직관적인 디자인이 좋습니다.
• 배경이 투명한 .png나 .ico 포맷이 유용합니다.
• 여러 크기의 아이콘을 제공하면 다양한 환경에서 선명하게 표시됩니다.

 

파비콘(Favicon) 만드는 법

파비콘을 만들고 적용하는 방법은 여러 가지가 있지만, 기본적인 과정은 다음과 같습니다.

 

1. 이미지 준비

• 정사각형 이미지(예: 512 ×512, 256 ×256 픽셀)로 준비
• 로고나 심벌을 활용 (배경이 투명한 .png 추천)
• 단순하고 알아보기 쉬운 디자인 사용

예) 미드저니를 이용해서 [문앤리치 티스토리]에 적용할 파비콘 이미지를 만들었습니다.

미드저니 바로가기

 

 

2. 파비콘 변환하기

이미지를 .ico 포맷으로 변환해야 합니다. 변환 방법은 다음과 같습니다.

🔹 온라인 도구 사용 (간편)

1. Favicon Generator 사이트 방문

Favicon Generator 사이트 바로가기

Favicon & App Icon Generator

 

    2. 이미지를 업로드한 후, .ico 파일을 다운로드

        ① [파일선택] 을 버튼을 눌러 이미지파일 업로드

        ② [Create Favicon] 버튼을 눌러 파비콘 만들기 

       ③ [Download the generated favicon] 를 눌러 생성된 파비콘을 다운로드합니다.

           

favicon.ico 파일이 만들어졌습니다.

 

 

3. 티스토리 블로그에 적용하기

       ① 티블로그 관리자 페이지로 들어갑니다.

            경로 : 설정 > 관리 > 블로그

 

        ② [불로오기] 버튼을 눌러 파비콘을 업로드 후 [변경사항 저장] 버튼을 누릅니다.

 

4. 적용 확인하기

• 브라우저에서 캐시를 삭제한 후 새로고침
• 개발자 도구(F12) → Network 탭에서 favicon.ico가 로드되는지 확인

✅ 이제 파비콘이 적용된 웹사이트를 확인할 수 있습니다! 🚀

 

 

✅ 결론:
파비콘은 작은 아이콘이지만, 웹사이트의 브랜드를 돋보이게 하고 사용자 경험을 향상하는 중요한 요소입니다. 🚀