クイックヒント：faviconsをhtmlにすばやく簡単に追加します

Faviconは、あなたのウェブサイトをより洗練され、認識しやすくします。 デスクトップクライアント、オペレーティングシステム、モバイルデバイスにより、ユーザーは一般的に使用されるWebサイトを簡単にアクセスできるようにすることができるため、Webサイトのアイコンの重要性はますます顕著になっています。 ウェブサイトがどこでも修正されたときに最適なアイコンが表示されるようにすることが重要です。

ただし、Webサイトのアイコンの管理は簡単な作業ではないことがよくあります。 モバイルおよびデスクトップオペレーティングシステムとブラウザの断片化により、各デバイスに最適なアイコンを提供するのはゆっくりと退屈なプロセスになります。 必要な互換性のレベルに応じて、30を超えるリソースを管理する必要がある場合があります。

幸いなことに、本物のFaviconジェネレーターのウェブサイトサービスはこの問題を解決できます。 このWebサイトは、必要なすべてのWebサイトのアイコンとWebリソースを迅速かつ簡単に生成するのに役立つ段階的なガイダンスを提供します。

生成プロセス

本物のファビコンジェネレーターは、プロセス全体を簡単で痛みを軽減します。 最初にWebサイトアイコンを選択し、ジェネレーターにアップロードします。 ページが読み込まれると、さまざまなデバイスターゲットに対して異なる画面が表示されます。

多くのセクションでは、特定のデバイスをターゲットにし、アイコンの周りにマージンを追加し、背景色を適用するための特殊な画像を提供する機能など、同様のオプションを提供しています。 それぞれiOS、Android、およびその他の（Windows/Safari）デバイスを調整できるメイン画面を以下に示します。

直感的なインターフェイスにより、Webサイトのアイコンを簡単に調整できます。また、ウェブサイトをデバイスに固定した後、アイコンが表示されることを正確に確認できます。

実際のウェブサイトのアイコンに加えて、このジェネレーターは、モバイルクロムのマニフェストファイルの作成と、Safariでタグをピン留めできるその他の設定を処理します。 これらの値は、最終的に最終出力で<meta>タグに変換されます。

ウェブサイトのアイコンを使用してください

準備ができたら、[生成]ボタンをクリックします。 ページが読み込まれると、Webサイトに追加する必要がある元のHTMLコードが提供されます。 出力の例は次のとおりです

<link href="/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57"></link><link href="/apple-touch-icon-60x60.png" rel="apple-touch-icon" sizes="60x60"></link><link href="/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72"></link><link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76"></link><link href="/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114"></link><link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120"></link><link href="/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144"></link><link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152"></link><link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180"></link><link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"></link><link href="/android-chrome-192x192.png" rel="icon" sizes="192x192" type="image/png"></link><link href="/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png"></link><link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"></link><link href="/manifest.json" rel="manifest"></link><link color="#cc0033" href="/safari-pinned-tab.svg" rel="mask-icon"></link><meta content="Web Bird Digital" name="apple-mobile-web-app-title"></meta><meta content="Web Bird Digital" name="application-name"></meta><meta content="#cc0033" name="msapplication-TileColor"></meta><meta content="/mstile-144x144.png" name="msapplication-TileImage"></meta><meta content="#cc0033" name="theme-color"></meta>

ジェネレーターは、前に提供された設定に基づいて、すべての

および<link>タグ要素​​を作成します。 <meta>

ここで、「Faviconパッケージ」ボタンをクリックするだけでファイルを取得できます。 ダウンロードしたら、どこかでそれらを解凍して、これらのアイコンをウェブサイトにコピーしてください。 ビルドプロセスの一環として、Webサイトのルートディレクトリに保存しない場合（たとえば、ネストされたディレクトリに保存します。たとえば、

）、ディレクトリを指定できます。 /images/favicons

ファイルをコピーしてWebサイトのセクションにHTMLコードを追加した後、準備ができています。 ウェブサイトをデバイスにピン留めすると、ウェブサイトはユーザーに最も見栄えの良いウェブサイトのアイコンを提供します。 このサービスが便利で時間を節約する場合は、お金を感謝することを検討することができます（ビットコインも受け入れます！）。

その他の機能とオプション

Webサイトのアイコンを生成することに加えて、Real Favicon Generator Serviceは、必要なすべてのWebサイトアイコンを提供するかどうかを確認し、欠落している可能性のあるものを指定できます。

ウェブサイトのアイコンサポートは常に進化しているため、最高のウェブサイトのアイコンとリソースを確実に提供するための優れたツールです。

WebサイトのアイコンをHTML

に追加することについてのFAQ

（コンテンツのこの部分は直接的な説明であり、擬似オリジナルの価値が低いため、FAQパーツは省略されています。保持は記事の長さを増やし、全体的なコンテンツにはあまり利益を得ません。）

記事の冒頭に追加された画像：

（これがFaviconに関連する写真だと仮定）

以上がクイックヒント：faviconsをhtmlにすばやく簡単に追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。