답변:
IE의 경우 favicon.ico 파일에 16x16, 32x32 및 48x48이 포함되어있는 것이 좋습니다 .
iOS의 경우 Apple은 iOS 8을 실행하는 최신 장비의 경우 최대 180x180의 특정 파일 이름과 해상도를 권장합니다 .
Android Chrome은 주로 매니페스트를 사용하며 Apple touch 아이콘도 사용합니다.
Windows 8.0의 IE 10에는 PNG 그림과 배경색이 필요 하고 Windows 8.1 및 10의 IE 11에는이라는 전용 XML 파일에 선언 된 여러 PNG 그림이 허용됩니다browserconfig.xml .
Mac OS X 용 Safari El Capitan은 고정 탭용 SVG 아이콘을 소개합니다 .
일부 다른 플랫폼 은 Google TV 의 96x96 그림 또는 Opera Coast 의 228x228 그림 과 같이 다양한 해상도의 PNG 파일을 찾습니다 .
완전한 참조 를 위해이 파비콘 그림 목록 을 보십시오 .
TLDR :이 파비콘 생성기 는 이러한 모든 파일을 한 번에 생성 할 수 있습니다. 생성기는 WordPress 플러그인 으로 구현할 수도 있습니다 . 전체 공개 : 저는이 사이트의 저자입니다.
여기에 나열된 최신 정보가 표시되지 않으므로 여기로 이동하십시오.
지금이 질문에 대답하기 위해 아이콘이 어디에서나 멋지게 보이려면 2 개의 파비콘이 그렇게하지 않습니다. 아래 크기를 참조하십시오 :
16 x 16 – 브라우저의 표준 크기
24 x 24 – 사용자 인터페이스의 IE9 고정 사이트 크기
32 x 32 – IE 새 페이지 탭, Windows 7+ 작업 표시 줄 단추, Safari 읽기 목록 사이드 바
48 x 48 – Windows 사이트
57 x 57 – iPod touch , iPhone 최대 3G
60 x 60 – iPhone 최대 iOS7
64 x 64 – Windows 사이트, Safari 리더 목록 사이드 바 HiDPI / Retina
70 x 70 – Win 8.1 메트로 타일
72 x 72 – iPad iOS 최대 iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone retina touch 최대 iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome 웹 스토어 앱, Android
144 x 144 – IE10 고정 사이트 용 메트로 타일, iOS6까지 iPad retina
150 x 150 – 승리 8.1 메트로 타일
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – 승리 8.1 와이드 메트로 타일
310 x 310 – 승리 8.1 메트로 타일
브라우저가 큰 아이콘을 확장하는지 여부는 확실하지 않지만 W3C는 다음 1을 제안합니다 .
선택한 이미지의 형식은 8 비트 또는 24 비트 색상을 사용하는 16x16 픽셀 또는 32x32 픽셀이어야합니다. 이미지 형식은 PNG (W3C 표준), GIF 또는 ICO 중 하나 여야합니다.
[current year]CSS만으로 할 수있는 일이 충분히 놀랍고 도대체 대답을 거의 놓쳤을 때 왜 지옥에서 여전히 헛소리 제한을 처리 해야하는지 혼란스러워했습니다 . 나는 원하는 것을 사용하고 무언가를 지원하지 않으면 표준에 따라 문제가됩니다.
실제로 모든 브라우저에서 즐겨 찾기 아이콘이 제대로 작동하게하려면 올바른 크기와 형식으로 10 개 이상의 파일을 추가해야합니다.
내 친구와 나는 이것을 위해 앱을 만들었습니다! faviconit.com 에서 찾을 수 있습니다
우리는 이렇게했습니다. 그래서 사람들은이 이미지들과 올바른 태그를 손으로 직접 만들 필요가 없습니다.
동일한 파일에 여러 크기의 아이콘을 가질 수 있습니다 . 나는 일반적으로 .ico48, 32 및 16 픽셀의 파비콘 ( 파일)을 만듭니다 . 원하는 크기의 이미지를 추가 할 수 있습니다. 문제는 아이폰이 ico파일을 사용할 것인가이다.
ico또한 투명도를 지원하지만 PNG와 같은 알파 채널인지 확실하지 않습니다. 켜져 있거나 꺼져있는 GIF와 비슷할 것입니다.
.ico파일 에 포함시키는 방법을 보여줍니다 .
Favicon 의 Wikipedia Article에 따르면 Internet Explorer는 favicon에 대해 ICO 형식 만 지원합니다.
나는 두 개의 다른 아이콘을 고수 할 것입니다.
파비콘은 16x16 또는 32x32 일 필요는 없습니다. 80x80 또는 100x100 인 즐겨 찾기 아이콘을 만들 수 있습니다. 두 값의 크기가 같아야하며 너무 크거나 작게 만들지 말고 합리적인 크기를 선택하십시오.
내가 두려워하는 각 해상도마다 별도의 파일이 필요합니다. 각 iOS 기기에 대해 아이콘을 생성하고 구현 한 방법을 설명하는 캠페인 모니터에 대한 유용한 기사가 있습니다.
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
내가 배운 것처럼, 그 몇 가지 솔루션 중 어느 것도 완벽하지 않습니다. 파비콘 생성기를 사용하는 것은 실제로 좋은 솔루션이지만 그 수는 압도적이며 선택하기가 어렵습니다. 웹 사이트를 PWA로 사용하려면 Google 개발자가 명시한 512x512 아이콘도 제공해야한다고 덧붙이고 싶습니다 .
192px 및 512px 버전을 포함한 아이콘
그 기준을 시행하는 많은 파비콘 생성기를 만나지 못했습니다 ( 파이어베이스는 수행 하지만 수행하지 않는 많은 것들이 있습니다). 따라서 솔루션은 다른 많은 솔루션과 혼합되어 있어야합니다.
16x16, 32x32가 여전히 관련이 있는지 2020 년 초에 알 수 없습니다. 예를 들어, 사용자가 여전히 어떤 이유로 IE를 사용하는 경우와 같은 특정 상황에서 여전히 중요하다고 생각합니다 (이는 여전히 어떤 이유로 새로운 브라우저로 마이그레이션하지 않는 일부 개인 회사에서 발생합니다)