favicon.png vs favicon.ico-ICO 대신 PNG를 사용해야하는 이유는 무엇입니까?

442

PNG가 더 일반적인 이미지 형식이라는 사실 외에 favicon.png와 favicon.ico를 선호하는 기술적 이유가 있습니까?

PNG 선호 아이콘을 모두 지원하는 최신 브라우저를 지원하고 있습니다.

png favicon ico

— 존 갤러웨이
소스

233

이 글타래에서 다양한 다른 사람들의 많은 업데이트와 노트로 인해 답변이 교체되었고 (커뮤니티 위키가 됨)

ICO와 PNG는 모두 알파 채널 기반의 투명성을 허용합니다.
ICO는 기존 브라우저 (예 : IE6)와의 하위 호환성을 허용합니다
PNG는 투명성에 대한 광범위한 툴링 지원을 제공하지만 @mercator에서 언급 한 Dynamic Drive 툴 및 Photoshop 플러그인 과 같이 알파 채널 ICO를 생성하는 툴도 찾을 수 있습니다 .

자세한 내용은 다른 답변을 참조하십시오.

— 앰버
소스

78

ICO는 또한 알파 채널을 허용합니다

— Álvaro González

58

-1 ICO는 풀 알파 채널을 포함한 여러 해상도를 지원합니다. 그런데 1 비트 알파는 "투명도"라고합니다. ICO가 가진 유일한 한계는 길이가 256보다 크거나 같은 아이콘 (모든 방향) 이었지만 여러 번 극복되었습니다.

— Christian

26

-1 .ico는 하나의 파일에서 여러 해상도를 허용합니다 (예 : 16x16 및 32x32). 따라서 바탕 화면에 바로 가기를 만들 때 아이콘이 그대로 유지됩니다.

— gagarine

4

대부분의 브라우저는 링크 된 링크보다 루트에서 favicon.ico를 선호합니다. 귀하의 솔루션으로 대부분의 브라우저는 연결된 png 대신 투명하지 않은 .ico를 선택합니다 .

— Lode

@lode 투명 ico 대신 투명하지 않은 ico를 선택하는 이유는 무엇입니까?

— Rob Grant

367

모든 최신 브라우저 (Chrome 4, Firefox 3.5, IE8, Opera 10 및 Safari 4에서 테스트)는를 favicon.ico통해 바로 가기 아이콘을 지정하지 않은 한 항상 요청합니다 <link>. 따라서 명시 적으로 지정하지 않으면 favicon.ico404를 피하기 위해 항상 파일을 갖는 것이 가장 좋습니다. Yahoo! 작고 캐시 가능하도록 제안합니다.

알파 투명도를 위해 PNG를 사용할 필요도 없습니다. ICO 파일 은 알파 투명도 (예 : 32 비트 색상)를 지원하지만 거의 모든 도구를 사용하여 만들 수는 없습니다. 나는 정기적으로 Dynamic Drive의 FavIcon Generator 를 사용 favicon.ico하여 알파 투명도를 가진 파일 을 만듭니다 . 내가 아는 유일한 온라인 도구입니다.

또한 만들 수 있는 무료 Photoshop 플러그인 도 있습니다.

— 메르카토르
소스

6

이 다이내믹 드라이브 도구를 잘 알려주세요! 즉시 북마크. 감사!

— Marcos Buarque 3:19에

3

다시 도구, 그것은 사실이 아닙니다; 몇 가지 아이콘 디자인 도구가 있습니다. 나는 과거에 간단한 책을 썼습니다.

— Christian

4

포토샵에 대한 $ (650) 달러를하지 않는 사람들을 위해, 당신은 pixlr.com (무료)을 생성, 편집 및 :) 전체 레이어 및 투명 .png 파일 저장 사용할 수 있습니다

— 스콧 B

3

@Pacerier .icoPS로 편집하는 것은 매우 어렵습니다 . 그리고 그렇게해도 최종 결과는 .bmp너무 나쁘지만 더 나은 형식 이라고 생각할 것 입니다 (많은 메타 데이터를 추가하여 엄청난 고통을 다시 편집합니다).

— Christian

4

@mikevoermans : 여전히 PNG로 읽습니다. 대부분의 최신 브라우저는 파일 확장자에 관심이 없습니다. BTW, 이것이 가장 좋은 대답이며 받아 들여 져야합니다.

— rvighne

48

.png를 파일이 좋은,하지만 질환자 파일은 알파 채널 투명성을 제공, 너무, 플러스 그들은 당신에게 이전 버전과의 호환성을 제공합니다.

예를 들어 StackOverflow 가 어떤 유형을 사용 하는지 살펴보십시오 (투명 함).

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png">

apple-itouch는 웹 사이트에 대한 바로 가기를 만드는 iPhone 사용자를위한 것입니다.

— Wouter van Nifterick
소스

16

PNG는 또한 알파 채널을 제공 할 수 있습니다

— Álvaro González

10

그래, 내 요점은 ico가 favicon으로 png가 할 수있는 모든 작업 (알파-투명도)을 수행 할 수 있다는 것입니다. 또한 0 년 이후 모든 브라우저에서 지원됩니다.

— Wouter van Nifterick

위키 백과에 따르면 인터넷 익스플로러는 다음과 같은 라인을 지원하지 못할 것입니다 : <link rel = "icon"type = "image / vnd.microsoft.icon"href = " example.com/image.ico "/>

— frankster

2

웹 사이트가 0 년 이후 브라우저를 지원하지 않을 가능성이 높습니다. 왜 귀찮게합니까? IE6에서 최신 웹 사이트를 사용해보고 어떤 일이 발생하는지 확인하십시오.)

