Favicons-모범 사례

나는 Favicons, Touch 아이콘 및 이제 Tile 아이콘에도 필요한 다양한 크기와 형식에 대해 머리를 돌리려고 노력하고 있습니다.

나는이 게시물을 읽었다 : http://www.jonathantneal.com/blog/understand-the-favicon 그러나 나는 모든 장치와 브라우저에서 합리적으로 좋게 보일 어떤 것을 사용해야하는지에 대해서는 여전히 약간 흐릿하다> = IE8 .

다음을 만들어야한다고 생각합니다.

ICO
favicon.ico (32x32)

PNG
favicon.png (96x96)

타일 ​​아이콘
tileicon.png (144x144)

https://github.com/h5bp/html5-boilerplate/issues/1367을 기반으로 한 Apple Touch Icon
apple-touch-icon-precomposed.png (152x152)

...이 코드를 사용하여 서비스를 제공합니까?

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

내가 놓친 것이 있습니까?

이것이 IE 10에 적용되는지 확실하지 않습니까?

Favicon은 소리보다 훨씬 더 복잡합니다. 10 년 전만해도 favicon.ico필요한 아이템이었습니다. 그런 다음 터치 아이콘이 있었고 다양한 iOS 장치 화면 해상도로 인해 여러 개의 터치 아이콘이 있었고 Windows 용 타일 아이콘이있었습니다.

여기에있는 일부 답변은 매우 포괄적이고 압도적입니다 (이 모든 것은 파비콘에만 해당합니까?). 그러나 Windows 용 310x310 타일 아이콘이 558x558 권장됨을 나타내는 데 실패 합니다 . 그리고 몇 달 전에 작성 되었으므로 Android Chrome M39 의 최신 매니페스트 또는 OS X El Capitan의 Safari 용 고정 탭 SVG 아이콘에 대해서는 언급하지 않습니다 .

플랫폼 별 디자인은 어렵지만 간과 된 또 다른 주제입니다. 예를 들어, 파비콘은 종종 투명합니다. 그러나 iOS는 투명성을 지원하지 않습니다 (예를 들어, SO 터치 아이콘 과 iPhone의 홈 화면에 SO를 추가 할 때 얻는 결과를 비교하십시오 ).

이러한 이유로 favicon에 대한 모범 사례라고 생각하는 것은 수동으로 생성 하지 않는 것입니다. 대신 도구를 사용하여 전체 프로세스를 자동화하고 플랫폼 지침을 시행하십시오.

RealFaviconGenerator 를 사용하는 것이 좋습니다 . 작업을 완료하는 데 필요한 모든 그림과 HTML 코드를 생성합니다.

• favicon.ico 데스크톱 브라우저 용 및 PNG 아이콘
• iOS 및 Android 장치 용 Apple 터치 아이콘
• Windows 8 타일
• OS X El Capitan의 Safari 용 고정 탭 아이콘

예를 들어 msapplication-TileImage그림과 마크 업을 생성 할 뿐만 아니라 browserconfig.xmlIE11에서 지원하는 최신 파일 도 생성합니다 . 또한 몇 달 전에 Android Chrome 매니페스트 및 Safari OS X El Capitan을 지원하도록 업데이트되었습니다.

전체 공개 : 나는이 사이트의 작성자입니다.

다음은 모바일 및 태블릿 용 favicon의 전체 (내가 아는) 예입니다.

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

IE11의 경우 여기 에 FAQ가 있습니다.

다양한 장치에 대해 설정할 수있는 다양한 아이콘과 스플래시 화면이 있습니다. 이 대답은 그들 모두를 지원하는 방법을 거칩니다.

다음은 내가 정보를 수집 한 위치에 대한 관련 링크와 함께 사용한 일부 스 니펫입니다. ASP.NET MVC Boilerplate 프로젝트 템플릿 에 대한 자세한 내용과 자세한 내용은 내 블로그 를 참조하십시오 (샘플 이미지 파일 포함).

html 헤드에 다음 마크 업을 추가하십시오. 주석 처리 된 섹션은 전적으로 선택 사항입니다. 주석이없는 섹션은 모든 아이콘 사용법을 다루기 위해 권장됩니다. 겁내지 마십시오. 대부분의 경우 도움이되는 의견이 있습니다.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="https://stackoverflow.com/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="https://stackoverflow.com/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="https://stackoverflow.com/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="https://stackoverflow.com/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="https://stackoverflow.com/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="https://stackoverflow.com/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="https://stackoverflow.com/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="https://stackoverflow.com/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="https://stackoverflow.com/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="https://stackoverflow.com/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

내 browserconfig.xml 파일. 위의 전체 설명.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

