본문 바로가기
기타 HTML 코드

파비콘 만들기, 파비콘이란?

by 우아한친구들 2017. 9. 8.
반응형

 

파비콘이란?

 

나의 홈페이지를 타인이 즐겨찾기하거나 북마크등을 할때 웹주소앞에 붙는 작은 아이콘을 말해요.

자 그럼... 하나씩 따라해보세요... 뚝딱뚝딱 따라하다보면 어느새 완성되어 있을거에요...^^

 

1. 우선 자신의 홈페이지로고가 필요해요..( jpg,png 등등...)

    특별한 로고가 없다면 아무 이미지로 해도 괜찮아요..다만 이미지가 정사각형이어야 한다는점...ㅋ

2. 파비콘을 직접 제작해도 되지만 굉장히 귀찮아요 ㅋㅋㅋ...그런분들을 위해 준비된게 있네요...

    http://www.degraeve.com/favicon/

 

    위 사이트를 접속하시면 아래와 같은 화면이 나와요..

 

 

 

 

 

3. 위 화면에서 파일을 선택한후 업로드 하면 파비콘이 생성되요...

4. 그럼 완성된 파비콘을 내 컴에 저장해줘요...(이미지 사이즈가 워낙 작아서 잘 안보여요.. )

5. 저장된 파비콘을 홈페이지가 있는 서버에 폴더를 생성한후 업로드해요..

6. 아래 코드를 자신의 서버경로에 맞춰서 수정해줘요..

    <link rel="shortcut icon" href="파비콘이 저장된 자신의 서버경로/ favicon.ico">​

7. 관리자모드로 접속한후 위 코드를 기본환경설정 -> 추가 script, css​ 에 넣고 저장해요...

8. 그리고 자신의 홈페이지에 접속한후 북마크나 즐겨찾기등에 등록하면 

    짠~~~!!  웹주소 앞에 자신만의 파비콘이 떡하니~~ 무게잡고 있을거에요...^^

 

 

 

감사합니다...

 

반응형

댓글