주소창에 아이콘 추가하기

블로그 꾸미기

Posted by Yuseon on January 7, 2021

주소창에 아이콘 추가하기

1) .ico 파일 만들기

favicon이란 주소창에 표시되는 웹 사이트를 대표하는 아이콘을 말하며, 아이콘은 .ico 확장자를 갖는다.
.ico 파일를 접근할 수 있는 위치에 저장한다.

다음 사이트를 통해 .jpg, .png등의 이미지 파일을 .ico 파일로 변환할 수 있다.
https://www.favicon-generator.org

2) 아이콘 추가하기

head.html 파일에 <head>…</head> 사이에 다음 코드를 추가한다.

1
2
3
4
5
6
7
8
<!--이미지가 폴더에 있다면-->
<link rel="shortcut icon" href="/path/favicon.ico">

<!--이미지의 url을 사용하고 싶다면-->
<link rel="shortcut icon" href="http://www.iconexample.com/favicon.ico">

<!--아이콘에 애니메이션 효과가 있다면-->
<link rel="shortcut icon" type="image/gif" href="/path/favicon.ico">