ForHosting KIT · サイト取得・監視

faviconとApple touch iconのHTMLタグを生成

このfavicon用HTMLタグ生成ツールは、アイコンのサイズと公開パスの一覧を、Webサイトのheadに配置できる整ったlink要素へ変換します。指定した各素材のfavicon参照に加え、Apple touch iconの参照も自動で作成します。結果は常に同じ規則で生成され、属性値は安全にエスケープされます。テンプレート、静的サイト、コンテンツ管理システム、アプリケーションのレイアウトへそのまま貼り付けてご利用いただけます。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

正確なアイコン一覧をご用意ください

まず、サイトですでに公開しているアイコンファイルをご用意ください。素材ごとに1行を追加し、ピクセル寸法を幅x高さの形式で入力して、公開パスまたはURLを指定します。一般的なブラウザー向けセットでは、タブやブックマーク用に小さな正方形のファイルを使い、端末のホーム画面へサイトを保存する用途には大きめの正方形画像を使います。/assets/icons/favicon-32.pngのようなサイト相対パスと、素材配信元の絶対URLのどちらも指定できます。同じ寸法に異なるファイルが競合すると選択が曖昧になるため、各サイズは1回だけ指定してください。生成前に全行を検証するので、空のパス、不正な寸法、重複サイズ、対応範囲外の極端な値は、壊れたタグではなく明確な入力エラーになります。本ツールはファイルシステムを調べず、画像もダウンロードしません。そのため寸法はお客様による明示的な宣言として扱われます。公開後に各パスへアクセスでき、実画像の寸法が入力値と一致することをご確認ください。

タグの選択方法と並び順をご確認ください

指定された各アイコンについて、relをiconに設定し、小文字へ正規化したsizesと、エスケープ済みのhrefを持つlink要素を出力します。ブラウザー用タグはピクセル面積の小さい順に並び、同じ面積の場合も一定の規則で順序を決めます。そのため、入力行の順番が変わっても同じ論理的なセットからは常に同じ結果が得られます。Apple touch iconは別に選択します。タッチアイコンで広く使われるため、正確に180x180の正方形素材を優先します。該当素材がなければ最大の正方形アイコンを選び、正方形が1つもなければ指定された最大の素材を明示的な代替規則で使用します。選択されたファイルは通常のブラウザー用一覧にも残り、追加のlink要素がrelをapple-touch-iconとして参照します。属性のエスケープにより、パス内のアンパサンド、引用符、山括弧を保護しながら、HTMLが解釈する参照先は維持されます。拡張子からMIMEタイプを推測しないため、変換URLや拡張子のないルートへ誤った宣言を付けません。

生成したマークアップを配置して検証してください

返されたhtmlの値を、すべての公開ページで共有する文書テンプレートのheadへコピーしてください。フレームワークをご利用の場合は、各ルートで繰り返さず、ルートレイアウトまたはメタデータ用テンプレートへ配置します。tags配列には同じ行が個別の文字列として含まれるため、ビルドスクリプトで構造化された値が必要な場合に便利です。icon_countとapple_touch_sizeは自動検査に使用できます。公開後は生成ページのソースを開き、最終的な公開オリジンからhrefの参照先へ到達できることをご確認ください。先頭がスラッシュのサイト相対パスはドメインのルートから解決されます。スラッシュがない相対パスは現在の文書位置を基準とするため、階層の深いルートでは挙動が変わる場合があります。faviconはキャッシュが長く残りやすいため、差し替え確認時にはキャッシュを消去するかプライベートウィンドウをご利用ください。必要に応じてモバイルのホーム画面追加もお試しください。本ツールは参照だけを作り、画像作成、Webマニフェスト変更、素材アップロード、配信Content-Typeの確認は行いません。

活用例

静的サイトのheadを構築

バージョン管理されたアイコン素材一覧を、共通HTMLレイアウトへ貼り付けられるマークアップに変換します。

アプリケーションテンプレートを統一

異なるアイコンパスを持つ複数サイトで、一定の順序に整えたfavicon宣言を生成します。

公開メタデータを自動化

構造化タグと選択されたタッチ用サイズを、ビルド検査やリリース処理へ渡します。

よくある質問

アイコンを1つも送信しない場合はどうなりますか？

少なくとも1つのアイコンパスとサイズが必要なため、無効な入力としてエラーになります。

Apple touch iconはどのように選ばれますか？

180x180の正方形を優先し、なければ最大の正方形を使います。正方形がない場合は指定された最大の素材を選択します。

faviconファイルの作成やサイズ変更も行いますか？

いいえ。お客様がすでに作成して公開したファイルを参照するHTMLだけを生成します。

絶対URLを使用できますか？

はい。絶対URLとサイト相対パスのどちらも使用でき、HTML属性で危険な文字はエスケープされます。

同じサイズを複数指定できないのはなぜですか？

サイズごとに宣言を1つにするとブラウザーの選択が予測可能になり、同じ寸法で素材が競合しません。

APIの料金はいくらですか？

APIは1回$0.002です。このページではブラウザー版を無料でご利用いただけます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/web/favicon-meta-generate

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/web/favicon-meta-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"icons":[{"size":"16x16","path":"/favicon-16x16.png"},{"size":"32x32","path":"/favicon-32x32.png"},{"size":"180x180","path":"/apple-touch-icon.png"}]}'

const res = await fetch("https://api.kit.forhosting.com/web/favicon-meta-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "icons": [
      {
        "size": "16x16",
        "path": "/favicon-16x16.png"
      },
      {
        "size": "32x32",
        "path": "/favicon-32x32.png"
      },
      {
        "size": "180x180",
        "path": "/apple-touch-icon.png"
      }
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/favicon-meta-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "icons": [
        {
            "size": "16x16",
            "path": "/favicon-16x16.png"
        },
        {
            "size": "32x32",
            "path": "/favicon-32x32.png"
        },
        {
            "size": "180x180",
            "path": "/apple-touch-icon.png"
        }
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/favicon-meta-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"icons":[{"size":"16x16","path":"/favicon-16x16.png"},{"size":"32x32","path":"/favicon-32x32.png"},{"size":"180x180","path":"/apple-touch-icon.png"}]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"icons":[{"size":"16x16","path":"/favicon-16x16.png"},{"size":"32x32","path":"/favicon-32x32.png"},{"size":"180x180","path":"/apple-touch-icon.png"}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/favicon-meta-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "icons": [
    {
      "size": "16x16",
      "path": "/favicon-16x16.png"
    },
    {
      "size": "32x32",
      "path": "/favicon-32x32.png"
    },
    {
      "size": "180x180",
      "path": "/apple-touch-icon.png"
    }
  ]
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.favicon_meta_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`timeout_sec`	30
`max_crawl_pages`	25

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →