ファビコンの作成[終了]

95

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

html  favicon 
— Ry-
ソース
1
— のMichałPerłakowski
@Gothdoこれは複製ではありません！あなたが指しているのはISです！これはその1年半前のこと！
— Dov Miller
5
これはプログラミングではなくWebデザインに関するものであるため、この質問をトピック外として締めくくります。
— Kyll
@DovMillerより良い答えのあるより良い質問は、開いたままにしておくべき問題です。
— mbomb007

回答:

100

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

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

楽しんでください。

— エドゥアルドルッソ
ソース
14
優れたアプリ。これは私が見た中で最高のファビコンジェネレータサイトの1つです。
— Chris Livdahl、2014年
1
ありがとう、クリス！お役に立ててうれしいです。
— Eduardo Russo
3
@EduardoRussoこれは単に素晴らしいです-ありがとう！
— davnicwil 2015年
4
よくやった。期待どおりに動作します。
— ディルシャン2015年
1
予想以上にうまくいきます！小さなバグ（？）：詳細設定を使用する場合、パスとバージョンがbrowserconfig.xmlに含まれていません。しかし、それでも愛してください。：D
— mrjink 2015
42

ファビコンに変換したいロゴ画像がすでにある場合は、http： //www.favicomatic.com/を使用して変換できます。鮮明なファビコンが作成され、作成後に編集する必要はありませんでした。それは、16x16と32x32でファビコンを生成し、それらを引用します：「すごいサイズ、サー！」。このサイトは、一部のpngに存在する透明度もサポート/保持しています。また、彼らのサイトはクールに見え、使いやすいです。

たとえば、次はstackoverflowのロゴです。 ここに画像の説明を入力してください

生成されたファビコンの一部を以下に示します。

ここに画像の説明を入力してください ここに画像の説明を入力してください ここに画像の説明を入力してください ここに画像の説明を入力してください ここに画像の説明を入力してください

また、必要なhtmlも生成します。

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

最初の20件ほどのGoogleの検索結果を確認したところ、これが群を抜いて最高でした。

— ジャレッドメナード
ソース
1
これ以上の反対投票を避けるために、この回答をどのように改善できますか？
— Jared Menard
3
知りません。あなたの答えにより、これは私にとって5分の仕事になりました。ありがとう。
— andyb 2015
1
一部の人々は理由もなく反対投票をしたいだけです。SOにはそれに対するポリシーが必要です。ところで、本当に多くの異なるサイズが必要ですか、それともウェブサイトが生成する16x16と32x32で十分ですか
— batmaci
私は個人的に、ここでのベストプラクティスが何であるかを知りません。私のサイトでは、1つだけ使用すると思います。これらは、manifest.jsonと組み合わせると、ChromeプログレッシブWebアプリに役立ちます。
— Jared Menard
このリソースはfavicomatic.comで見つかりました。「ファビコン
— Jared Menard
20

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

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

<HEAD>ページのセクション。

— ステファノボリーニ
ソース
7
Gimpには、リンクを追加する手間を省くfavicon.icoとして保存するオプションもあります。
4
古いMSIE（今でも人気があります）が、「適切な」ICO形式のファイルの代わりにPNGを受け入れないのは残念です。
— MARÖrlygsson
Webサイトをタスクバーに固定するには、Windowsにもicoが必要です。
— Necriis 14
8

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

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

— ジム
ソース
4
また、ページのブロックにを追加する<link rel="shortcut icon" href="link/to/fav.ico" />と、ファビコンファイルをどこにでも保存でき<head>ます。
— MARÖrlygsson
1
tools.dynamicdrive.com/faviconを使用すると、1つのファビコに複数のサイズをマージすることもできます
— hdorio
3

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

— ロケットモンキー
ソース
3

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

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

— マシューロック
ソース
アイコンプラグインのホストとしてpaint.net.amihotornot.com.auですか？それは合法ですか？
— RonaldB 2017
@RonaldBはい、それはそのプラグインのホームです。奇妙なドメインではありません
— マシューロック
2

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

  • サポートされているプラ​​ットフォーム 10年前は、デスクトップブラウザーのみをサポートしたいと考えていましたが、解決策はクラシックなfavicon.ico画像を生成することでした。現在、iOS（およびiOS Safari）およびAndroid（およびAndroid Chrome）をサポートする必要があります。Windows 10（およびEdge）と新しいMac Book Pro Touch Bar（macOS Safari）もそうかもしれません。「1つのサイズですべてに適合する」単一の画像を使用することはできなくなりました。
  • 設計複数のプラットフォームをサポートするとすぐに、複数の設計ガイドラインに直面します。たとえば、GoogleはAndroid上の独自のネイティブアプリに透明アイコンを使用していますが、iOSアイコンはまったく透明にすることはできません。「単一の設計がすべてに適合する」アプローチを使用することはできません。
  • 生成されたアイコンとHTMLコード 2〜3年間、リファレンスはすべてのケースをカバーするためにできるだけ多くのアイコンを生成することでした。私はこの傾向をすべて自分で作成したと思います：-/問題は、20数行またはHTMLになってしまうことです。満足のいく技術的ソリューションを実現するには、生成されるアイコン/ HTMLの量とサポートされるプラットフォームのバランスをとる必要があります。

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

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

— philippe_b
ソース
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/

— タリック
ソース
1
メモとして、doctype.comは2013年2月15日に閉鎖されました。詳細については、をご覧ください。
— Krease 2014
1

私は、Photoshopを使用して、ファビコンを16 x 16または32 x 32のいずれかにします。次にgifとして保存し、IrfanViewを使用してgifをicoに変換します。

— マックス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.