FaviconMaker.net

ファビコン用HTMLタグ

ファビコンファイル用にクリーンで正しい <head> スニペットを生成します。フォルダーのパスを設定し、コピーして貼り付けます。

コピー/ペーストパス認識型クリーンなスニペット

パスとオプション

スニペットをファイルのデプロイ先と一致させます

ファビコンフォルダーの URL パス

例： /ファビコン。使用 / または、サイトルートを空白のままにします。

URL の例: /favicons/favicon-32.png

ファビコン.ico

従来のキャッチオール

site.webmanifest

PWA + 追加のアイコンのヒント

ファビコン-32.png

最新のブラウザタブ

ファビコン-16.png

小さなタブ + 従来の UI

apple-touch-icon.png

iOSのホーム画面

追加の PNG サイズ

48–512 (発送する場合のみ)

theme-color

ブラウザUIの色

ダークモードアイコン

ifres-color-scheme タグを追加します

ファイルがありませんか?フルパックを生成する•ライブ URL で確認する

あなたのスニペット

コピーして貼り付けて展開し、確認します。

<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="manifest" href="/favicons/site.webmanifest">

使い方

1) 選択したフォルダーにファイルを置きます (たとえば、 /ファビコン).

2) スニペットをサイトに貼り付けます。 <head>.

3) デプロイして実行します。ファビコンチェッカー URL が 200 を返すことを確認します。

よくある質問

何かアップロードしていますか？

いいえ。このツールはブラウザ内でテキストを生成するだけです。アップロードはありません。

フォルダーパスフィールドには何を入力すればよいですか?

ファビコンファイルが提供されるパブリック URL パスを使用します。 Example: /ファビコン.サイトのルートには / を使用します (または空白のままにします)。

実際に必要なファイルはどれですか?

ソリッドカバレッジの場合:ファビコン.ico、ファビコン-16.png、ファビコン-32.png、apple-touch-icon.png、site.webmanifest。

動作を確認するにはどうすればよいですか?

スニペットを貼り付けてデプロイし、実行します。ファビコンチェッカーライブ URL 上で。