파비콘(Favicon) : 웹페이지 상단 탭 아이콘

2017.02.01 13:42|

나리보스|

추천2|

조회수124|

댓글0

길었던 연휴가 끝났습니다! :)

 

보스님들 파비콘에 대해 알고 계신가요?

 

파비콘에 대한 설명이 좋은 페이지가 있어 간단히 정리해보았습니다.

(원문은 하단에 있습니다)

 

파비콘이란

 

: 웹페이지에 접속했을 때, 상단 탭에 보여지는 아이콘 입니다.

 

 

 

파비콘의 기본설정

 

: 대부분 아이콘(icon)파일의 형태로 도메인의 루트 디렉토리에 위치해 있습니다.

 

 

 

favicon.ico 파일은 16컬러 24비트 파일 알파 투명도 포맷의 16x16 아이콘(ICON)파일 입니다.

최근에는 32x32를 지원하는데, 주요 인기의 브라우저들에게 적절하게 축소되어 표현해줍니다.

 

ICO 파일 크기 추천

 

16x16 : IE9 주소 표시줄, 고정된(pinned) 사이트의 점프목록/툴바/오버레이

32x32 : IE의 새로운 탭 페이지, 윈도우7 이상에서 작업 표시줄 단추, Safari 나중에 읽기 사이드바

48x48 : 윈도우즈 사이트 아이콘

 

파비콘과 IE 브라우저 유의사항

 

1. IE8~10은 페이지의 첫 방문에 바로 파비콘을 표현해 줍니다.

2. IE7은 첫번째 방문은 무시하고 재방문시에 파비콘을 표시해 줍니다.

3. IE6은 사이트를 북마크 한 후 브라우저를 다시 열면 표시해 줍니다.

 

파비콘 PNG 파일 지원 사항

 

favicon.ico > favicon.png 

 

: Chrome, Firefox, Opera7+, Safari4+ 는 모두 PNG 파비콘을 지원하지만 Chrome과 Safari는 ICO 파비콘이 함께 지정되어 있으면 선언된 순서에 상관없이 ICO 파비콘을 사용합니다.

즉, PNG 파비콘을 지원하지 않는 IE를 위해 ICO 파일을 사용하게 되는 순간, Chrome과 Safari는 PNG 파비콘을 무시하게 됩니다.

 

.

.

.

 

자세한 내용은 아래 링크에서 확인해보세요 :D

 

출처 : http://webdir.tistory.com/337

2
0

하트 아이콘종우님 외 1명이 추천했습니다.

댓글 0
소셜로그인
번호제목작성자등록일추천조회
119다수엑셀파일을 하나로 합치기(무료프로그램)[3] 

전옥철

17.02.16373
118기존 임대몰에서 몰인몰로의 이전 문의드립니다.[4] 

라임엘프

17.02.131116
117모바일에 HTML5 적용하면 문제가 될까요?[1] 

보스톡4

17.02.05282
116파비콘(Favicon) : 웹페이지 상단 탭 아이콘 

나리보스

17.02.012125
BEST카페24 SNS 로그인 연동! 가능합니다![7] 

나리보스

17.01.169732
114자사몰 SNS 연동 로그인 기능 문의드립니다.[3] 

CHLOE_SK

17.01.161123
113카페24로 쇼핑몰제작시 페이스북 픽셀[5] 

디스트

17.01.142245
BESTHTML 태그 정리[9] 

나리보스

17.01.1318991
110크롬 개발자 도구를 사용하여 홈페이지 수정요청하기[4] 

나리보스

17.01.060406
107홈페이지 리뉴얼을 제로보드 xe로 하려고 합니다.[7] 

맘스퀸

16.12.052264
106웹페이지에 2개의 이미지를 좌우로 나란히 붙이기...도와..[8] 

uniquest

16.11.242270
105홈페이지 리뉴얼 작업하려고 합니다.[6] 

맘스퀸

16.11.071641
104미샤닷컴 어디서 만들었는지 알 수 있을까요? 

sinun

16.11.011360
102굿엠디 써보신 분들 계시나요? 

groovy38

16.10.191291
99메이크샵과 카페24의 차이에 대한 간단한 대화 

보스톡

16.09.233597
98고도몰5를 쓰려고 하는데 DB 연동이 가능할까요? 

보스톡

16.09.230504
97방문자 카운팅 프로그램 삽입으로 홈페이지 먹통이 될 .. 

보스톡

16.09.220290
96카페24 아이콘과 할인가 일괄 적용하는 방법 

보스톡

16.09.220307
95웹사이트 템플릿 참조 사이트 추천해주세요. 

보스톡

16.09.220249
94고도몰로 제작한 쇼핑몰인데 좀 느린 것 같아요. 도와주..[1] 

보스톡

16.09.220347
123456 다음 페이지로 이동 마지막 페이지로 이동
top
아이보스 배너광고 영역