Favicon (홈페이지 아이콘) 사용법

0. Favicon

웹 페이지를 많이 띄워놓거나 사이트를 북마크(즐겨찾기)를 해 놓았을 때 홈페이지, 사이트의 로고가 가장 눈에 띄이는

경우가 많습니다.

특히나 애정이 많이 들어간 홈페이지를 개발하다보면 예쁜 로고 하나쯤은 달고 있어야 마음이 후련해 지시는 분들을

위해 파비콘의 사용법과 주변 이야기들을 해드리겠습니다.

1. 파비콘(Favicon) 이란?

크롬 브라우저의 탭

크롬 브라우저의 북마크

- 파비콘은 웹사이트를 상징하는 이미지로서, 해당 웹사이트에 접속했을 때 웹 브라우저의 제목 표시중, 주소표시줄, 탭,

즐겨찾기등에 표시됩니다.

- 기본적으로 .ico 형식입니다.

2. 파비콘(Favicon) 사용법?

파비콘은 일반적인 저작도구(포토샵, 그림판 등...)는 기본적으로 지원하지 않습니다.

ico 파일을 자체적으로 지원하는 이미지 처리 프로그램으로는 "코렐드로우" "GIMP" 정도가 있습니다

그러나 위의 프로그램들은 사용하기 까다롭거나 개인이 사용하기에 비싼 프로그램이기 때문에 저희는 웹의 무료 변환

사이트를 이용하겠습니다.

저는 https://www.favicon-generator.org/ 를 이용하겠습니다.

이 사이트를 이용하는 이유는 검색했을 때 가장 먼저 나온 사이트이기 때문입니다.

1. 우선 홈페이지의 로고가 될 png, jpg 사진파일을 준비합니다. 색상은 24bit까지 지원하며, 알파채널 (투명)을 사용하신다면 png 파일로 저장해야합니다.

2. 사이트에 접속 한 뒤 준비된 파일을 업로드 합니다. 그 후 원하는 옵션을 선택 하신 뒤 "Create Favicon"을 클릭하면 다운로드가 시작됩니다.

- Generate icons for Web, Android, Microsoft and iOS Apps

: 웹, 안드로이드, MS, iOS 전용 아이콘 생성

- Generate only 16x16 favicon.ico

: 16x16 파비콘 아이콘만 생성

- Maintain Image Dimentions (don't resize to be square)

: 이미지의 비율 유지 (기존 사이즈 유지)

- include your favicon.ico in the public gallery.

: 파비콘 아이콘을 공유하기

3. 그 후 홈페이지의 <head> 태그 안에

추가하시면 됩니다.

Toy-Toy DevStory