Favicon (파비콘;사이트 아이콘) 만들기, 넣는 법 > 기술자료

HTML Favicon (파비콘;사이트 아이콘) 만들기, 넣는 법

페이지 정보

작성자 관리자1 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
댓글 0건 조회 35,177회 작성일 2009-04-25 16:01:53 ~ 2021-05-11 09:04:19

본문

브라우저 주소창의 URL 왼쪽에 16x16 픽셀의 조그마한 아이콘을 넣는 방법입니다.
이런 아이콘을 파비콘(favicon, favorites icon, 사이트 아이콘)이라고 합니다.

1. favicon.ico 파일 만들기
우선 favicon.ico 라는 파일명의 아이콘 파일을 만들어야 합니다.
마이크로안젤로 같은 아이콘 편집기를 사용하여 만들면 됩니다.
되도록 16x16 픽셀의 소형 아이콘으로 저장 후 아이콘 파일을 서버에 올립니다.

2. Favicon Generator 웹사이트에서 만들기

파비콘을 간단하게 만들어 주는 온라인 사이트입니다. https://www.favicon-generator.org
원하는 이미지를 업로드하면 간단하게 파비콘으로 바꿔줍니다.
파비콘을 다운받거나, 직접 사용가능한 링크도 제공합니다.

2-1. 일반 웹페이지에 적용하기
img / favicon 폴더를 준비한후 파일을 업로드 합니다.
<head></head> 사이에 아래 코드를 넣습니다.

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
<link rel="manifest" href="/img/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

2-2. 그누보드5 적용하기
그누보드5 / img / favicon 폴더를 준비한후 파일을 업로드 합니다.
head.sub.php 에 아래 내용을 추가합니다.

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="57x57" href="<?php echo G5_IMG_URL; ?>/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="<?php echo G5_IMG_URL; ?>/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo G5_IMG_URL; ?>/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="<?php echo G5_IMG_URL; ?>/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo G5_IMG_URL; ?>/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="<?php echo G5_IMG_URL; ?>/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo G5_IMG_URL; ?>/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="<?php echo G5_IMG_URL; ?>/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo G5_IMG_URL; ?>/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="<?php echo G5_IMG_URL; ?>/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo G5_IMG_URL; ?>/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="<?php echo G5_IMG_URL; ?>/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo G5_IMG_URL; ?>/favicon/favicon-16x16.png">
<link rel="manifest" href="<?php echo G5_IMG_URL; ?>/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="<?php echo G5_IMG_URL; ?>/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

3. IE 6 브라우저에서 Favicon 이 보이지 않는 문제

변환한 이미지 화일 종류에 상관없이 파이어폭스에서는 파비콘이 잘 나타납니다.
하지만 IE에서는 문제가 많습니다. IE6는 자체버그때문에 파비콘이 잘 나타나질 않습니다.
IE7에서는 bmp화일만을 인식하는 것 같습니다. 즉, bmp화일을 ico로 바꿔야한다는 거죠.
만약 파비콘을 올리셨는데 파이어폭스에서는 파비콘이 나타나고 IE7에서는 나타나지 않는다면 그 이유는 이 코드가 맞지 않기 때문일 것입니다.

포토샵 플러그인 중에 ico로 저장해주는 플러그인을 사용하면, 포샵으로 만든 ico는 IE코드에 맞게 생성됩니다. 투명 배경도 가능합니다. bmp에서 변환된 ico는 bmp가 투명배경이 안되기 때문에 뒤에 흰색의 여백이 남습니다. 하지만 투명배경의 이미지를 만들어 놓고 포토샵에서 ico로 저장하면 투명배경이 그대로 유지됩니다.

4. 파비콘을 만들어주는 사이트모음
https://converticon.com
https://www.happyjung.com/lecture/710
https://www.favicon-generator.org
http://www.degraeve.com/favicon
http://favicon.htmlkit.com

참고사이트
http://mwultong.blogspot.com/2007/01/favicon-site-icon-html-tag-faviconico.html
http://www.w3.org/2005/10/howto-favicon
http://paperinz.com/955
http://appsperancekr.tistory.com/27

댓글목록

등록된 댓글이 없습니다.

80	HTML 19412 2011-11-24 20:03 [웹접근성] 건너뛰기 링크(Skip Navigation)란?
79	HTML 16188 2011-10-26 23:33 말풍선 레이어 팝업
78	HTML 24426 2011-08-17 19:03 ~ 2017-02-16 00:00 viewport 모바일 화면에서 화면에 보여질 줌 사이즈 및 초기 설정
77	HTML 21160 2011-08-02 21:24 ~ 2020-10-15 15:20 [JS/PHP/ASP] 브라우저 정보로 홈페이지 이동하기
76	HTML 25148 2011-01-04 23:03 textarea에 줄바꿈 금지와 글자수 제한
75	HTML 16541 2010-11-08 18:01 ~ 2014-04-30 00:00 웹페이지 혹은 프레임 생성시 scrolling 을 제어
74	HTML 15393 2010-03-30 21:33 autocomplete 자동완성기능
73	HTML 29439 2010-03-30 19:43 NOBR 태그를 웹표준에 적합하게 사용하기
72	HTML 19422 2009-10-08 12:07 ~ 2021-11-09 15:48 [웹폰트] 홈페이지 적용하기
71	HTML 14937 2009-09-16 23:32 ~ 2009-09-17 00:00 DIV vs. TABLE
70	HTML 11418 2009-09-11 07:26 [웹접근성] 사용자가 반복적인 링크를 무시할 수 있는 방법을 제공하십시오.
69	HTML 10051 2009-08-04 11:23 [웹접근성] 웹 접근성 품질마크 (사용자 심사) (준비중)
68	HTML 10630 2009-08-04 11:22 웹 접근성 품질마크 (전문가심사) (준비중)
67	HTML 11870 2009-08-03 20:40 label (양식에 식별할 수 있는 텍스트 제공)
66	HTML 14460 2009-07-04 18:33 웹표준, 웹접근성 교육 플로우챠트
65	HTML 18443 2009-05-22 10:16 이미지의 색상을 내맘대로
64	HTML 23790 2009-05-20 18:42 Textarea 속성
63	HTML 26238 2009-04-30 12:01 ~ 2013-01-13 00:00 HTTP 406 승인 금지
열람	HTML 35177 2009-04-25 16:01 ~ 2021-05-11 09:04 Favicon (파비콘;사이트 아이콘) 만들기, 넣는 법
61	HTML 12263 2009-04-25 12:17 글꼴의 단위에 따른 크기 비교표

Favicon (파비콘;사이트 아이콘) 만들기, 넣는 법 > 기술자료

사이트 내 전체검색