내 manifest.json 파일. 위의 전체 설명.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

프로젝트의 파일 목록 (위의 메타 태그를 사용하지 않기 위해 일부 파일을 프로젝트의 루트에두기로 결정한 경우 이러한 파일의 이름이 중요합니다) :

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

총 간접비

3KB의 추가 HTML 주석을 제거하면 1.5KB의 스플래시 화면을 지원하지 않는 경우. HTML 콘텐츠에 GZIP 압축을 사용하는 경우 모든 사용자가 요즘 수행해야하는 작업은 요청 당 약 634 바이트의 오버 헤드가 발생하여 모든 플랫폼을 지원하거나 스플래시 화면이없는 446 바이트가됩니다. 개인적으로 IOS, Android 및 Windows 장치를 지원하는 것이 가치가 있다고 생각하지만 귀하의 선택은 옵션을 제공하는 것입니다!

현재 웹 아이콘 / 스플래시 화면 / 설정 상황에 대한 추가 정보

공급 업체별 아이콘, 스플래시 화면 및 웹 브라우저 또는 고정 된 아이콘을 제어하는 ​​특수 태그가있는 이러한 상황은 말도 안됩니다. 완벽한 세상에서 우리는 모든 크기에서보기 좋고 페이지의 루트에 위치 할 수있는 favicon.svg 파일을 사용합니다. 작성 시점에는 FireFox만이이를 지원합니다 ( CanIUse.com 참조 ).

그러나 요즘에는 아이콘이 유일한 설정이 아니며 다른 공급 업체별 설정 (위에 표시됨)이 여러 개 있지만 favicon.svg 파일이 대부분의 사용 사례를 다룹니다.

최신 정보

새로운 Android / Chrome 버전 M39 + 파비콘 / 테마 옵션을 포함하도록 업데이트되었습니다. 흥미롭게도 그들은 Microsoft와 유사한 접근 방식을 사용했지만 XML 대신 JSON 파일을 사용하고 있습니다.

가장 간단한 해결책은 하나 (!) PNG 이미지 (2020 년)를 사용하는 것입니다.

문서 헤드에 다음을 추가하기 만하면됩니다.

<link rel="shortcut icon" type="image/png" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="apple-touch-icon" href="https://stackoverflow.com/img/icon-192x192.png">

마지막 링크는 Apple (홈 화면), 두 번째 링크는 Android (홈 화면), 첫 번째 링크는 나머지 링크입니다.

이 솔루션은 Windows 8/10에서 '타일'을 지원하지 않습니다. 바로 가기, 북마크 및 브라우저 탭의 이미지를 지원합니다.

크기는 Android 홈 화면에서 사용하는 크기와 정확히 일치합니다. Apple 홈 화면 아이콘 크기는 60px (3x)이므로 180px이며 축소됩니다. 다른 플랫폼도 기본 바로 가기 아이콘을 사용하며 축소됩니다.

나는 실제로 동일한 질문을하고 빌드 단계에 통합 될 수 있거나 필요한 자산 및 마크 업 생성을 단순화 할 수있는 간단한 프로젝트를 찾으려고 노력했습니다.

내가 만든 나의 요구 사항을 충족 아무것도 찾을 수 없습니다 faviconbuild 과 아래를 발표 MIT 라이센스를 .

이 프로젝트의 목적은 파비콘을 빌드하고 마크 업을 지원하기 위해 중앙에서 유지 보수가 가능하며 로컬에서 실행 가능한 크로스 플랫폼 유틸리티를 만드는 것입니다. Imagemagick 의 기능을 활용 하므로 플랫폼 용으로 다운로드하거나 릴리스 에서 제공 한 것을 사용해야합니다 . 이것을 상업적 또는 개인 프로젝트에서 자유롭게 사용하거나, 기능 요청을 기여하거나, 제출하거나, 단순히 자신의 유틸리티에 대한 영감의 원천으로 사용하십시오.

이 프로젝트는 Windows 용 배치 파일과 Unix / Mac (또는 Cygwin을 통한 Windows) 용 bash 스크립트로 구성됩니다. 내부 도움말 옵션 -h 또는 --help에서 지원되는 옵션의 전체 목록을 얻을 수 있습니다.

전의:

./faviconbuild.sh -h

두 스크립트 모두 -p 또는 --parsed 옵션으로 재정의 할 수 있는 간단한 텍스트 파일 을 구문 분석합니다 . 이 파일은 기본적으로 실행할 명령 템플릿 일 뿐이므로 필요한 경우 출력을보다 쉽게 ​​사용자 지정할 수 있습니다.

또한 개발에 대한 블로그 게시물 과 bash / batch 스크립팅에 대한 미니 자습서를 게시 했습니다.