— Dominic

26

* .ico 파일의 이론적 장점은 둘 이상의 아이콘을 보유 할 수있는 것보다 컨테이너라는 것입니다. 예를 들어 레거시 시스템의 알파 채널과 16 색 버전의 이미지를 저장하거나 32x32 및 48x48 아이콘을 추가 할 수 있습니다 (예 : Windows 탐색기로 링크를 끌 때 표시됨).

그러나이 좋은 아이디어는 브라우저 구현과 충돌하는 경향이 있습니다.

— 알바로 곤살레스
소스

이와 관련하여 IE9는 또한 큰 아이콘을 사용하여 win7 작업 표시 줄에 고정됩니다. stackoverflow.com/questions/3723715/…

— GazB

음, 이론적? Windows 7과 함께 제공된 동일한 아이콘을 Windows 95에서 8 비트 컬러 모드로 사용할 수 있습니다. 나는 그것이 실용적이라고 생각한다.

— Christian

이 답변은 2009 년에 작성되었습니다. 당시의 브라우저 장면은 현재와 크게 다릅니다.

— Álvaro González

15

PNG에는 두 가지 장점이 있습니다. 크기가 작고 즐겨 찾기 아이콘을 제외하고는 더 널리 사용되고 지원됩니다. ICO 전에 언급했듯이 여러 크기의 아이콘을 가질 수 있으며 이는 데스크탑 응용 프로그램에는 유용하지만 웹 사이트에는 그리 크지 않습니다. 응용 프로그램의 루트에 favicon.ico를 넣는 것이 좋습니다. 웹 사이트 페이지 헤드에 액세스 할 수있는 경우 태그를 사용하여 png 파일을 가리 킵니다. 따라서 오래된 브라우저는 favicon.ico와 최신 브라우저는 png를 표시합니다.

Png 및 Icon 파일을 만들려면 The Gimp을 추천 합니다.

— 프 몰리
소스

3

웹 사이트에는 그리 많지 않습니까? 모든 사람이 망막 같은 디스플레이를 사용할 때까지 기다리십시오. 갑자기 그들이

— 즐겨 찾기 아이콘

1

우리는 파비콘에 대해 이야기하고 있기 때문에 지원 문제는 실제로 당신이 말하는 것과 반대입니다

— David Heffernan

1

+1 원래 질문을 해결하고 투명성에 얽매이지 않습니다. 또한 응용 프로그램 언급 하지 지원 질환자 형식을.

— kovacsbv

12

Google+와 같은 일부 소셜 도구는 간단한 방법을 사용하여 외부 링크에 대한 파비콘을 가져와 http://your.domainname.com/favicon.ico를 가져옵니다.

HTML 컨텐츠를 프리 페치하지 않으므로 <link>태그가 작동하지 않습니다. 이 경우 mod_rewrite 규칙을 사용하거나 파일을 기본 위치에 배치 할 수 있습니다.

— jdavid.net
소스

1

그것이 사실인지 거짓인지 모르지만 그것은 내가 가지고있는 png 외에도 루트로 favicon.ico를 작성하는 것이 결정적인 논거였습니다.

— Alexei Tenitski

2

나는 구글 플러스 팀에있는 폴 린더 너를 통해 telly.com의 직장에서 이것을 알고 있습니다. plus.google.com/117259934788907243749/about

— jdavid.net

파비콘을 루트에 배치하는 것이 사실상 표준 이므로이 답변에서 언급 한 것과 같은 이유로이를 준수 할 것입니다.

— Stijn de Witt

8

ico는 png 일 수 있습니다 .

보다 정확하게는 모든 사람이 ico와 강력하게 연관시키는 일반적인 비트 맵 + 알파 대신이 최소 컨테이너 형식 내에 하나 이상의 png를 저장할 수 있습니다.

지원은 구식이며 Windows Vista (2007)에 나타나며 아이콘 편집 소프트웨어는 아니지만 브라우저에서 잘 지원됩니다.

유효한 모든 png (헤더 포함) 앞에 6 바이트 ico 헤더 와 16 바이트 이미지 디렉토리 가 추가 될 수 있습니다 .
김프는 기본적으로 지원합니다. ico로 내보내고 "압축 (PNG)"을 선택하십시오.

— 아드리아
소스

3

신뢰할 수있는 IE6 호환성을 원한다면 어떠한 경우에도 PNG를 사용하지 마십시오.

— 알케
소스

19

IE6의 디렉토리 트리에있는 ico와 <link>최신 브라우저의 페이지 코드에있는을 통해 지정된 PNG를 모두 사용할 수없는 이유는 없습니다 .

— Amber

10

왜 둘 다 사용하겠습니까? ico를 만드는 것을 귀찮게한다면 png를 사용하면 어떤 이점이 있습니까? 분명히 추가 작업과 추가 코드 일뿐입니다.

— Mr_Chimp

@Mr_Chimp png는 개방형 표준이며 더 미래 지향적입니까? 한 줄의 추가 마크 업입니다.

— Wyatt8740

9

안녕 @ Orcra-나는 당신이 ~ 8 년 전에이 답변을 썼을 때 이것을 읽었을 때 IE6와 같은 것들을 고려해야했다면 너무 재밌지 않을 것이라고 생각합니다. :) 오늘 뭔가 관련

— aehlke

3

@aehike 당신은 공정한 포인트를 가지고 있습니다. 타임 스탬프를 확인하지 않은 것은 좋지 않습니다.

— Orcra

0

가치있는 것을 위해 나는 이것을한다 :

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

그리고 나는 여전히 favicon.ico를 루트로 유지합니다.

— s3c
소스