Development Tip

파비콘은 32x32 또는 16x16이어야합니까?

yourdevel 2020. 9. 30. 11:37
반응형

파비콘은 32x32 또는 16x16이어야합니까?


단일 이미지를 일반 파비콘과 iPhone / iPad 친화적 인 파비콘으로 사용하고 싶습니다.

이것이 가능한가? 일반 브라우저 파비콘으로 연결하면 iPad 친화적 인 72x72 PNG 크기가 조정됩니까? 아니면 별도의 16x16 또는 32x32 이미지를 사용해야합니까?


IE의 경우 Microsoft는 favicon.ico 파일에 포함 된 16x16, 32x32 및 48x48을 권장합니다 .

iOS의 경우 Apple은 iOS 8을 실행하는 최신 기기의 경우 최대 180x180의 특정 파일 이름과 해상도를 권장합니다 .

Android Chrome은 주로 매니페스트를 사용하며 Apple 터치 아이콘에도 의존합니다.

Windows 8.0의 IE 10에는 PNG 그림과 배경색이 필요 하고 Windows 8.1 및 10의 IE 11은 .txt라는 전용 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 Metro 타일
72 x 72 – iPad 터치 최대 iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone 레티 나 터치 최대 iOS6
120 x 120 – iPhone 레티 나 터치 iOS7
128 x 128 – Chrome 웹 스토어 앱, Android
144 x 144 – 고정 사이트 용 IE10 Metro 타일, 최대 iOS6 iPad 레티 나
150 x 150 – Win 8.1 Metro 타일
152 x 152 – iPad 레티 나 터치 iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 와이드 Metro 타일
310 x 310 – Win 8.1 Metro 타일


나는 브라우저가 큰 아이콘을 어떻게 확장하는지 확실하지 않지만 W3C는 다음을 제안합니다 1 :

선택한 이미지의 형식은 8 비트 또는 24 비트 색상을 사용하는 16x16 픽셀 또는 32x32 픽셀이어야합니다. 이미지 형식은 PNG (W3C 표준), GIF 또는 ICO 중 하나 여야합니다.


1 w3c.org : 사이트에 Favicon을 추가하는 방법 (개발 중 초안) .


실제로 모든 브라우저에서 파비콘이 제대로 작동하도록하려면 올바른 크기와 형식으로 10 개 이상의 파일을 추가해야합니다.

제 친구와 저는 이것만을위한 앱을 만들었습니다! faviconit.com 에서 찾을 수 있습니다.

우리가 이렇게했기 때문에 사람들이이 모든 이미지와 올바른 태그를 손으로 만들 필요가 없습니다. 모든 이미지를 만들어 저를 많이 괴롭히는 데 사용되었습니다!


동일한 파일에 여러 크기의 아이콘이있을 있습니다 . 나는 일상적으로 .ico48, 32, 16 픽셀의 파비콘 ( 파일)을 만듭니다 . 원하는 크기의 이미지를 추가 할 수 있습니다. 문제는 아이폰이 ico파일을 사용할 것인가?

ico투명도도 지원하지만 PNG와 같은 알파 채널인지 잘 모르겠습니다. 켜져 있거나 꺼져있는 GIF와 비슷할 것입니다.


FaviconWikipedia 기사에 따르면 Internet Explorer는 favicon에 대한 ICO 형식 만 지원합니다.

나는 두 개의 다른 아이콘을 고수 할 것입니다.


파비콘은 16x16 또는 32x32 일 필요는 없습니다. 80x80 또는 100x100 크기의 파비콘을 만들 수 있습니다. 두 값이 동일한 크기인지 확인하고 너무 크거나 작게 만들지 말고 적당한 크기를 선택하십시오.


걱정되는 각 해결 방법에 대해 별도의 파일이 필요합니다. 캠페인 모니터에는 각 iOS 기기에 대한 아이콘을 만들고 구현하는 방법을 설명하는 정말 좋은 기사가 있습니다.

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

참고 URL : https://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32x32-or-16x16

반응형