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

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

페이지 정보

작성자 관리자1 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
댓글 0건 조회 35,192회 작성일 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

댓글목록

등록된 댓글이 없습니다.

701	Adobe 15930 2009-04-25 18:12 [포토샵] DMC-LX3 RW2 파일 CS4용 플러그인
700	Adobe 19606 2009-04-25 17:05 [포토샵] ico(파비콘)로 저장해주는 플러그인
열람	HTML 35192 2009-04-25 16:01 ~ 2021-05-11 09:04 Favicon (파비콘;사이트 아이콘) 만들기, 넣는 법
698	HTML 12271 2009-04-25 12:17 글꼴의 단위에 따른 크기 비교표
697	전자결제 29413 2009-04-25 11:12 [이니시스] 결제페이지 제작시 입력 필드 및 결제 완료후 리턴 값
696	HTML 13305 2009-04-24 09:09 ~ 2009-09-09 00:00 [웹접근성] 표준 테그
695	Adobe 20385 2009-04-24 08:38 ~ 2013-11-14 00:00 [드림위버/웹접근성] swf 파일 HTML 삽입시 웹표준에 적합하게 사용하기
694	HTML 14440 2009-04-23 20:15 [웹접근성] KADO-WAH Rule Information
693	일반 14973 2009-04-23 12:42 ~ 2009-04-25 00:00 오토런(AutoRun) 시디(CD) 만들기
692	HTML 26219 2009-04-23 00:36 cursor:hand 와 cursor:pointer 어느게 표준일까?
691	그누보드 15958 2009-04-22 23:11 [G4] [웹접근성] 각종 코드 xhtml 적용하기
690	일반 23018 2009-04-21 11:40 [Thunderbird] 썬더버드가 지원하는 최대 인박스 최대 용량은
689	JavaScript 19204 2009-04-20 12:55 상태표시줄에 "작업을 마쳤으나 페이지에 오류가 있습니다" 메시지 나올때
688	Adobe 15080 2009-04-18 03:20 [Dremaweaver / 웹접근성] 웹 접근성 검사 (Accessibility, WCAG 1.0 & Sec…
687	Adobe 13876 2009-04-18 02:59 [드림위버/웹접근성] CSS 유효성 및 Cross Browsing 검사
686	Adobe 14419 2009-04-18 02:43 [드림위버/웹접근성] XHTML 유효성 검사 (XHTML Validation Check)
685	Adobe 14375 2009-04-18 00:45 [드림위버/웹접근성] 접근성 대화상자 (Accessibility Dialog Box)
684	Adobe 14878 2009-04-18 00:35 ~ 2021-09-01 13:33 [드림위버/웹접근성] DTD 관리 (DTD Setting & DTD Switching)
683	ClassicASP 13354 2009-04-17 20:08 윈도우즈에서 리눅스/유닉스의 crypt() 함수 사용하기
682	PHP 15746 2009-04-17 19:59 ~ 2010-03-21 00:00 crypt() - 문자열을 DES-암호화 한다.

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

사이트 내 전체검색