タグ

Tipsとiconに関するtailtameのブックマーク (3)

  • 2015年版: ホームアイコンの指定方法まとめ - console.lealog();

    調べては忘れを毎回繰り返すのもなんだかなーと思ったので、まとめておきます。 ちなみに、iOS/Androidのことしか書きません。 iOSは5以上、Androidは4以上のOSバージョンを対象としてます。 OperaとかMetroとかFireFoxとかは知りません!もっと頑張ってください! あくまでこの記事を投稿した時点でのものです! 全般 拡張子はpng 勝手に角丸になるので四角のまま書き出してOK Safari(iOS) いちおう公式のドキュメントはこちら。 Configuring Web Applications で、実は指定方法が2つありまして、 HTMLで指定する方法(おそらく一般的) ドキュメントルートに画像を配置する方法 以下それぞれ。 HTMLで指定する場合 <link rel="apple-touch-icon" href="/path/to/icon.png"> ってr

    2015年版: ホームアイコンの指定方法まとめ - console.lealog();
    tailtame
    tailtame 2016/02/26
    2015/4。ふ、増えてる!(180px)公式に仕様あったんだ。72px、114px、144pxっていらないのか…撤去するか~。サイズ表記なしは57pxだったしこれももう…。自分の端末ホームは標準がなし、Fxがshortcut参照してるのかー…16px…
  • faviconに数字のバッジを付けられるJavaScript「Tinycon」|skuare.net

    twitter facebook hatena google pocket faviconに数字を乗せられると新着記事数や日付など様々なお知らせをお知らせすることができます。 tommoor/tinycon - GitHubはそんなJavaScriptです。 sponsors tommoor/tinycon - GitHubからファイルをダウンロード。 <script type="text/javascript" src="tinycon.js"></script> <script> (function(){ Tinycon.setBubble(2); //()内の数字が表示されます。 Tinycon.setOptions({ //オプション width: 7, //幅 height: 9, //高さ font: '10px arial', //フォント colour: '#ffffff'

    faviconに数字のバッジを付けられるJavaScript「Tinycon」|skuare.net
  • iPhone / iPad サイズ別 apple-touch-icon.png 作成

    アイコン(PNG)を指定するには、linkタグで指定する方法と、特定のファイル名で保存する方法の2種類があります。 アイコン画像をlinkタグで指定する 全てのデバイス共通のアイコンを指定するには、次のコードをHTMLのheadタグ内に記入します。 <link rel="apple-touch-icon" href="apple-touch-icon.png" /> さらに、デバイス別にアイコンを変更するには、「sizes」属性でサイズを指定します。iPhone 4(Retinaディスプレイ)の記入例は次のとおりです。 <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" /> このようにして3種類のサイズのアイコンを指定すると、次のようなコードになります。 <link rel="a

    iPhone / iPad サイズ別 apple-touch-icon.png 作成
    tailtame
    tailtame 2011/06/05
    ここが分かりやすかった…。
  • 1