본문 바로가기

코딩

웹사이트 주소 아이콘 만들기 (파비콘)

웹사이트 주소 아이콘 만들기 (파비콘)



웹사이트를 즐겨찾기 할때 이름 앞에 나오는 주소 아이콘(=파비콘)을 

손쉽게 만드는 방법을 알려드리겠습니다.


파비콘 아이콘을 내 웹사이트에 적용하려면 다음의 두 가지가 필요합니다.


1. 아이콘 이미지 (.ico 확장자 파일)

2. 웹사이트 헤더에 넣을 태그 


아래 사이트를 이용하면 아이콘 이미지와 태그를

자동생성해주기 때문에 손쉽게 파비콘 아이콘을 적용할 수 있습니다.


http://www.favicon-generator.org/






먼저 로고 이미지 파일을 준비 후 파일 업로드를 해줍니다.

(확장자는 PNG, JPG, GIF)


1) Generate icons for Web,, Android, Microsoft, and iOS (iPhone and iPad) Apps

2) Generate only 16x16 favicon.ico


[Create Favicon] 버튼을 누르기 전 두가지 옵션중 

어떤 용도로 생성할 것인지를 체크합니다.






1) Generate icons for Web,, Android, Microsoft, and iOS (iPhone and iPad) Apps






2) Generate only 16x16 favicon.ico







아이콘 옆의 [Download the generated favicon] 버튼을 눌러

생성된 ico 파일을 다운로드 후, 

웹사이트의 최상단 경로 (/)에 넣어줍니다.


그리고 생성된 소스를 복사한 뒤 웹사이트 <head></head> 사이에 

넣어주면 바로 해당 파비콘이 적용됩니다.