様々なファビコンを一括生成。generatorfavicon.ico,apple-touch-iconなど様々なブラウザやデバイスに対応したファビコンをまとめて生成。様々なファビコンを一括生成。generator使い方はとってもシンプル。画像を1枚指定するだけ。favicon.ico、icon*.png、android-chrome*.png、apple-touch-icon*.png、site-tile*、manifest.jsonを一括生成します。foundを記録させない対策としても有効。PWAのアイコン作成にも。画像ファイルを選択リセット指定可能な画像タイプはPNG,JPG,GIFです。512x512~700x700ピクセル画像が推薦サイズです。今までに作成頂いた数:128334個ダウンロードしたファイルを解凍してウェブサーバーのドキュメントルートに配置します。HTMLには以下の内容を<head>と</head>の間に記載します。(全てが必須ではありません。下記参照)ドキュメントルートに設置しない場合は、これらパスとmanifest.json内のパスを適宜書き換えます。#0078d7はこのままでも構いませんが、適宜変更可能です。同梱されるmanifest.jsonはGoogleChrome拡張機能となります。PWA作成でも使用いただけます。linkタグで記述する必要はありません。(2019年3月追記)ところでこれだけの指定がすべて必要なのかというとそうでもありません。モダンブラウザをターゲットにする場合は以下で大丈夫です。大きな画像でもブラウザまたはデバイスが適宜縮小して表示してくれます。Windows10のタイルへの表示を想定しないならば以下でいいでしょう。画像は以下2個を任意の場所に置き、favicon.icoをドキュメントルートに置きます。最低この3個でいいと思われます。記述は以下の2行だけです。href="/icon-192x192.png">画像サイズによってデザインを変更する場合はそれぞれ指定しましょう。svg画像で用意する必要がありましたが、現時点ではその必要は無くなり、favicon画像が使用されるようになりました。時代と共に記述も変化しますが、あくまでも利用者の為の記述ですので様々な環境が想定されます。よって可能な限り多くを記述したほうが安心ではあります。ファビコン画像をドキュメントルートに設置しない場合でも、favicon.icoはドキュメントルートにコピーして配置しましょう。ブラウザがHTMLの記述にかかわらずドキュメントルートのfavicon.icoを見るようです。様々な種類のファビコン(アイコン)を一括生成します。生成される最大画像サイズは512×512pxです。512×512~700×700ピクセルの画像を指定します。ブラウザやデバイスの多様化により、昔ながらのfavicon.icoだけではなくapple-touch-iconなど様々なファビコンが使用される様になりました。このサイトでは各サイズの画像ファイルとmanifest.jsonを生成します。面倒な設定や処理は不要です。画像を1枚指定するだけで完成です。含むマルチアイコンとなります。受付可能なファイルタイプはPNG、GIF、JPGで、PNG画像ではアルファチャンネルがそのまま生かされます。生成される画像は全て正方形です。長方形の画像を指定した場合は短辺を基準に長辺のはみ出た部分は切り捨てられます。通常のウェブサイトとしては本サイトで生成したファイルの設置でほぼ対応できるのではないかと思います。apple-touch-iconに関しては、まずapple-touch-icon-*-precomposed.pngがアクセスされ、見つからなければapple-touch-icon-*.pngがアクセスされるようです。found(ファイルが見つからない)のエラーが残ってしまいます。メンテナンスの邪魔になる不要なエラーログを残さない為にも全てのファイルを設置しましょう。スマートフォンでの閲覧を想定しない業務サイトであっても上記理由により設置をお勧めします。このサイトで生成されるファイルは以下の53個です。(16x16,24x24,32x32,48x48の4個を含むマルチアイコン)icon-16x16.pngicon-24x24.pngicon-32x32.pngicon-36x36.pngicon-48x48.pngicon-72x72.pngicon-96x96.pngicon-128x128.pngicon-144x144.pngicon-152x152.pngicon-160x160.pngicon-192x192.pngicon-196x196.pngicon-256x256.pngicon-384x384.pngicon-512x512.pngandroid-chrome-36x36.pngandroid-chrome-48x48.pngandroid-chrome-72x72.pngandroid-chrome-96x96.pngandroid-chrome-128x128.pngandroid-chrome-144x144.pngandroid-chrome-152x152.pngandroid-chrome-192x192.pngandroid-chrome-256x256.pngandroid-chrome-384x384.pngandroid-chrome-512x512.pngapple-touch-icon.pngapple-touch-icon-precomposed.pngapple-touch-icon-57x57.pngapple-touch-icon-57x57-precomposed.pngapple-touch-icon-60x60.pngapple-touch-icon-60x60-precomposed.pngapple-touch-icon-72x72.pngapple-touch-icon-72x72-precomposed.pngapple-touch-icon-76x76.pngapple-touch-icon-76x76-precomposed.pngapple-touch-icon-114x114.pngapple-touch-icon-114x114-precomposed.pngapple-touch-icon-120x120.pngapple-touch-icon-120x120-precomposed.pngapple-touch-icon-144x144.pngapple-touch-icon-144x144-precomposed.pngapple-touch-icon-152x152.pngapple-touch-icon-152x152-precomposed.pngapple-touch-icon-180x180.pngapple-touch-icon-180x180-precomposed.pngsite-tile-70x70.pngsite-tile-150x150.pngsite-tile-310x150.pngsite-tile-310x310.pngmanifest.json本サイトは手軽に必要数のファビコン(アイコン)を用意することを目的としていますので、必要に応じて個々のファイルを差し替えるなど調整が望ましい場合もあります。ある問題として、大きな画像ではしっかり見えた字や模様が16x16や32x32ではつぶれて読めなくなったり、逆に小さいサイズが基準のデザインでは大きな画像では物足りない事もあるでしょう。小、中、大、それぞれの大きさに適したデザインを作成して、適宜混在させると完璧です。背景に表示されるジグソーパズルはただの遊び心です。邪魔になってごめんなさい。プレビューが見にくい場合はプレビュー背景色を指定してください。この記事は2016年10月当時の物です。