본문 바로가기

Code.D IT 강좌/HTML & CSS

파비콘(Favicon) 만들기 & 적용

파비콘(Favicon)이란?

Favorites icon의 줄임말로, 즐겨찾기 아이콘이라고 합니다.

즐겨찾기에 추가할 시에 사이트 이름 옆에 아이콘으로 표시되는 것을 말하죠.

웹 브라우저상에서는 주소창 옆에 작은 아이콘으로 표시됩니다.

사이트를 잘 나타낼 수 있는 로고(Logo)의 역할을 하는 셈이죠.



백문이 불여일견.

사진을 보여드리겠습니다.









파비콘의 형식

확장자는 .ico가 기본적이지만 png의 확장자로도 표현 가능합니다.

사이즈는 보통 16x16픽셀이 기본규격이지만 32x32 사이즈로도 표현 가능합니다.






파비콘 만들어주는 사이트

파비콘은 이미지 파일이 아니고 아이콘 파일입니다.

따라서 포토샵으로 jpg나 png등의 이미지 파일을 ico파일로 강제변경이 불가능합니다.

이미지 파일을 ico파일로 만들어주는 사이트가 따로 필요하죠.

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



파비콘 적용하기

두 가지 작업이 필요합니다.

1. 파비콘 만들기

2. 파비콘을 소스코드에 적용하기



1. 파비콘 만들기

http://www.favicon-generator.org/ 사이트에 접속합니다.






'찾아보기'를 클릭하여 이미지를 업로드합니다.






16x16크기만 사용하므로 'Generate only 16x16 favicon.ico'를 클릭합니다.

그리고서 파비콘을 만듭니다.('Create Favicon' 클릭)






이대로 다운로드를 받아서 써도 되지만 그대로 쓰면 하얀색 바탕이 네모가 됩니다.

이게 무슨 소리냐?

구글 홈페이지를 살펴보겠습니다.



                       





미세한 차이지만 왼쪽은 구글 홈페이지의 파비콘(하얀색 바탕이 동그라미), 

오른쪽은 다운받은 파비콘(하얀색 바탕이 네모)



구글 파비콘을 잘 살펴보면 하얀색 바탕이 네모가 아니라 동그라미인 것을 확인할 수 있습니다.

그러나 파비콘 만들어주는 사이트에서 다운로드를 그대로 받으면

하얀색 바탕이 네모가 되는 거죠.

그 전의 화면으로 다시 돌아가겠습니다.






'Use our icon editor to tweak your favicon'을 클릭하면 아래 사진과 같은 화면이 나옵니다.






구글 아이콘을 동그랗게 만들어주기 위해서 하얀색 바탕의 각을 지워줍니다.

'Eraser' 버튼을 클릭하여 각을 지워줍니다.






오른쪽 아래 화면에 'Create Favicon'을 클릭하여 다운로드 합니다.



2. 파비콘을 소스코드에 적용하기

소스코드에 적용하기 위해서 <head>와 </head> 사이에 아래의 코드를 삽입합니다.




<link rel="icon" href="파일이름.ico">


이클립스를 통해 위의 코드를 삽입하였습니다.

위의 두 줄의 코드를 살펴보면, "shortcut icon""icon"에서 차이가 납니다.

조사한 바로는 IE, safari, chrome 등의 브라우저 중에

일부 브라우저는 "shortcut icon"에서 실행되고,

또 다른 브라우저는 "icon"에서 실행됩니다.

"shortcut icon"과 "icon" 둘 중 하나만 있어도 가능한 브라우저도 있습니다.

어떤 브라우저가 어느 코드에서 실행되는지 정확히 모르겠지만

두 줄의 코드를 삽입하면 우리가 쓰고 있는 대부분의 브라우저에서 파비콘 표현이 가능합니다.

전체 코드는 아래에 첨부하겠습니다.



<!DOCTYPE html>
<html>
<head>

Google




</head>
<body>
</body>
</html>



그 결과를 살펴보겠습니다.



                                 



왼쪽은 다운로드한 파비콘이고 오른쪽은 구글 홈페이지의 파비콘입니다.

다운로드 받은게 약간은 어색하지만 그래도... 봐줄만 하지 않나요..?;

더 자연스럽게 동그란 모양을 연출하고 싶다면 사이트에서 편집하지 않고

그대로 다운로드 받아 포토샵으로 동그랗게 만들어주는 것도 방법이겠네요!



프로그래밍 방법으로 동그랗게 만드는 방법을 알고 계신 분들은 댓글 부탁드릴게요!



티스토리에 파비콘 적용하기

티스토리에 적용하는 것은 매우 간단합니다.

따로 코드를 넣을 필요 없이 관리자 모드에서 쉽게 설정할 수 있습니다.

환경설정에서 기본정보를 클릭합니다.






다운받은 파비콘을 업로드하시면 쉽게 적용할 수 있습니다.





'Code.D IT 강좌 > HTML & CSS' 카테고리의 다른 글

[CSS] 한글 폰트 적용 - 웹 폰트  (1) 2017.07.14