웹 사이트 용 Apple Touch 아이콘

Question 1

지금까지 나는 다음과 같이 내 머리에 Apple Touch 아이콘 라인을 포함했습니다.

<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png">

그러나 Q & A에서 "apple-touch-icon의 정확한 픽셀 크기는 무엇입니까?" Apple의 지침에 따라 이제 세 개의 이미지가 필요하다고 인정되는 답변에 명시되어 있습니다.

그렇다면 코드의 헤드 섹션에이를 삽입하는 방법은 무엇입니까?

Question 2

미니멀리스트 솔루션-권장

일반적인 관행은 예상되는 가장 높은 해상도 인 단일 180x180 아이콘을 만들고 iOS 장치가 필요에 따라 축소하도록하는 것입니다. 다음과 같이 선언됩니다.

<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

철저한 솔루션- 권장 하지 않음

Apple 사양 은 iOS7의 새로운 크기를 지정합니다.

60x60
76x76
120x120
152x152

또한 iOS8의 경우 :

180x180

또한 미리 구성된 아이콘은 더 이상 사용되지 않습니다.

결과적으로 새 장치 (iOS7 실행)와 이전 장치 (iOS6 이하)를 모두 지원하기위한 일반 코드는 다음과 같습니다.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

또한 apple-touch-icon.png라는 180x180 사진을 만들어야합니다 .

iOS는 /apple-touch-icon-76x76.pngHTML 코드에서 흥미로운 내용을 찾지 못한 경우 (IE가를 사용하는 것과 약간 비슷 함)과 같은 URL을 찾습니다 /favicon.ico. 따라서 위에있는 파일 이름을 유지하는 것이 중요합니다. Android / Chrome도 이러한 사진을 사용하고 있다는 사실을 고려하는 것도 중요합니다 .

이 파비콘 생성기 가이 모든 그림을 한 번에 만들 수 있다는 것을 알고 싶을 것입니다 . 전체 공개 : 나는이 사이트의 작성자입니다.

Question 3

여기에 도움이되기를 바랍니다.

Apple이 미적 부분을 수행하기를 원하면 (광택을 추가) <head>태그 에 다음을 입력 합니다.

<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />

Apple이 광택없이 이미지를 표시하도록 이미지 를 사전 구성 하려면 다음을 수행합니다.

<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />

두 개 이상을 포함하면 iOS 기기가 올바른 크기를 찾고 해당 이미지를 자동으로 활용합니다. 예제의 이미지 이름에서 알 수 있듯이 레티 나 디스플레이가있는 iPad에는 144x144px의 아이콘이 필요하고 iPhone 4 / 4S / 5에는 114x114px의 아이콘이 필요합니다. 화면 해상도도 다르지 않습니다) 72x72px의 아이콘이 필요하고 원래 iPhone에는 크기 사양이 필요하지 않지만 참고로 57x57px입니다.

Question 4

이 답변 중 일부는 이미 구식이므로 http://realfavicongenerator.net/ 을 사용하여 모든 이미지와 마크 업을 생성하는 것이 좋습니다. 사용할 때마다 몇 유로를 기부합니다. iOS, Android 및 Windows에서 현재 유효한 항목에 대한 최신 정보이므로 필요하지 않습니다.

Question 5

2018 년부터 Apple Developers Website 는 iOS 장치에 대해 다음을 권장합니다.

  <link rel="apple-touch-icon" href="touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
  <link rel="apple-touch-startup-image" href="/launch.png">
  <meta name="apple-mobile-web-app-title" content="AppTitle">

앱 제목이 웹 사이트 제목을 대체합니다. 일반적으로 당신은 그것을 원할 것입니다. 시작 이미지는 앱이 시작되는 동안 표시되는 이미지입니다.

Question 6

웹 클립에 대한 웹 페이지 아이콘 지정

사용자가 홈 화면에 웹 애플리케이션 또는 웹 페이지 링크를 추가 할 수 있도록 할 수 있습니다. 아이콘으로 표시되는 이러한 링크를 웹 클립이라고합니다. 다음 간단한 단계에 따라 웹 애플리케이션 또는 iOS의 웹 페이지를 나타내는 아이콘을 지정하십시오.

전체 웹 사이트 (웹 사이트의 모든 페이지)에 대한 아이콘을 지정하려면 apple-touch-icon.png라는 루트 문서 폴더에 PNG 형식의 아이콘 파일을 배치합니다.

단일 웹 페이지에 대한 아이콘을 지정하거나 웹 사이트 아이콘을 웹 페이지 별 아이콘으로 바꾸려면 다음과 같이 웹 페이지에 링크 요소를 추가합니다.

<link rel="apple-touch-icon" href="/custom_icon.png">

위의 예에서 custom_icon.png를 아이콘 파일 이름으로 바꿉니다. 다른 장치 해상도에 대해 여러 아이콘을 지정하려면 (예 : iPhone 및 iPad 장치 모두 지원) 다음과 같이 각 링크 요소에 크기 속성을 추가합니다.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

장치에 가장 적합한 크기의 아이콘이 사용됩니다. 크기 속성이 설정되지 않은 경우 요소의 크기는 기본적으로 60 x 60입니다. 장치에 권장되는 크기와 일치하는 아이콘이 없으면 권장 크기보다 큰 가장 작은 아이콘이 사용됩니다. 권장 크기보다 큰 아이콘이 없으면 가장 큰 아이콘이 사용됩니다.

링크 요소를 사용하여 아이콘을 지정하지 않으면 웹 사이트 루트 디렉토리에서 apple-touch-icon ... 접두사가있는 아이콘을 검색합니다. 예를 들어, 장치의 적절한 아이콘 크기가 60 x 60이면 시스템은 다음 순서로 파일 이름을 검색합니다.

apple-touch-icon-76x76.png

apple-touch-icon.png

웹 페이지 아이콘 메트릭은 아이콘 및 이미지 크기를 참조하십시오.

참고 : iOS 7의 Safari는 아이콘에 효과를 추가하지 않습니다. 이전 버전의 Safari는 -precomposed.png 접미사가 붙은 아이콘 파일에 효과를 추가하지 않습니다. 자세한 내용은 첫 번째 단계 : iTunes Connect에서 앱 식별을 참조하십시오.

출처 : Apple 터치 아이콘 사양

Question 7

나는 사과 사양을 읽은 적이 없으며 인정해야하지만 내 사이트의 로그에 따르면 이러한 이미지는 루트에 필요합니다.

apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png

apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png

Question 8

내 pull-request에서 https://github.com/h5bp/mobile-boilerplate(iPhone 6 아이콘 포함) :

<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

<!--
    Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
    If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">

Question 9

omg-img 를 사용 하여 인기있는 아이콘의 모든 크기와 색상을 생성 할 수 있습니다 . 예를 들면 :

<link rel="apple-touch-icon" sizes="152x152" 
      href="https://img.icons8.com/color/152x152/anonymous-mask.png">

이 태그는 iOS 장치의 다음 이미지를 반환합니다.