Favicon, 아이콘, 바로 가기 아이콘, 사과 터치 아이콘 : 다른 것들이 있습니까?


24

웹 사이트의 기본 웹 아이콘에는 두 가지 기본 유형이 있습니다.

  • Favicon :.ico이름이 지정된 사이트의 루트에 서식이 지정된 파일을배치하면favicon.ico대부분의 데스크탑 브라우저에서 파일을찾아 다양한 컨텍스트 (책갈피, 탭)에 표시합니다. 브라우저에 대한 유형 및 크기 제한 이 있지만 파일에 다른 이름 및 기타 그래픽 유형을 지정할 수있는 코드로 추가 할 수도 있습니다.

    <link rel="shortcut icon" href="/webmasters//favicon.ico" />
    <link rel="icon" href="/webmasters//favicon.ico" />
    
  • 웹 클립 아이콘 :사이트의 루트또는루트에png포맷 된 파일을배치하면Safari의 iPhone OS / iOS 버전에서 해당 파일을 선택하여 사이트가 홈 화면에 추가 될 때 저장합니다. 다음과 같은 코드로 추가 할 수도 있습니다.apple-touch-icon.pngapple-touch-icon-precomposed.png

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

웹 마스터가 포함 할 수있는 웹 사이트에 대한 다른 기본 아이콘 그래픽이 있습니까?

답변:


8

그것은 나타납니다 에 따라 안드로이드를 사용하는 것을 rel의 유형을 apple-touch-icon-precomposed하거나 apple-touch-icon, 하지만 그것이 당신이 완전한 URL을 사용해야 작동하려면, 예를 들면 :

<link rel="apple-touch-icon-precomposed"
      href="http://www.example.com/custom_icon.png" />

또는:

<link rel="apple-touch-icon"
      href="http://www.example.com/custom_icon.png" />

주의 사항은 이것이 Android 2.1 업데이트 1Webkit 3.1 인 것 같습니다 . 안드로이드 개발자 문서 에 방법을 언급하지 android.webkit이 때이 이벤트 apple-touch-icon검색됩니다.


1

타겟팅하는 플랫폼에 따라 다릅니다. 그러나 대부분의 표준 호환 모바일 브라우저는 기본 즐겨 찾기 아이콘을 이해한다고 생각합니다. Android, iOS, WebOS 등과 같은 플랫폼에서 특수 사용 사례를 검색 (예 : 특수 아이콘으로 바탕 화면 바로 가기 생성) 할 수 있습니다.

방금 iPhone 사용자를 대상으로하는 몇 개의 웹 사이트를 개발했으며이 사이트에서 Wordpress를 특수 버전의 WPTouch 테마와 함께 사용했습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.