HTML Favicon (파비콘;사이트 아이콘) 만들기, 넣는 법
페이지 정보
본문
브라우저 주소창의 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
이런 아이콘을 파비콘(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
댓글목록
등록된 댓글이 없습니다.