목차
파비콘이란?
파비콘 영어로 favicon이라고 합니다. 파비콘 확장자는 .ico가 되겠습니다. 아래 그림과 같이 웹브라우저(Web) 주소창에서 아이콘으로 표시되는 것을 말하는데요.
이 파비콘을 어떻게 변환하는지 알아보겠습니다. 먼저 파비콘을 생성하려면 이미지 파일이 있어야겠죠. 확장자는 png, jpeg, jpg, gif, ico 파일과 사이즈 16X16 또는 32X32 픽셀(pixel) 기본규격 사이즈를 준비합니다. 또한 배경이 투명한 이미지면 더욱 좋을 것 같습니다.
파비콘 이미지 준비물
확장자 : png, jpeg, jpg, gif, ico
사이즈 : 16*16 또는 32*32 픽셀 이미지
파비콘 만들어주는 사이트
저는 1번 사이트를 추천드리겠습니다. 투명 배경으로 파비콘을 쉽게 만들 수 있었던 사이트였습니다.
1. http://tools.dynamicdrive.com/favicon/
Dynamic Drive- FavIcon Generator
FavIcon Generator Use this online tool to easily create a favicon (favorites icon) for your site. A favicon is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is called up. It is a good way to brand you
tools.dynamicdrive.com
파일을 업로드 후, Optional 에서 Merge with a 32x32 desktop icon 을 체크 후 Create Icon을 클릭합니다.
Merge with a 32x32 desktop icon을 체크해야 화질이 더 선명해지는 것을 볼 수 있었습니다.
Create Icon을 누르면 아래와 같이 [Download FavIcon] 버튼이 보일 것입니다. 버튼을 누르면 파비콘 파일이 다운로드됩니다.
2. https://www.favicon-generator.org/
Favicon & App Icon Generator
Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.
www.favicon-generator.org
3. https://www.degraeve.com/favicon/
Favicon Generator
--> Favicon Generator Here is an example of a favicon:
www.degraeve.com
파비콘(Favicon) 웹사이트 적용하기
HTML에서 head 안에 link 2줄을 넣어줍니다. href 경로만 수정해주고 반영해주면 됩니다.
예시
<head>
.....
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
.....
</head>
