nicht angemeldet
Frage zum Wiki-Artikel „Grafik/Favicon“
Julius
Gunnar BittersmannHallo miteinander,
nun sind ja schon einige Monate ins Land gegangen und die damals noch schwer im Bau befindliche Homepage ist endlich online. Mein Freund Wolfgang, der derzeit seinen Urlaub genießt, hat mir dabei maßgeblich geholfen. Ohne ihn wäre mein Gehirn jetzt wohl leicht aufgeweicht und die Seite noch immer nicht online.
Nun wurstele ich schon den ganzen Tag daran herum, daß die oben erwähnte Seite Audio-Bibel NeÜ (optimiert für Smartphone und Tablet) auch auf mobilen Geräten das favicon anzeigt.
Hier selfhtml.org-Wiki über "favicon" und hier Webdesign-Blog von Nina Boecher habe ich mich versucht schlau zu machen; mit der Umsetzung klappt es leider noch nicht so recht ... 😕
Folgendes habe ich (derzeit nur in der index.htm) im Head-Bereich hinzugefügt und auf meinen Webspace hochgeladen:
Einen "android-icon.png" in der Größe von 196 x 196 px liegt im Root-Verzeichnis
Diverse "apple-touch-icons.png" in verschiedenen Größen liegen alle im Root-Verzeichnis
Zwei vorgefertigte "apple-touch-icons" im PNG-Format liegen im Root-Verzeichnis
Vier Windows-Tile-Icons in verschiedenen Größen liegen im Verzeichnis /img
Das sieht in der index.htm dann so aus:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="deutschprachige Hörbibel (Audio-Dateien im MP3-Format) zum kostenlosen Download" />
<meta name="keywords" content="kostenlos, Audio-Bibel, Hörbibel, NeÜ, bibel-heute, Karl-Heinz Vanheiden, Startseite" />
<meta name="author" content="Holger Hönle" >
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="7 days" />
<title>Audio-Bibel NeÜ - Startseite</title>
<link href="./css/standard.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" href="android-icon.png" sizes="196x196">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png" />
<meta name="msapplication-square70x70logo" content="img/smalltile.png" />
<meta name="msapplication-square150x150logo" content="img/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="img/widetile.png" />
<meta name="msapplication-square310x310logo" content="img/largetile.png" />
<script src="./skripte/script.js"></script>
</head>
Ein Apple-Smartphone besitze ich zwar nicht, aber die apple-icons sollten - zumindestens vorläufig noch - auch auf Android funktionieren, oder? Und auch meinem Windows 8.1 (nur virtuell, über Virtualbox, da ich mit Linux-Mint unterwegs bin) sehe ich auch keine favicons.
Was mache ich denn alles falsch?
Vielen Dank für Eure Hilfe!
Holger
akzeptierte Antworten
Frage zum Wiki-Artikel „Grafik/Favicon“
Matthias Scharwies
Bewertung: +2, 2 Stimmen
-
Servus!
Hallo miteinander,
nun sind ja schon einige Monate ins Land gegangen und die damals noch schwer im Bau befindliche Homepage ist endlich online.
Sieht gut aus! Das headerimage würde ich aber als Text / SVG realisieren - wäre besser für die Auffindbarkeit durch Suchmaschinen.
Folgendes habe ich (derzeit nur in der index.htm) im Head-Bereich hinzugefügt und auf meinen Webspace hochgeladen:
Einen "android-icon.png" in der Größe von 196 x 196 px liegt im Root-Verzeichnis
Sieht man mit Chrome 60 auf Android-Tablet
Diverse "apple-touch-icons.png" in verschiedenen Größen liegen alle im Root-Verzeichnis
Zwei vorgefertigte "apple-touch-icons" im PNG-Format liegen im Root-Verzeichnis
Vier Windows-Tile-Icons in verschiedenen Größen liegen im Verzeichnis /img
Sieht man mit Firefox auf WindowsPC
Das sieht in der index.htm dann so aus:
<link rel="shortcut icon" href="android-icon.png" sizes="196x196"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57.png" /> <meta name="msapplication-square70x70logo" content="img/smalltile.png" />Für mich sieht das eher nach einem Problem des Referenzierens der Grafiken aus.
Warum hast du beim Android-Bild nur den Datei-Namen, bei den Apple-Icons aber den Slash (/) vor dem Dateinamen?
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Servus!
nun sind ja schon einige Monate ins Land gegangen und die damals noch schwer im Bau befindliche Homepage ist endlich online.
Sieht gut aus! Das headerimage würde ich aber als Text / SVG realisieren - wäre besser für die Auffindbarkeit durch Suchmaschinen.
Ich hab mal einen Versuch gemacht:
Die Einstellungen sind alle mit CSS festgelegt und deshalb veränderbar.
Die Grafiken habe ich aus der Wikipedia (Lizenzfrei) übernommen - sie können in Farbe und Größe auch mit CSS geändert werden.
Im Inhaltsbereich gibt es auch noch einige Sachen, die man verbessern könnte, angefangen von
<div class="dokumentinhalt">würde ich eher<main>nehmen und dem Tabellenlayout, das man heute (2017) auch eher anders umsetzen würde.Wiki-Artikel zum Thema:
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Hallo Matthias, die svg-Grafik sieht auf Firefox soweit ganz gut aus :-)
Im Internetexplorer jedoch wird sie falsch dargestellt :-P
Allerdings sind die Favoriten-Icons gut zu sehen, sowohl im FF als auch im IE. Aber im Quellcode kann ich diese nirgends entdecken. Sind die im CSS hinterlegt bei dir?
Viele Grüße Wolfgang
-
Servus!
Hallo Matthias, die svg-Grafik sieht auf Firefox soweit ganz gut aus :-)
Im Internetexplorer jedoch wird sie falsch dargestellt :-P
Ja, hab ich vergessen. Da muss noch angepasst werden :
Allerdings sind die Favoriten-Icons gut zu sehen, sowohl im FF als auch im IE. Aber im Quellcode kann ich diese nirgends entdecken. Sind die im CSS hinterlegt bei dir?
Meinst Du den Kopfhörer und die Bibel?
Die SVG-Grafik besteht aus …
-
einem weißen <rect> als Hintergrund
-
zwei <text>-Elementen, die von Suchmaschinen und Screenreadern als Text erkannt werden und den beiden Grafiken.
-
Diese sind in einem g-Element, bzw. als svg-Element am Ende der Grafik notiert.
Die SVG-Grafik kannst du wie ein HTML-Dokument in einem Editor öffnen und bearbeiten.
Viele Grüße Wolfgang
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Servus!
Servus!
Hallo Matthias, die svg-Grafik sieht auf Firefox soweit ganz gut aus :-)
Im Internetexplorer jedoch wird sie falsch dargestellt :-P
Ja, hab ich vergessen. Da muss noch angepasst werden :
Neues Problem: Chrome60 auf Android verschiebt das verschachtelte svg-Element nicht (transform="translate(x,y)"). Das muss also auch in ein g-Element umgewandelt werden.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Hallo Matthias, ich meinte die Favoriten-Icons, wo die bei dir im Quellcode drin stehen. Mir ist es auf die Schnelle nicht aufgefallen. Hab aber nur in der index.htm nachgesehen…
Welchen Chrome ich auf meinem Android habe, weiss ich gar nicht - doch jetzt :-) hab grade nachgesehen. Auch den 60er auf Android 7.0, mit Samsung Galaxy A3 2016…
Viele Grüße Wolfgang
-
Servus!
Hallo Matthias, ich meinte die Favoriten-Icons, wo die bei dir im Quellcode drin stehen.
Sorry. Mein Missverständnis.
Mir ist es auf die Schnelle nicht aufgefallen. Hab aber nur in der index.htm nachgesehen…
Die liegen nur im root-Verzeichnis rum. (habe die Test Seite einfach in ein Unterverzeichnis gepackt. Da eure Favicons nicht vorhanden sind, nimmt es sich das aus dem root.)
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Hallo Matthias,
Die liegen nur im root-Verzeichnis rum. (habe die Test Seite einfach in ein Unterverzeichnis gepackt. Da eure Favicons nicht vorhanden sind, nimmt es sich das aus dem root.)
Dann hast du bestimmt passende Dateinamen??? Oder wie funktioniert das dann?
Viele Grüße Wolfgang
-
Hallo Wolfgang, @AudioBibel
Die liegen nur im root-Verzeichnis rum. (habe die Test Seite einfach in ein Unterverzeichnis gepackt. Da eure Favicons nicht vorhanden sind, nimmt es sich das aus dem root.)
Dann hast du bestimmt passende Dateinamen??? Oder wie funktioniert das dann?
die liegen im Root-Verzeichnis der Website unter dem Dateinamen
favicon.ico, Beispiel: http://www.jsr-hersbruck.de**/favicon.ico**Es macht Sinn, sie unter diesem Namen abzulegen, weil Browser sie sowieso unter diesem Namen suchen und sonst das Error-Log des Webservers voll mit 404er-Fehlermedlungen ist 😀
Statt des Zusammenkopierens würde ich den Favicon-Generator anschmeißen[1] und den die Drecksarbeit mit den ganzen Formaten, Dateien und Deklarationen machen lassen.
Ich habe eine kleine Testseite gebastelt, mithilfe der man herausfinden kann, welcher Browser welche Datei lädt. Ich bin mit vier Dateien ausgekommen, aber dafür sieht es auf einem Windows-Tablet (wenn man die Webseite an den Start-Bildschirm anpinnt) schlecht aus (der nimmt die normale PNG (nicht-Apple)). Ich persönlich würde diese Konfiguration für meine Anwendungen weitestgehend so lassen, allerdings vielleicht noch die Auflösungen der Pixeldateien anpassen, evtl. kann die PNG noch höher aufgelöst werden.
Man sollte sich auch die Frage nach der Relevanz stellen: Windows auf Tablets und Handys ist mangels marktanteil nicht relevant (im Browser wird das Favicon ja ordentlich angezeigt), für Androiden und iOS reicht dieses Apple-Touch-Icon in hoher Auflösung und für die Zukunftsfähigkeit eine SVG-Datei, zumal ich nicht glaube, dass es viele Leute gibt, die Webseiten auf ihrem Startbildschirm ablegen – und wenn, die relevanten Geräte sind ja bereits erschlagen.
In diesem Kontext vielleicht auch noch interessant: Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?
Gruß
Julius
Zusätzlich würde ich auch noch eine SVG-Datei einbinden:
<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">↩︎
-
Servus! Hallo Wolfgang, @AudioBibel
Dann hast du bestimmt passende Dateinamen??? Oder wie funktioniert das dann?
die liegen im Root-Verzeichnis der Website unter dem Dateinamen
favicon.ico, Beispiel: http://www.jsr-hersbruck.de**/favicon.ico**Es macht Sinn, sie unter diesem Namen abzulegen, weil Browser sie sowieso unter diesem Namen suchen und sonst das Error-Log des Webservers voll mit 404er-Fehlermedlungen ist 😀
Statt des Zusammenkopierens würde ich den Favicon-Generator anschmeißen[^1] und den die Drecksarbeit mit den ganzen Formaten, Dateien und Deklarationen machen lassen.
Hab ich beides ins Wiki übernommen. Besonders der Favicon-Checker ist nützlich (Da muss ich auf meiner eigenen Webseite auch noch was anpassen!)
Ja, bezüglich der verschiedenen Versionen wollte ich mich auch noch mal einschalten:
Das sieht in der index.htm dann so aus:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72.png" /> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png" /> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png" /> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png" /> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png" /> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png" />Diese Vielzahl an Icons ist vom anderen Blog-Beitrag vorgeschlagen worden. Die ersten 4 Icons beziehen sich aber auf ältere Iphones mit <iOS7. Die haben laut caniuse aber mittlerweile keine Verbreitung mehr.
Ich habe eine kleine Testseite gebastelt, mithilfe der man herausfinden kann, welcher Browser welche Datei lädt. Ich bin mit vier Dateien ausgekommen, aber dafür sieht es auf einem Windows-Tablet (wenn man die Webseite an den Start-Bildschirm anpinnt) schlecht aus (der nimmt die normale PNG (nicht-Apple)). Ich persönlich würde diese Konfiguration für meine Anwendungen weitestgehend so lassen, allerdings vielleicht noch die Auflösungen der Pixeldateien anpassen, evtl. kann die PNG noch höher aufgelöst werden.
@Julius Da habe ich mal ne Frage zu. Muss der apple-touch-icon.png so heißen oder reicht ein png mit dem rel-Attribut:
<link rel="icon" type="image/png" href="favicon.png" sizes="192x192"> <link rel="apple-touch-icon" href="favicon.png" sizes="192x192">Theoretisch könnte man sich so Arbeit sparen, oder?
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Hallo Matthias,
Da habe ich mal ne Frage zu. Muss der apple-touch-icon.png so heißen oder reicht ein png mit dem rel-Attribut:
Wenn das link-Element mit den betreffenden Angaben fehlt, versucht ein iOS-Gerät es mit den vorgegebenen Dateinamen. Apples Doku dazu (habe sie aber nur überflogen...).
Falls die Angabe fehlt, probiert ein iOS-Gerät (mit einem iPad mini der dritten Generation getestet) in folgender Reihenfolge die Dateien durch:
/apple-touch-icon-152x152-precomposed.png/apple-touch-icon-152x152.png/apple-touch-icon.png
<link rel="icon" type="image/png" href="favicon.png" sizes="192x192"> <link rel="apple-touch-icon" href="favicon.png" sizes="192x192">Theoretisch könnte man sich so Arbeit sparen, oder?
Ich würde es (bezogen auf den Dateinamen) eher umdrehen:
<link rel="icon" type="image/png" href="/apple-touch-icon.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="192x192">Vorteile (durch Testen festgestellt):
- Nur eine PNG-Datei vorhanden.
- Keine 404er im Log, weil iOS-Geräte direkt die in
<link rel="apple-touch-icon" href="…">notierte Datei (hier ist der Name egal) nehmen und nicht erst alle Kombinationen durchprobieren. (Vorteil ggü. Variante ohne link-Element und passendem Dateinamen, in Bezug auf deinen Vorschlag in diesem Punkt gleichwertig) - Falls betreffendes link-Element vergessen wurde, ist immerhin noch die
apple-touch-icon.pngim Root-Verzeichnis vorhanden.
Gruß
Julius
-
-
@@Julius
zumal ich nicht glaube, dass es viele Leute gibt, die Webseiten auf ihrem Startbildschirm ablegen
Ich hoffe doch, dass die Tendenz steigend ist, weil Webseiten in zunehmendem Maße progressive web apps sind.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory -
Hallo @Julius, @Matthias Scharwies,@AudioBibel,
ich habe gerade eben die Homepageseiten von Holger bei mir auf die diskstation kopiert.Dort kann man ja auch einen simplen Webserver einrichten.
Dort kann ich ohne Änderung an den Seiten die Favoriten-Icons im Internetexplorer (V11.09) sehen.
Bei Holgers Webhoster (1&1) und auch bei meinem Webhoster (Bürgernetz Dillingen, resp. Sextl IT-Services http://audiobibelneü.wowogiengen.de) sehe ich dort jedoch kein Favoriten-Icon.
Bin jetzt etwas ratlos, da es sich ja wohl auch um eine Konfigurationseinstellung des Webservers zu handeln scheint? Viele Grüße
Wolfgang
-
Hallo Wolfgang,
Bei Holgers Webhoster (1&1) und auch bei meinem Webhoster (Bürgernetz Dillingen, resp. Sextl IT-Services http://audiobibelneü.wowogiengen.de) sehe ich dort jedoch kein Favoriten-Icon.
Bin jetzt etwas ratlos, da es sich ja wohl auch um eine Konfigurationseinstellung des Webservers zu handeln scheint?
Schau dir mal den Netzwerkverkehr in den Browser-Entwicklertools an, sprich ob die Icons angefragt werden und wie sie zurückgeliefert werden, insbesondere HTTP-Status und Content-Type.
Viele Grüße
Robert -
Hallo Wolfgang,
Bei Holgers Webhoster (1&1) und auch bei meinem Webhoster (Bürgernetz Dillingen, resp. Sextl IT-Services http://audiobibelneü.wowogiengen.de) sehe ich dort jedoch kein Favoriten-Icon.
Das liegt wahrscheinlich daran, dass die Browser(-Installationen), mit denen du diese Seiten aufgerufen hast, die Favicons cachen – bzw. sich deren Fehlen beim erstmaligen Aufruf (weil sie aus ihrer Sicht nicht vorhanden waren) merken. Um sie dazu zu bringen, die Icons neu zu laden, muss man ihnen klar machen, dass sie neu sind. Am einfachsten geht dies, indem ihr im HTML an die betreffenden Dateinamen Parameter dran hängt. Also z. B.
<link rel="icon" href="/favicon.ico?123">Gruß
Julius
-
-
-
-
-
-
-
-
-
@@Matthias Scharwies
Das headerimage würde ich aber als Text / SVG realisieren - wäre besser für die Auffindbarkeit durch Suchmaschinen.
Inwiefern wäre
<svg><text>Hommingberger Gepardenforelle</text></svg>für Suchmaschinen besser lesbar als<img alt="Hommingberger Gepardenforelle"/>?LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Servus!
@@Matthias Scharwies
Das headerimage würde ich aber als Text / SVG realisieren - wäre besser für die Auffindbarkeit durch Suchmaschinen.
Inwiefern wäre
<svg><text>Hommingberger Gepardenforelle</text></svg>für Suchmaschinen besser lesbar als<img alt="Hommingberger Gepardenforelle"/>?Das wäre natürlich noch besser.
Das Tier musst ich erst googeln.
Da ich die beiden Grafiken unverändert aus der Wikipedia geholt habe, wollte ich das nicht mit inline-SVG realisieren. Sonst wäre mir das auch nicht passiert ein verschachteltes svg transformieren zu wollen.
LLAP 🖖
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste
-
-
Hallo Matthias @Gunnar, Wolfgang, Julius
Sorry, daß ich mich erst einige Tage später melde. Habe zwar Urlaub, aber nicht viel Zeit. 😉 Jetzt habe ich ein paar detailliertere Fragen:
Sieht gut aus!
Ich vermute mal Matthias, Du meinst die neue Seite im Allgemeinen? Dann stimme ich Dir zu und gebe das Lob ausschließlich an Wolfang weiter!
Sieht man mit Chrome 60 auf Android-Tablet
Ok. Sieht man es denn auch auf einem Smartphone mit Android? Zuhause habe ich zwar derer drei; alle kommen aber über Android 4.4 nicht hinaus. Dort sehe ich auch nach dem Abspeichern als Lesezeichen kein Favicon ... Ich hoffe, es liegt nur am alten Android, oder habe ich was falsch gemacht?
Auf dem i-Phone 6 unserer Tochter klappt es übrigens; das Favicon wird in den Lesezeichen angezeigt. Allerdings ist es im Tab des Browsers (Safari) nicht zu sehen. Das ist auf den Smartphones (egal ob Apple oder Android) vermutlich generell nicht der Fall???
Ich hab mal einen Versuch gemacht:
neue Variante mit responsiver SVG-GrafikDie Einstellungen sind alle mit CSS festgelegt und deshalb veränderbar.
Sieht ziemlich gut aus (Grafik gefällt mir in der Qualität sehr gut, in der Auswahl der Bildchen weniger; aber das kann man ja ändern). Allerdings werden die Bildchen für die Kapitel- und Zip-Auswahl in meinem alten Android völlig verzerrt dargestellt (in die Höhe gezogen und sehr schmal).
Ich kläre mal mit Wolfgang, ob wir so oder ähnlich umbauen wollen …
Fragen habe ich noch viele. Möchte mich aber erst mal mit Wolfgang besprechen. Fürs erste wäre es nett, wenn ich die oben gestellten Fragen (für mich als Laien und Benutzer alter Androiden) beantwortet bekomme. 😉
Vielen Dank fürs Erste und ich (oder Wolfgang) melde mich wieder
Holger
-
Servus!
Sieht man mit Chrome 60 auf Android-Tablet Ok. Sieht man es denn auch auf einem Smartphone mit Android?
Ja, hab ein Samsung mit aktuellem Android. Dort ist es sowohl mit Chrome als auch mit Firefox zu sehen. Im Android-eigenen Browser habe ich auch bei anderen Seiten kein Favicon gesehen.
Ich hab mal einen Versuch gemacht:
neue Variante mit responsiver SVG-GrafikDie Einstellungen sind alle mit CSS festgelegt und deshalb veränderbar.
Sieht ziemlich gut aus (Grafik gefällt mir in der Qualität sehr gut, in der Auswahl der Bildchen weniger; aber das kann man ja ändern).
Die waren auf die Schnelle aus der Wikipedia. Man könnte wie Gunnar vorgeschlagen hatte, die SVG-Grafik inline realisieren:
<header> <svg> <text>Überschrift</text> <image></image> <text 2. Zeile</text> <image href="2.Bild"></image> </svg> </header>Man könnte natürlich auch detailgenauere Grafiken einbinden.
Allerdings werden die Bildchen für die Kapitel- und Zip-Auswahl in meinem alten Android völlig verzerrt dargestellt (in die Höhe gezogen und sehr schmal).
Ich habe das auf die schnelle mit einem HTML-Attribut
width="36"ohne Höhenangabe realisiert. Wenn man so etwas übernehmen wollte, wäre es besser dies im CSS festzulegen. Da es ja nur ein Icon ist, könnte man es auch komplett ins CSS auslagern:a[href$= ".mp3"] { background-image: url(mp3.svg); width: 1.5em; height: 1.5em; }Der Selektor wählt alle Links auf mp3s aus und gibt ihnen dieses Hintergundbild in der gewünschten Größe, bei einer Änderung der Schriftgröße passt es sich an.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste -
Hallo Holger,
Auf dem i-Phone 6 unserer Tochter klappt es übrigens; das Favicon wird in den Lesezeichen angezeigt. Allerdings ist es im Tab des Browsers (Safari) nicht zu sehen. Das ist auf den Smartphones (egal ob Apple oder Android) vermutlich generell nicht der Fall???
Zumindest Chrome zeigt sie bei mir auch in der Tab-Übersicht an.
Auf deiner Website zeigt Firefox auf dem Smartphone bei den Lesezeichen kein Icon an. Sonst passt alles.
Hast du schon mal den https://realfavicongenerator.net/ probiert? Erspart dir vielleicht das Rumprobieren.
Gruß
Julius
-
-