궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
FRONT-END/HTML

[HTML] link 태그 shortcut icon으로 파비콘 적용 방법

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

HTML link 속성을 통해 파비콘을 적용하는 방법에 대해 알아보겠습니다.

파비콘

파비콘이란 웹사이트 주소창의 조그마한 아이콘을 의미합니다. 이것이 바로 shortcut icon 입니다.

shortcut icon 사용 방법

shortcut icon을 사용하기 위해서는 link 태그를 사용해야 합니다.

<link rel="shortcut icon" href="파비콘 이미지 링크">

이제 이 link 태그를 <head> 안쪽에 넣어주면 적용이 됩니다.

파비콘 만드는 방법

파비콘을 만들기 위해서는 이미지 파일을 ico 형태로 변경해줘야 합니다. 이것은 다양한 사이트에서 변환이 가능한데, 이 포스팅에서는 genfavicon을 활용하는 방법을 알려드리도록 하겠습니다.

  1. http://genfavicon.com/ 접속
  2. select your image 탭에서 파비콘으로 사용할 이미지 선택
  3. 사용할 부분 지정후 크롭
  4. 파비콘 다운로드
 


오늘은 이렇게 HTML link 속성을 통해 파비콘을 적용하는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟


잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.