So fügen Sie Favicon in Schienen hinzu 3.2

74

Ich weiß, dass neue Rails-Apps eine leere Datei favicon.ico enthalten. Ich möchte wissen, wie ich ein Favicon hinzufüge. Ich weiß, dass Sie den favicon_link_tagHelfer verwenden können, bin mir aber nicht sicher, wie ich die Datei favicon.ico füllen soll. Verwenden Sie Favicon-Generatoren? Wenn ja, welches ist das beste?

Ich möchte es auch zwischenspeichern können. Tut Rails das auch automatisch?

Vielen Dank

ruby-on-rails favicon Anfänger
quelle
3
stackoverflow.com/questions/6130593/… Dieser Beitrag wird Ihnen helfen
Norto23

Antworten:

69

Generieren Sie Ihr Favicon zum Beispiel hier: http://www.favicon.cc/ und legen Sie es im Verzeichnis public / ab

UPDATE Favicon im öffentlichen Ordner ist nicht vorkompiliert und kann für längere Zeit zwischengespeichert werden. Es sieht so aus, als wäre es besser, favicon_link_tag zu verwenden, um Probleme bei der Aktualisierung von Favicon zu vermeiden. Ich weiß nicht, dass Browser Favicon in Root benötigen. Laut Favicon Wiki pflegen alle modernen Browser

<link rel="shortcut icon" href="favicon path" /> (favicon_link_tag)
gayavat
quelle
Vielen Dank. Aus irgendeinem Grund kann ich das Favicon sehen, wenn es ist www.website.com, aber wenn ich einfach zu gehe, website.comwird es nicht angezeigt?
Noob
26
Das Favicon geht also nicht in die Asset-Pipeline?
James
4
Es ist besser / Standard, das Favicon auf yourdomain.com/favicon.ico zu haben, da einige Browser sie direkt anfordern (auch wenn Sie das Meta-Tag nicht dafür verwenden).
yorch
114

Fügen Sie dies einfach dem <head></head>Abschnitt Ihrer Layouts hinzu:

<%= favicon_link_tag 'favicon.ico' %>

Platzieren Sie das Bild favicon.ico in, /app/assets/images/wenn Sie die Asset-Pipeline verwenden, und in, /public/images/wenn Sie dies nicht tun .

Außerdem gibt es einen Fehler bei der Verwendung von Ruby 2.0 mit Rails 3.0.20 (und möglicherweise auch 3.0.x), der beim Versuch, favicon.ico zu rendern, eine Ausnahme auslöst.

Das Update besteht darin, den folgenden Code in application_controller.rb zu platzieren:

  config.relative_url_root = ""
Adrien Lamothe
quelle
Ich mag diese Lösung. Ich suche dieses Problem, weil ich eindeutige Kennungen für die Registerkarten dev / stage / prod in das Favicon einfügen möchte, und das ist, was ich brauchte!
Asfallows
hmm ... Ich hatte gerade den seltsamsten Ausdruck dieses Fehlers, nur favicon.ico in meinem öffentlichen Verzeichnis zu haben (was in der Entwicklung und auf Heroku gut funktioniert) hat nicht funktioniert und seltsamerweise versucht, auf "myhostname.com/favicon" zu schauen. ico "würde mir den Nginx-Begrüßungsbildschirm geben (den, auf dem Sie gerade Nginx installiert haben, keine Ahnung warum, weshalb ich dies poste, weil es für mich unglaublich seltsam ist), sobald ich den favicon_link_tag alles hinzugefügt habe war in Ordnung, das Favicon tauchte auf und das Betrachten funktionierte direkt. All dies aus einer ansonsten vollkommen guten App.
Mike HR
9

Während all diese Antworten besagen, dass ein 16x16-Symbol erstellt werden soll, sollten Sie in Wirklichkeit sowohl ein 16x16- als auch ein 32x32-Symbol erstellen, um Retina-Displays zu unterstützen. Keiner der Online-Generatoren hat damit sehr gute Arbeit geleistet.

Auf dem Mac gibt es eine großartige 5-Dollar-App namens Icon Slate , mit der Sie problemlos beide Formate in einer einzigen ICO-Datei erstellen können.

Unter Windows habe ich Axialis IconWorkshop mit großem Erfolg verwendet, aber es ist ein viel schwereres Werkzeug und mit etwa 50 Euro deutlich teurer.

Beide erstellen eine ICO-Datei mit 16 x 16- und 32 x 32-Bildern.

Wenn Sie die Asset-Pipeline verwenden, verwenden Sie den Ordner app / assets / images anstelle von / public. Die Anzahl der Randbrowser, die das linkTag ignorieren, nähert sich schnell Null, sodass es sich nicht lohnt, durch die Rahmen zu springen, um sie aufzunehmen.

Wie in anderen Antworten erwähnt, verwenden Sie dies in der head, um es anzuzeigen:

<%= favicon_link_tag 'favicon.ico' %>
Tim Sullivan
quelle
4
realfavicongenerator.net ist kostenlos und großartig! Verschwenden Sie nicht Ihr Geld;)
MMachinegun
3
Wenn Sie in hervorragende Werkzeuge investieren, verschwenden Sie niemals Ihr Geld. Diese Site ist zwar besser als die meisten anderen, aber nicht einmal vergleichbar mit einem Tool wie IconWorkshop oder der angenehmen Benutzererfahrung von Icon Slate, das auch offline verwendet werden kann.
Tim Sullivan
5

Ich kann diese Option nur empfehlen. Es war einfach zu bedienen und kostenlos http://converticon.com

MFrazier
quelle
4

Schreiben Sie in application.html.haml :

= favicon_link_tag '/images/favicon.ico'

platziere die Datei favicon.ico in dir:

project/public/images
shilovk
quelle
2

Sie benötigen so ziemlich eine 16x16-Pixel-Bilddatei namens favicon.ico, die im Stammverzeichnis Ihrer Website öffentlich verfügbar sein muss.

Sie können jederzeit einen großen Bildeditor verwenden, um Ihr Logo oder ein anderes Bild in das .ico-Format zu konvertieren. Es gibt kostenlose Optionen wie Gimp, mit denen sich großartige Symbole basierend auf vorhandenen Bildern besser erstellen lassen als mit Online-Symbolgeneratoren.

Fagiani
quelle
1

Ich habe die obigen Links ausprobiert und die Dienste waren nicht sehr einfach zu bedienen. Ich finde diesen Link auf einer anderen Seite und er wurde fehlerfrei über meine PNG-Datei kopiert und war sehr einfach zu bedienen. Ich dachte, ich würde diesen Link auch teilen, da ich denke, dass es ein besserer Service ist.

http://www.chami.com/html-kit/services/favicon/

Matt
quelle
1
Dies gibt keine Antwort auf die Frage. Um einen Autor zu kritisieren oder um Klarstellung zu bitten, hinterlassen Sie einen Kommentar unter seinem Beitrag.
OneChillDude
Wird in Zukunft tun. Toller Tipp. Ich war immer noch ein ziemlich großer Neuling, als ich diesen Kommentar hinterließ.
Matt
1

Ich habe es jahrelang nicht getan, aber Gimp ist in der Lage, .ico-Dateien mit mehreren Bildern unterschiedlicher Größe zu speichern. Sie müssen nur mit einigen sichtbaren Ebenen in das .ico-Format exportieren.

marcpmichel
quelle
1

Um ein Favicon für alle Plattformen (nicht nur für Desktop-Browser) zu generieren, können Sie RealFaviconGenerator und das Juwel rails_real_favicon verwenden:

  • Gehen Sie zu RealFaviconGenerator und senden Sie Ihr Bild. Sie können Ihr Symbol, Ihre Plattform pro Plattform erstellen: iOS, Android usw.
  • Wenn Ihr Symbol fertig ist, klicken Sie auf die Registerkarte "Rails", um die Schritte zum Installieren Ihres Favicons in Ihrem Rails-Projekt auszuführen. Grundsätzlich werden Sie gebeten:
    • Fügen Sie den rails_real_faviconEdelstein zu Ihnen hinzuGemfile
    • Erstellen Sie eine neue Datei mit dem Namen favicon.json. Diese Datei beschreibt die Symbole, die Sie gerade entworfen haben.
    • Führen Sie rails generate favicondiese Option aus, um die Symbole und den HTML-Code zu erstellen.
    • Fügen Sie render 'favicon'Ihre Layouts hinzu, um den HTML-Code in Ihre Seiten einzufügen.

Der Vorteil dieser Lösung besteht darin , dass es die Favicon - Dateien injiziert ( favicon.ico, apple-touch-icon.png, sondern auch browserconfig.xmlund manifest.json) in der Asset - Pipeline.

Vollständige Offenlegung: Ich bin der Autor von RealFaviconGenerator.

philippe_b
quelle
0

Die Lösung, die für mich funktioniert hat, bestand darin, Folgendes zu tun:

  1. Gehen Sie zu http://realfavicongenerator.net/favicon_checker und bestätigen Sie, dass Sie ein gutes Favicon haben. Wenn Sie dies nicht tun, erstellen Sie mit ihrem Tool eines (plus viele andere nützliche und verwandte Symbole). Hinweis: Dies setzt voraus, dass Sie ein gutes Symbol (z. B. PNG) als Grundlage für das Favicon haben.
  2. Nutzen Sie den Vorschlag von http://realfavicongenerator.net , die ?v=versionOption zu verwenden, um das Problem des Browser-Caching zu beheben. Das hat mir geholfen.
  3. Kopieren Sie die Datei favicon.ico nach publicund app/assets/images. Sie brauchen nur einen, aber wenn Sie nicht wissen, welcher, schadet das Kopieren an beide Stellen nicht ... oder Sie können experimentieren, um zu sehen, welcher funktioniert - nutzen Sie den ?v=version, um Ihren Test durchzuführen.
  4. Fügen Sie im <head></head>Abschnitt Ihrer Layouts in den Dateien app / views / layouts (z. B. application.html.erb) die folgende Zeile hinzu :

<%= favicon_link_tag 'favicon.ico' %>

Hoffentlich liefert das ein einfaches Rezept. Ich bin sicher, wenn ich etwas verpasst habe, kann und wird jemand diese Antwort verbessern.

Chip Roberson
quelle
Ich bin der Autor von RealFaviconGenerator. Vielen Dank für die Empfehlung! Sie sollten RFG erneut überprüfen: Die Integration in Rails ist einfacher als je zuvor :) Und die Versionierung ist nicht mehr erforderlich, da die Asset-Pipeline dies erledigt.
philippe_b
Ich habe darüber nachgedacht, RealFaviconGenerator in meinem Projekt zu verwenden. Wie auch immer, ich denke, es werden nicht gleichzeitig verschiedene Favoriten für dieselbe App unterstützt, habe ich Recht? Das Problem ist, dass mein Projekt auf mehrere Domain-Namen antwortet und für jeden etwas anderes präsentiert. Dies muss ein anderes Favicon enthalten. Ist das mit RealFaviconGenerator möglich?
David Revelo
0

Ich hatte ein Problem beim Einlegen einer Datei /public/favicon.ico. Ich verwende AWS EBS.

Ich könnte den Fehler beheben.

Die bessere Lösung für mich war, die Datei in /app/assets/images/favicon.icound zu verwenden= favicon_link_tag 'favicon.ico'

hguzman
quelle