Skip to content

Instantly share code, notes, and snippets.

@nishinoshake
Last active July 27, 2016 10:18
Show Gist options
  • Save nishinoshake/d6de2c0dec16085868f36bbb8bc18680 to your computer and use it in GitHub Desktop.
Save nishinoshake/d6de2c0dec16085868f36bbb8bc18680 to your computer and use it in GitHub Desktop.
faviconapple-touch-icon

ファビコン

rel="shortcut icon"
icoファイルは16✕16と32✕32のマルチアイコンで作成するとよい。

http://ao-system.net/alphaicon/index.php
https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

Appleのアイコン

rel="apple-touch-icon"
複数作ってサイズを指定しておくと、最適なやつを表示してくれる。
ジャストのやつがなかったら、自分より大きくて、一番近いサイズを表示する。
iPhone 6Plus が180✕180なのでそれが今のところ最大。

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

Androidのアイコン

rel="icon"
iconで指定する。
apple-touch-iconでもいけるが非推奨とのこと。
192x192が高解像度向けでよい。

https://developer.chrome.com/multidevice/android/installtohomescreen

<link rel="shortcut icon" href="/common/images/favicon.ico">
<link rel="icon" sizes="192x192" href="/common/images/android-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/common/images/apple-touch-icon.png">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment