-
파비콘(favicon) 이란?
- 파비콘은 favorite + icon = favicon을 뜻하며, 웹사이트의 대표아이콘을 말한다.
왼쪽아이콘이 파비콘 파비콘 설정하는 방법(HTML)
- <head>태그에 파비콘 파일의 경로를 지정해주면 된다.
- vscode에서 파비콘코드 단축키는 : link:favicon.ico 엔터
파비콘 만드는 법
- 파비콘 사이즈(favicon size)는 16px x 16px 이 제일 최적화된 사이즈이고 공통적으로 보여지는 사이즈
- 더 커지면 용량이 커져서 좋지 않습니다.1. 직접 파비콘 만들기
2. 폰트어썸 사이트에서 아이콘 svg로 다운받아서 피그마(figure) 에서 사이즈 조절
- 폰트어썸에서 <i class="fa -"> 옆 다운로드 아이콘클릭
-피그마는 사이트 무료가입후 새파일에서 svg아이콘 불러오기
Figma: the collaborative interface design tool.
Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
www.figma.com
- 불러온 후 우측에서 가로세로 16px로 조정 후
- 우측 하단에 Export에 png로 내보내기
- 내보낸 후 png이미지명을 이미지명.ico로 바꾸기
[블로그참고]
https://blog.naver.com/gmldnjs0605/222211819010
파비콘 만들기 / 사이트에 적용(HTML) 하는 방법
https://blog.naver.com/nicholasdw/222320051930
파비콘이란?, 그리고 title 태그
반응형'코딩스터디 > CSS' 카테고리의 다른 글
flex 정리 (0) 2021.06.29 전역속성 - data (0) 2021.05.29 css 다양한 클리핑 마스크 적용 (0) 2021.05.03 css filter속성 (0) 2021.05.01 트랜지션, 애니메이션 속성정리 (0) 2021.04.22 댓글