html 파비콘(favicon) 만들기 / 사이트 적용

2021. 6. 18.

by. 라몽(●'◡'●)디자이너

- 파비콘은 favorite + icon = favicon을 뜻하며, 웹사이트의 대표아이콘을 말한다.

- <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로 바꾸기

[블로그참고]

파비콘 만들기 / 사이트에 적용(HTML) 하는 방법

파비콘이란?, 그리고 title 태그

맨 위로

라몽(●'◡'●)디자이너
코딩/웹디자인에 대한 정보를 다룹니다.