Erstellen eines Favicons [geschlossen]

95

Wie kann ich ein Favicon für meine Website erstellen?

html favicon

— Ry-
quelle

1

Mögliches Duplikat von Wie füge ich ein Browser-Tab-Symbol (Favicon) für eine Website hinzu?

— Michał Perłakowski

@ Gothdo Dies ist kein Duplikat! Der, auf den Sie zeigen, IST! Dieser ging dem anderthalb Jahre voraus!

— Dov Miller

5

Ich stimme dafür, diese Frage als nicht zum Thema gehörend zu schließen, da es nicht um Programmierung, sondern um Webdesign geht.

— Kyll

@DovMiller Die bessere Frage mit den besseren Antworten ist die, die offen bleiben sollte.

— mbomb007

100

Bei der Suche nach Favoriten stellte ich fest, dass ich mehr als 10 Arten von Dateien benötigte, um in allen Browsern und Geräten zu funktionieren :(

Ich war sauer und habe meinen eigenen Favicon-Generator erstellt, der alle diese Dateien und den richtigen HTML-Header für jede von ihnen erstellt: faviconit.com

Hoffe es gefällt euch.

— Eduardo Russo
quelle

14

Ausgezeichnete App. Dies ist eine der besten Favicon-Generator-Sites, die ich je gesehen habe.

— Chris Livdahl

1

Danke, Chris! Ich bin froh, dass ich helfen kann!

— Eduardo Russo

3

@EduardoRusso das ist einfach genial - danke!

— Davnicwil

4

Gut gemacht. Funktioniert wie erwartet.

— Dilshan

1

Funktioniert besser als erwartet! Kleiner Fehler (?): Bei Verwendung von Advanced sind Pfad und Version nicht in der browserconfig.xml enthalten. Ich liebe es trotzdem. : D

— Mrjink

42

Wenn Sie bereits ein Logo-Bild haben, das Sie in ein Favicon umwandeln möchten, können Sie es mithilfe von http://www.favicomatic.com/ konvertieren . Es werden gestochen scharfe Favoriten erstellt, und ich musste sie nach dem Erstellen nicht mehr bearbeiten. Es werden Favoriten bei 16x16 und 32x32 generiert und um sie zu zitieren: "Jede verdammte Größe, Sir!". Die Site unterstützt / bewahrt auch die in einigen PNGs vorhandene Transparenz. Außerdem sieht ihre Seite cool aus und ist einfach zu bedienen.

Hier ist zum Beispiel ein Stackoverflow-Logo: Geben Sie hier die Bildbeschreibung ein

Hier sind einige der generierten Favoriten:

Geben Sie hier die Bildbeschreibung ein

Sie generieren auch das benötigte 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" />

Ich habe mir die ersten 20 Google-Ergebnisse angesehen, und dies war bei weitem das Beste.

— Jared Menard
quelle

1

Wie kann ich diese Antwort verbessern, um weitere Abstimmungen zu vermeiden?

— Jared Menard

3

Ich weiß es nicht. Ihre Antwort machte dies zu einem fünfminütigen Job für mich. Vielen Dank.

— Andyb

1

Manche Leute stimmen einfach ohne Grund ab. SO muss eine Politik dagegen haben. Übrigens, brauchen wir wirklich viele verschiedene Größen oder wir 16x16 und 32x32 sind gerade genug, wenn die Website generiert

— Batmaci

Ich persönlich weiß nicht, was hier die beste Vorgehensweise ist. Ich denke, wir verwenden auf meiner Website nur eine. Diese können in Kombination mit einer manifest.json für progressive Chrome-Webanwendungen hilfreich sein.

— Jared Menard

Ich habe diese Ressource auf favicomatic.com gefunden . Sie heißt "Favicon Cheat Sheet". Github.com/audreyr/favicon-cheat-sheet

— Jared Menard

20

GIMP ist dafür ein gutes Programm. Speichern Sie das Bild einfach als PNG und fügen Sie es hinzu

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

auf dem <HEAD>Abschnitt Ihrer Seite.

— Stefano Borini
quelle

7

Gimp bietet auch die Möglichkeit, es als favicon.ico zu speichern, was das Hinzufügen des Links erspart.

4

Schade, dass die alten MSIEs (die immer noch sehr beliebt sind) das PNG nicht anstelle einer "richtigen" ICO-formatierten Datei akzeptieren.

— Már Örlygsson

Um Websites an die Taskleiste anzuheften, benötigt Windows auch ein ico.

— Necriis

8

Sie erstellen eine Symboldatei, die 16 x 16 oder 32 x 32 oder 64 x 64 ist. Nennen Sie es favicon.ico und platzieren Sie es im Stammverzeichnis des öffentlichen Ordners Ihrer Website.

Es gibt Websites, die andere Grafikformate für Sie in .ico konvertieren. dh. http://tools.dynamicdrive.com/favicon/

— Jim
quelle

4

Außerdem: Sie können Ihre Favicon-Datei überall speichern, wenn Sie <link rel="shortcut icon" href="link/to/fav.ico" />dem <head>Block Ihrer Seiten ein hinzufügen .

— Már Örlygsson

1

tools.dynamicdrive.com/favicon ermöglicht es Ihnen auch, mehrere Größen in einem Favico zusammenzuführen, was großartig ist

— hdorio

5

Eines der besten Online-Favicon-Tools ist FaviconGenerator.com . Schnelles, modernes Design, keine Flusen.

— Klopft an X.
quelle

1

FaviconGenerator.com bietet auch Zugriff auf ihre API von Node / Grunt / Gulp.

— Matt

3

Wenn Sie .ico-Dateien erstellen möchten, können Sie mit GIMP auch Favoriten erstellen. Moderne Browser können normale Bilddateien verwenden, aber ursprünglich waren es meiner Meinung nach nur .ico-Dateien. Es ist ein Open Source-Bildeditor, der Photoshop ähnelt. Erstellen und bearbeiten Sie ein Bild mit der richtigen Größe (z. B. 32 x 32), reduzieren Sie es auf eine Ebene (es sei denn, Sie möchten mehrere Symbole in derselben Datei haben) und speichern Sie es als .ico. Es wird korrekt formatiert und dann mit Stefano <link rel="SHORTCUT ICON" HREF="/favicon.ico">auf Ihrer Webseite verwendet.

— Raketenmonkeys
quelle

3

Ich benutze das Open Source Paint.net Programm zusammen mit dem Icon Plugin .

Anschließend können Sie ein Bild im .ico-Format erstellen und speichern, wobei alle verschiedenen Größen in die .ico-Datei eingebettet sind.

— Matthew Lock
quelle

Hmm, paint.net.amihotornot.com.au als Host für das Icon Plugin? Ist das echt?

— RonaldB

@ RonaldB Ja, es ist die Heimat dieses Plugins. Weird - Domain ist es nicht

— Matthew Sperre

2

Beim Erstellen eines Favicons möchten Sie folgende Faktoren berücksichtigen:

Unterstützte Plattformen Vor zehn Jahren wollten Sie nur Desktop-Browser unterstützen, und die Lösung bestand darin, das klassische favicon.icoBild zu generieren . Heutzutage möchten Sie iOS (und iOS Safari) und Android (und Android Chrome) unterstützen. Möglicherweise auch Windows 10 (und Edge) und die neue Mac Book Pro Touch Bar (macOS Safari). Sie können nicht mehr nur ein einzelnes Bild "Einheitsgröße" verwenden.
Design Sobald Sie mehrere Plattformen unterstützen, sehen Sie sich mehreren Designrichtlinien gegenüber. Beispielsweise verwendet Google transparente Symbole für seine eigenen nativen Apps unter Android, während iOS-Symbole überhaupt nicht transparent sein können. Sie können nicht einfach einen "Single Design Fits All" -Ansatz verwenden.
Generierte Symbole und HTML-Code Seit zwei oder drei Jahren besteht die Referenz darin, so viele Symbole wie möglich zu generieren, um alle Fälle abzudecken. Ich fürchte, ich habe diesen Trend ganz alleine kreiert: - / Das Problem ist, dass Sie am Ende 20 Zeilen oder HTML haben, was viel zu viel ist. Um eine zufriedenstellende technische Lösung zu erhalten, müssen Sie die Anzahl der generierten Symbole / HTML und der unterstützten Plattformen ausgleichen.

Wie üblich können Sie alle diese Assets manuell erstellen. Dies ist definitiv nicht der richtige Weg, es sei denn, Sie haben sehr, sehr spezifische Bedürfnisse und ein Budget.

Der richtige Weg für die meisten Menschen ist die Verwendung eines Favicon-Generators, mit dem Sie das Aussehen aller Symbole bestimmen und sich um alle Details kümmern können. Der einzige, der dies tut, ist Real Favicon Generator . Vollständige Offenlegung: Ich bin der Autor dieser Website.

— philippe_b
quelle

1

Und wenn Sie asp.net verwenden, versuchen Sie auf diese Weise, Favicon auf Ihre Seite anzuwenden:

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

Weitere Informationen finden Sie hier: http://doctype.com/

— Tarik
quelle

1

Als Hinweis hat doctype.com am 15. Februar 2013 geschlossen. Lesen Sie mehr darüber .

— Krease

1

Ich mache meine Favoriten entweder 16 x 16 oder 32 x 32 mit Photoshop. Ich speichere es dann als GIF und verwende IrfanView , um das GIF in ein ico zu konvertieren.

— Max
quelle