본문 바로가기
일상·꿀팁

파비콘(favicon) 사이즈와 만들기, 웹사이트를 대표하는 아이콘

by MZ경제금융정보 2024. 5. 7.

파비콘은 웹사이트를 대표하는 아이콘으로, 웹 브라우저의 주소창에 표시됩니다. 이 아이콘은 웹페이지의 아이덴티티를 상징 하며, 사용자의 눈길을 사로잡아 유입을 극대화시키는 효과가 있습니다. 이 글에서는 파비콘을 만드는 방법과 적용하는 방법에 대해 자세히 알아보겠습니다.

 

파비콘 만들기, 웹사이트를 대표하는 아이콘

 

파비콘 만들기 바로가기

 


파비콘이 필요한 이유

파비콘이 필요한 이유

 

인터넷을 통해 검색하면 보통 글과 함께 파비콘이 함께 노출이됩니다. 스마트폰부터 데스크탑까지 사용하는 디바이스 크기가 다양해진만큼 파비콘은 다양한 사이즈로 등록하는 것이 좋습니다. 파비콘은 브랜드 로고와 같으며, 웹페이지의 아이덴티티를 상징합니다. 동시에 사용자의 눈길을 사로잡으며 유입을 극대화시켜주는 효과도 있습니다.

 

파비콘 만드는 방법

파비콘 만드는 방법

 

위의 이미지는 파비콘이 어떻게 노출 되는 지 확인을 하기 위한 이미지입니다.

(빨간색 체크 표시 V)를 보시면 조금만한 대표 로고의 이미지가 보이실 겁니다. 

 

 

1. 이미지 준비 : 이미지는 직접 만들거나 아이콘을 다운로드 받습니다. 그림판이나 포토샵으로 직접 만드는 경우, 사이즈는 192*192, 100* 100, 50* 50 등 정사각형으로 픽셀로 지정합니다. 위에 '파비콘 만들기 바로가기' 를 들어가시면 됩니다.

 

2. 파비콘 생성 사이트 접속 : 파비콘을 만들어주는 사이트에 접속합니다. 이 때, 위의 파비콘 만들기 바로가기 이용할 수 있습니다. 접속을 하시면 하단의 이미지처럼 보이 실겁니다.

 

파비콘 만드는 방법

 

 

내 PC에서 'Untitled design' 파일명의 이미지를 불러 오는 중...

 

 

3. 이미지 업로드 :  위의 이미지에 '빨간색 표시처럼 클릭을 하시면 내 컴퓨터에서 이미지 만든 파일'을 보실 수 있습니다.

그 다음 이미지를 클릭 후 업로드하고 '파일 선택 부분에 이미지'가 들어가 있으실 겁니다.

(하단 이미지 참조)

 

 

4. 위의 이미지 순서 처럼 1번 체크 후, 2번 클릭을 하시면 바로 하단의 이미지처럼 보이 실건데요!!!

 

 

5. 위에 파란 글씨로 되있는 부분 'Download the generated favicon' 부분을 클릭을 하시면 다운로드가 됩니다. (내 PC 저장된 favicon.ico) 이라는 것이 있으실겁니다. 

( 여기 까지가 파비콘 이미지를 만든 최종 완료 입니다.)

그 다음에 할 것은..? 포스트용 워드프레스 홈페이지를 만들고 사용하실려고 하는 분이 있을 것이고, 블로그 티스토리를 만들어서 포스팅을 할려고 하시는 분들이 있으실겁니다. 

1. 내가 워드 프레스를 하신다면'파일질라'프로그램 '클라이언트'를 다운로드 하시고, 설치 한뒤에 서버에 들어가셔서, 도메인, 아이디, 비번 이렇게 입력을 하셔야 접속을 하실 수 있습니다.

인터넷에 검색을 하시면 간단하게 설치 방법 및 사용방법에 대해서

많이 나오니 검색을 해보세요!! 

 

위에서 말하는 도메인, 아이디, 비번 혹시 알고 계신가요..?  총 3가지를 입려해야 합니다.

 

1. 내 도메인이 예로들어 : hteodkk.kr

2. 내가 호스팅을 어디서 했는지 기억을 하셔야 합니다. 카페24, 호스팅kr, 가비아 등.. 찾으셨다면..

예로 들어서 : wue2839

3. 비번도 꼭 알아야 합니다. 예로 들어 : ******

 

하단에 이미지를 참조 하시면 쉽게 아실 수 있을 실 겁니다.

 

위에까지 하셨다면 정말 간단합니다.!! 하단의 이미지를 참조 하세요.

 

 

위에 제가 설명했던 이미지 완료한 favicon.ico 이미지를 www 루트 경로로 이동 시키면 끝입니다.

 

여기 까지가 워드프레스 포스팅용 홈페이지를 만드시는 분들을 위한 글이였습니다.

 

2. 이번엔 티스토리를 하시는 분들에게 위한 부분인데요. 티스토리는 정말 정말 간단합니다.

업로드 하면 끝이더라고요 ㅎㅎ

 

 

 

좌측 하단에 블로그 클릭을 하셔서, 파비콘만든 이미지를 불러오기 하시면 끝입니다. (위에 보시면 파비콘 이미지 만드는 법이 나와있습니다.)

 

 

 

 

여름을 맞이하며, 에어컨 청소를 꼼꼼하게! 셀프 청소 방법 대공개

안녕하세요, 블로그를 방문해 주셔서 감사합니다. 오늘은 에어컨 청소에 대해 이야기 해보려고 하빈다. 에어컨 청소는 생각보다 복잡하지 않고, 주기적으로 시행하면 에어컨의 수명을 연장시키

mzfinancial.tistory.com

 

 

자녀도 받을 수 있는 국민연금 유족연금 상속! 2024년 최신 정보를 지금 확인하세요!

국민연금 상속에 대해 궁금증이 있으신가요? 2024년 최신 기준으로 국민연금 상속에 대해 자세히 알아보겠습니다. 이 글은 국민연금 상속의 개념부터 유족 연금의 조건, 계산 방법, 그리고 한계

mzfinancial.tistory.com

 

 

2024 연말정산 환급금 조회 방법

2024년 연말정산 환급금 조회 방법에 대해 상세하게 설명한 가이드입니다. 국세청 홈택스 웹사이트를 통해 연말정산 미리보기 서비스를 이용하는 방법을 단계별로 안내하고 있습니다. 이 가이드

mzfinancial.tistory.com


 

파비콘은 웹사이트의 아이덴티티를 상징하는 중요한 요소입니다. 이 글을 통해 파비콘을 만들고 적용하는 방법에 대해 알아보았습니다. 이 방법을 활용하여 자신의 웹사이트에 맞는 파비콘을 만들어 보세요. 웹사이트의 전문성과 신뢰성을 높이는 데 큰 도움이 될 것입니다.

댓글