웹 사이트 용 Apple Touch 아이콘
지금까지 저는 다음과 같이 내 머리에 Apple Touch 아이콘 라인을 포함 시켰습니다.
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
그러나 Q & A에서 "apple-touch-icon의 정확한 픽셀 치수는 무엇입니까?" Apple의 지침에 따라 이제 세 개의 이미지가 필요하다고 인정되는 답변에 명시되어 있습니다.
그렇다면 코드의 헤드 섹션에이를 삽입하는 방법은 무엇입니까?
여기 있습니다. 도움이 되었기를 바랍니다.
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입니다.
미니멀리스트 솔루션-권장
일반적인 관행은 예상되는 가장 높은 해상도 인 단일 180x180 아이콘을 만들고 iOS 장치가 필요에 따라 축소하도록하는 것입니다. 다음과 같이 선언됩니다.
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
철저한 솔루션- 권장 하지 않음
Apple 사양 은 iOS7의 새로운 크기를 지정합니다.
- 60x60
- 76x76
- 120x120
- 152x152
- 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에서도 이러한 사진을 사용하고 있다는 사실을 고려하는 것도 중요합니다 .
이 파비콘 생성기 가이 모든 그림을 한 번에 만들 수 있다는 것을 알고 싶을 것입니다 . 전체 공개 : 나는이 사이트의 작성자입니다.
이 답변 중 일부는 이미 구식이므로 http://realfavicongenerator.net/ 을 사용하여 모든 이미지와 마크 업을 생성하는 것이 좋습니다. 사용할 때마다 몇 유로를 기부합니다. iOS, Android 및 Windows에서 현재 유효한 항목에 대한 최신 정보이므로 필요하지 않습니다.
웹 클립에 대한 웹 페이지 아이콘 지정
사용자가 홈 화면에 웹 애플리케이션 또는 웹 페이지 링크를 추가 할 수 있도록 할 수 있습니다. 아이콘으로 표시되는 이러한 링크를 웹 클립이라고합니다. 다음 간단한 단계에 따라 웹 애플리케이션 또는 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 터치 아이콘 사양
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">
앱 제목이 웹 사이트 제목을 대체합니다. 일반적으로 당신은 그것을 원할 것입니다. 시작 이미지는 앱이 실행되는 동안 표시되는 이미지입니다.
I have never read any apple specs, I must admit, but according to logs on my site, these images are required in root:
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
From my pull-request to https://github.com/h5bp/mobile-boilerplate (with iPhone 6 icons):
<!-- 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">
You can use omg-img for generate all sizes and colors for popular icons. For example:
<link rel="apple-touch-icon" sizes="152x152"
href="https://img.icons8.com/color/152x152/anonymous-mask.png">
This tag returns next image for iOS devices:
참고URL : https://stackoverflow.com/questions/5110776/apple-touch-icon-for-websites
'Programing' 카테고리의 다른 글
| Swift의 UIViewController에서 기본 super.init ()를 호출 할 수없는 이유는 무엇입니까? (0) | 2020.11.04 |
|---|---|
| 중복 된 Java 런타임 옵션 : 선호하는 순서는 무엇입니까? (0) | 2020.11.04 |
| jQuery로 JSON 트리를 검색하는 방법 (0) | 2020.11.04 |
| 자바 : org.w3c.dom.Document의 모든 요소를 반복하는 가장 효율적인 방법? (0) | 2020.11.04 |
| 클래스가 정의되었는지 어떻게 확인합니까? (0) | 2020.11.04 |