スマートフォン・タブレットのホームアイコンを作るためのファイル名のメモ

2015年2月10日2018年4月9日

サイトを見直していたら404　not　foundが出ている画像拡張子を発見したので「なんだこりゃ」とググってみたら、どうやら「スマホ・タブレットのホーム画面用のicon画像を呼びにいってる」らしい。で、自分用に拡張子だけメモとりました。
 
2016/08/18追記＊情報を元に画像素材追加。
 

参考にしたページ

iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | 編集長ブログ―安田英久 | Web担当者Forum
apple-touch-iconやbrowserconfig.xmlなどWebサイトのスマホ用アイコン指定の最新情報を調べてみた | 編集長ブログ―安田英久 | Web担当者Forum
IE11 での Web サイト用カスタム タイルの作成 (Windows)
 
（）内は推奨サイズ
==============
Apple系
==============
apple-touch-icon.png（57 x 57）
apple-touch-icon-precomposed.png（57 x 57）

 
apple-touch-icon-76×76.png
apple-touch-icon-76×76-precomposed.png

 

apple-touch-icon-120×120.png
apple-touch-icon-120×120-precomposed.png

 

apple-touch-icon-152×152.png
apple-touch-icon-152×152-precomposed.png

 
 

==============
Android系
==============
Appleと同じファイル名でOKだが、ヘッダー内にリンクを指定する。指定方法はfaviconと同じ
 
 
==============
win8のタイル
==============
browserconfig.xmlを作っておいた上で、imageフォルダに以下のファイルを置く
 
smalltile.png　（128 x 128）

 
mediumtile.png　（270 x 270）

 
widetile.png　（558 x 270）

 
largetile.png　（558 x 558）

＊ライブタイルはもっと面倒くさい。

==============
そのほか
==============
favicon.ico（元祖htmlのアイコン）
16　×　16

 
32　×　32

 
icon.png（→？？？　なぜかトップディレクトリで404になってるんだが、どこから呼び出し食らってるのか現在不明）
 
 
ずら～っと並べてみたけれど、コレ全部やるのスンゲーめんどくさいっすね。
そろそろ一括のファイル名出てきてもよさげですよねこれ。
faviconだけで済ませる方法ないですかねこれ。

wordpressに一括Ｆａｖｉｃｏｎ・アイコン指定ができました！

（追記：2016/02/04）

外観→カスタマイズ→サイト基本情報 内に「サイトアイコン」が出来てました。前のバージョンではなかったので追加機能だと思います。

推奨画像サイズ: 512 × 512です。