97

Webサイトのファビコンを作成するにはどうすればよいですか？

4

10 に答える 10

104

ファビコンについて検索したところ、すべてのブラウザーとデバイスで動作するには 10 種類以上のファイルが必要であることがわかりました :(

私は腹を立てて、これらすべてのファイルとそれぞれの正しい HTML ヘッダーを作成する独自の favicon ジェネレーターを作成しました: faviconit.com

楽しんでくれると良いです。

于 2013-10-11T11:12:58.350 に答える
20

GIMPはそのための良いプログラムです。画像をPNGとして保存し、追加するだけです

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

<HEAD>あなたのページのセクションに。

于 2009-10-10T05:35:28.087 に答える
8

16x16または32x32または64x64のアイコンファイルを作成します。favicon.icoという名前を付けて、Webサイトのパブリックフォルダーのルートに配置します。

他のグラフィック形式を.icoに変換するWebサイトがあります。すなわち。http://tools.dynamicdrive.com/favicon/

于 2009-10-10T05:41:40.240 に答える
3

.icoファイルを作成する場合は、GIMPを使用してファビコンを作成することもできます。最近のブラウザは通常の画像ファイルを使用できますが、元々は.icoファイルだけだったと思います。Photoshopに似たオープンソースの画像エディタです。適切なサイズ（たとえば32 x 32）の画像を作成および編集し、1つのレイヤーにフラット化して（同じファイルに複数のアイコンが必要な場合を除く）、.icoとして保存します。正しくフォーマットしてから、Stefano<link rel="SHORTCUT ICON" HREF="/favicon.ico">を使用してWebページで使用します。

于 2009-10-10T06:34:30.610 に答える
3

ファビコンを作成するときは、次の要素を考慮する必要があります。

  • サポートされているプラ​​ットフォーム10 年前は、デスクトップ ブラウザのみをサポートする必要があり、解決策は従来のfavicon.ico画像を生成することでした。最近では、iOS (および iOS Safari) と Android (および Android Chrome) をサポートしたいと考えています。おそらく、Windows 10 (および Edge) と新しい Mac Book Pro Touch Bar (macOS Safari) もそうです。単一の「フリーサイズ」の画像だけを使用することはできなくなりました。
  • 設計複数のプラットフォームをサポートするとすぐに、複数の設計ガイドラインに直面することになります。たとえば、Google は Android 上の独自のネイティブ アプリに透明なアイコンを使用していますが、iOS のアイコンはまったく透明にすることはできません。「単一のデザインがすべてに適合する」アプローチだけを使用することはできません。
  • 生成されたアイコンと HTML コード2 ～ 3 年間、すべてのケースをカバーするために、できるだけ多くのアイコンを生成することが参照されてきました。残念ながら、このトレンドはすべて自分で作成したものです :-/ 問題は、20 数行または HTML で終わることです。これは多すぎます。満足のいく技術的解決策を得るには、生成されるアイコン/HTML の量とサポートされるプラットフォームのバランスを取る必要があります。

いつものように、これらのアセットはすべて手動で作成できます。非常に具体的なニーズと予算がない限り、これは間違いなく進むべき道ではありません.

ほとんどの人にとって正しい方法は、すべてのアイコンの外観を決定し、すべての詳細を処理できる favicon ジェネレーターを使用することです。これを行うのはReal Favicon Generatorだけです。完全な開示: 私はこのサイトの作成者です。

于 2016-12-21T15:04:19.360 に答える
3

オープン ソースのPaint.netプログラムとIcon プラグインを使用しています。

次に、さまざまなサイズがすべて .ico ファイルに埋め込まれた .ico 形式で画像を作成して保存できます。

于 2012-08-02T10:07:03.127 に答える
1

また、asp.netを使用している場合は、次の方法でファビコンをページに適用してみてください。

<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

ただし、詳細については、http： //doctype.com/を参照してください。

于 2009-10-10T05:54:55.637 に答える
1

Photoshopを使用してファビコンを16x16または32x32にします。次に、それをgifとして保存し、IrfanViewを使用してgifをicoに変換します。

于 2009-10-10T06:43:39.923 に答える