.ico in HTML einbauen

1 view
Skip to first unread message

Anselm Rapp

unread,
Jun 13, 2021, 3:23:49 PM6/13/21
to
Hallo,

ich möchte eine Browser-Startseite mit meinen wichtigsten Links
programmieren. Links daneben möchte ich die jeweilige .ico-Grafik
anzeigen lassen. Per Suchmaschine habe ich keine Lösung gefunden. Geht
das mit vertretbarem Aufwand, und wenn ja, wie?

Danke im Voraus, Anselm

--
Sämtliche Rechte mich zu irren vorbehalten. ;-)

Mike Grantz

unread,
Jun 13, 2021, 3:37:46 PM6/13/21
to
On 13.06.2021 21:23, Anselm Rapp wrote:

> ich möchte eine Browser-Startseite mit meinen wichtigsten Links
> programmieren. Links daneben möchte ich die jeweilige .ico-Grafik
> anzeigen lassen.

Womit möchtest du sie denn "programmieren"

> Per Suchmaschine habe ich keine Lösung gefunden.

Per Suchmaschine habe ich dieses gefunden:
https://github.com/gaffling/PHP-Grab-Favicon

Andreas Kohlbach

unread,
Jun 13, 2021, 10:49:43 PM6/13/21
to
On Sun, 13 Jun 2021 21:23:46 +0200, Anselm Rapp wrote:
>
> ich möchte eine Browser-Startseite mit meinen wichtigsten Links
> programmieren. Links daneben möchte ich die jeweilige .ico-Grafik
> anzeigen lassen. Per Suchmaschine habe ich keine Lösung gefunden. Geht
> das mit vertretbarem Aufwand, und wenn ja, wie?

Du müsstest für jede Seite ein Bildchen als Favicon (*.ico)
erstellen. Die müssen jeweils entweder 16×16, 32×32, 48×48, oder 64×64
Größe haben, und in einer Farbtiefe von 8, 24 oder 32-Bit vorliegen.

Auf meinen Seite habe ich für einige beispielsweise

<link rel="icon" type="image/jpg" href="bild_datei.ico" sizes="16x16" />

im <head>. Für jede Seite habe ich ein anderes *.ico erstellt. Die Datei
muss jeweils in derselben Verzeichnisebene wie das
HTML/PHP/was_auch_immer liegen, oder einen absoluten Pfad tragen.

<https://de.wikipedia.org/wiki/Favicon>
--
Andreas

https://news-commentaries.blogspot.com/

Maik Koenig

unread,
Jun 14, 2021, 5:37:06 AM6/14/21
to
Am 13.06.2021 um 21:23 schrieb Anselm Rapp:
> Hallo,
>
> ich möchte eine Browser-Startseite mit meinen wichtigsten Links
> programmieren. Links daneben möchte ich die jeweilige .ico-Grafik
> anzeigen lassen. Per Suchmaschine habe ich keine Lösung gefunden. Geht
> das mit vertretbarem Aufwand, und wenn ja, wie?

Hängt davon ab was Du unter vertretbar verstehst. Du könntest das
FavIcon jeder Seite einfach lokal abspeichern und dann ganz normal als
Grafik einbinden. Oder du bemühst ein wenig PHP-Voodoo und ziehst sie
immer "live" aus den Zielseiten, Mike Grantz hat einen Link auf
entsprechende Zeilen gepostet.

Aber: In beiden Fällen kann das Ärger geben. Auch FavIcons unterliegen
dem Urheberrecht. Ob es da auch Probleme gibt wenn man die für Links auf
die jeweilige Seite nutzt müsste im Zweifel ein Richter klären.

Greetz,
MK
--
Kopp-Verlag-Gläubige, Religionsdeppen, rechte Vollidioten
und ähnlicher Bio-Abfall werden ohne Hinweis ignoriert!
Ich lese die Gruppen in denen ich schreibe: KEINE Mailkopie.

Arno Welzel

unread,
Jun 14, 2021, 6:06:52 AM6/14/21
to
Anselm Rapp:

> ich möchte eine Browser-Startseite mit meinen wichtigsten Links
> programmieren. Links daneben möchte ich die jeweilige .ico-Grafik
> anzeigen lassen. Per Suchmaschine habe ich keine Lösung gefunden. Geht
> das mit vertretbarem Aufwand, und wenn ja, wie?

Was ist ".ico-Grafik" genau?

Was heißt "links daneben"? Neben den Links als Symbol? Das könnte man
wie folgt lösen - ein Bild per CSS vor den Link setzen:

HTML:

<a class="mein-icon" href="https://example.com">Seite xyz</a>

CSS:

a.mein-icon {
background-image: url('/bilder/icon-example.png');
background-position: 0 center;
background-repeat: no-repeat;
background-size: 1em 1em;
padding: 0 0 0 1.125em;
}

Das Bild (/bilder/icon-example.png) muss natürlich von der Größe her zum
Text passen, also in der Regel 16x16 Pixel oder ein SVG mit den
Abmessungen 16px*16px, wenn der Text 1em groß ist.

Statt einer externen Datei kann man das Bild auch als data-URL direkt in
das CSS einbinden, siehe dazu auch <https://data-url.de>:

a.mein-icon {
background-image: url(data:image/png; base64,....);
background-position: 0 center;
background-repeat: no-repeat;
background-size: 1em 1em;
padding: 0 0 0 1.125em;
}

Praktisches Anwendungsbeispiel siehe meine Website, z.B.:

<https://arnowelzel.de/netzsperren-durch-die-cuii>

Da wird bei allen externen Links eine kleine Weltkugel als SVG-Grafik
vorangestellt.

--
Arno Welzel
https://arnowelzel.de

Arno Welzel

unread,
Jun 14, 2021, 6:09:58 AM6/14/21
to
Mike Grantz:
Achtung! Auch Favoriten-Icons sind urheberrechtlich geschützte Bilder
und dürfen ohne Zustimmung der Website-Betreiber nicht einfach so
kopiert und erneut veröffentlicht werden. Wenn man auf der sicheren
Seite sein will, fragt man nur den Link des existierenden Icons ab und
benutzt den dann auf der eigenen Seite statt einer Kopie des Icons als
Datei.

Mike Grantz

unread,
Jun 14, 2021, 6:19:14 AM6/14/21
to
On 14.06.2021 11:28, Maik Koenig wrote:

> Hängt davon ab was Du unter vertretbar verstehst. Du könntest das
> FavIcon jeder Seite einfach lokal abspeichern und dann ganz normal als
> Grafik einbinden. Oder du bemühst ein wenig PHP-Voodoo und ziehst sie
> immer "live" aus den Zielseiten, Mike Grantz hat einen Link auf
> entsprechende Zeilen gepostet.

Er will ja "programmieren", sonst könnte er ja auch eines der
favicon-Dienste verwenden, wie z. B.

https://www.google.com/s2/favicons?sz=16&domain_url=google.com
https://www.google.com/s2/favicons?sz=32&domain_url=google.com
https://www.google.com/s2/favicons?sz=64&domain_url=google.com
https://www.google.com/s2/favicons?sz=128&domain_url=google.com
https://www.google.com/s2/favicons?sz=256&domain_url=google.com

Wobei sz= die Grösse und domain_url= die Quelle definiert.

Michael Landenberger

unread,
Jun 14, 2021, 6:36:27 AM6/14/21
to
"Arno Welzel" schrieb am 14.06.2021 um 12:06:50:

> Was ist ".ico-Grafik" genau?

<https://de.wikipedia.org/wiki/ICO_(Dateiformat)>

Gibt's seit über 30 Jahren ;-)

Gruß

Michael

Anselm Rapp

unread,
Jun 14, 2021, 7:03:11 AM6/14/21
to
Rundumschlag; ich war einige Zeit offline.

Am 13.06.2021 um 21:23 schrieb ich:

> ich möchte eine Browser-Startseite mit meinen wichtigsten Links
> programmieren. Links daneben möchte ich die jeweilige .ico-Grafik
> anzeigen lassen. Per Suchmaschine habe ich keine Lösung gefunden. Geht
> das mit vertretbarem Aufwand, und wenn ja, wie?

Anscheinend war meine Frage zu unpräzise formuliert, Entschuldigung.

Mein Passwort-Programm macht sehr komfortabel, was ich möchte. Bei
entsprechender Einstellung wird das zum Datensatz gehörige Icon links
neben dem Text (der eigentliche Link steht weiter rechts) angezeigt. Ob
dabei auf die .ico-Datei zugegriffen oder sie importiert wird, weiß ich
nicht.

https://amsch.de/web/links_mit_icon.jpg

Meine Link-Liste möchte ich in HTML programmieren/einbauen, das ist kein
Problem für mich, lediglich die Icons.

PHP-Grab-Favicon sieht gut aus, muss ich aber erst ausprobieren.

Wenn per PHP-Grab-Favicon oder auf andere Art lediglich auf das Favicon
verlinkt wird, dürften keine urheberrechtlichen Probleme bestehen. Diese
Methode würde ich auch technisch bevorzugen, lokales Speichern weit weniger.

Obwohl ich Google nur wenn unvermeidbar verwende, sieht die
Google-Methode sehr einfach und komfortabel aus. Ich muss nicht
unbedingt programmieren, wenn es einfacher geht.

Arno Welzels Methode muss ich mir noch genauer ansehen.

Den Wikipedia-Artikel hatte ich mir schon angesehen. Er ist
aufschlussreich, für meine Problemlösung aber nur bedingt hilfreich.

Dank und Gruß, Anselm

Anselm Rapp

unread,
Jun 14, 2021, 9:12:01 AM6/14/21
to
Am 14.06.2021 um 12:19 schrieb Mike Grantz:

> Er will ja "programmieren", sonst könnte er ja auch eines der
> favicon-Dienste verwenden, wie z. B.
>
> https://www.google.com/s2/favicons?sz=16&domain_url=google.com
> https://www.google.com/s2/favicons?sz=32&domain_url=google.com
> https://www.google.com/s2/favicons?sz=64&domain_url=google.com
> https://www.google.com/s2/favicons?sz=128&domain_url=google.com
> https://www.google.com/s2/favicons?sz=256&domain_url=google.com
>
> Wobei sz= die Grösse und domain_url= die Quelle definiert.

Gibt es weitere Favicon-Dienste, außer von Google, die so einfach
handzuhaben sind?

Gruß, Anselm

Mike Grantz

unread,
Jun 14, 2021, 10:30:25 AM6/14/21
to
On 14.06.2021 15:11, Anselm Rapp wrote:

> Gibt es weitere Favicon-Dienste, außer von Google, die so einfach
> handzuhaben sind?

Einige kamen und gingen. Auf die Schnelle habe ich nur noch einen
funktionierenden gefunden, der aber auf google umgeleitet hat. ;)

Anselm Rapp

unread,
Jun 14, 2021, 11:01:12 AM6/14/21
to
Danke fürs Nachschauen. Gruß, Anselm

Arno Welzel

unread,
Jun 16, 2021, 3:10:11 AM6/16/21
to
Michael Landenberger:
Nein, ich meinte bezogen auf die Frage. Denn Favicons müssen nicht in
diesem Format sein. Geht der OP davon aus, dass es sich nur um solche
Favicons handelt?

Arno Welzel

unread,
Jun 16, 2021, 3:22:24 AM6/16/21
to
Anselm Rapp:

> Rundumschlag; ich war einige Zeit offline.
>
> Am 13.06.2021 um 21:23 schrieb ich:
>
>> ich möchte eine Browser-Startseite mit meinen wichtigsten Links
>> programmieren. Links daneben möchte ich die jeweilige .ico-Grafik
>> anzeigen lassen. Per Suchmaschine habe ich keine Lösung gefunden. Geht
>> das mit vertretbarem Aufwand, und wenn ja, wie?
>
> Anscheinend war meine Frage zu unpräzise formuliert, Entschuldigung.
>
> Mein Passwort-Programm macht sehr komfortabel, was ich möchte. Bei
> entsprechender Einstellung wird das zum Datensatz gehörige Icon links
> neben dem Text (der eigentliche Link steht weiter rechts) angezeigt. Ob
> dabei auf die .ico-Datei zugegriffen oder sie importiert wird, weiß ich
> nicht.
>
> https://amsch.de/web/links_mit_icon.jpg
>
> Meine Link-Liste möchte ich in HTML programmieren/einbauen, das ist kein
> Problem für mich, lediglich die Icons.
>
> PHP-Grab-Favicon sieht gut aus, muss ich aber erst ausprobieren.
>
> Wenn per PHP-Grab-Favicon oder auf andere Art lediglich auf das Favicon
> verlinkt wird, dürften keine urheberrechtlichen Probleme bestehen. Diese
> Methode würde ich auch technisch bevorzugen, lokales Speichern weit weniger.
>
> Obwohl ich Google nur wenn unvermeidbar verwende, sieht die
> Google-Methode sehr einfach und komfortabel aus. Ich muss nicht
> unbedingt programmieren, wenn es einfacher geht.
>
> Arno Welzels Methode muss ich mir noch genauer ansehen.

Welche Methode? Ich habe keine Methode für irgendwas genannt, sondern
gefragt, was mit "die jeweilige .ico-Grafik" gemeint ist und auf die
potentielle Problematik mit Urheberrecht hingewiesen.

Technisch ist das Problem aber auch nicht kompliziert. Das Favicon einer
Website findet man vielen Fällen als "favicon.ico" in der Domain:

<https://example.com/favicon.ico>

Beispiele:

<https://www.google.com/favicon.ico>
<https://www.heise.de/favicon.ico>
<https://www.golem.de/favicon.ico>
<https://www.faz.net/favicon.ico>
<https://www.tagesspiegel.de/favicon.ico>

Weil es aber technisch möglich ist, auch etwas anderes als Favicon zu
benutzen, holt man sich die Startseite und prüft, ob es als link-Angabe
vorhanden ist.

Siehe auch:

<https://wiki.selfhtml.org/wiki/Grafik/Favicon>

Wenn ein link-Element für das favicon vorhanden ist, muss man die URL
natürlich daraus nehmen und nicht fix von
<http://example.com/favicon.ico> ausgehen.

Das parsen des Dokumentes würde ich mit PHP und DOMDocument machen:

<https://www.php.net/manual/de/class.domdocument.php>

In der DOM-Struktur wäre das dann:

<head> -> <link> mit rel="icon" oder rel="shortcut icon"

Im Attribut "href" des <link> Elementes findet sich dann die URL. Das
Element kann auch mehrfach mit verschiedenen Angaben für "sizes"
existieren, dann muss man ggf. noch eine Auswahl treffen - z.B. die
größte Größe o.Ä..

Sinnvoll ist es auch, die Größe in der eigenen Liste auf eine feste
Breite und automatische höhe zu setzen, da Favicons durchaus größer als
16*16 Pixel sein können:

<img class="favicon" src="..." />

Und die CSS-Regel dazu:

.favicon {
width: 16px;
height: auto;

Anselm Rapp

unread,
Jun 30, 2021, 11:21:50 AM6/30/21
to
Am 13.06.2021 um 21:23 schrieb ich:

> ich möchte eine Browser-Startseite mit meinen wichtigsten Links
> programmieren. Links daneben möchte ich die jeweilige .ico-Grafik
> anzeigen lassen. Per Suchmaschine habe ich keine Lösung gefunden. Geht
> das mit vertretbarem Aufwand, und wenn ja, wie?

Mike Grantz' Methode (14.06.2021, 12:19) genügt mir als Lösung vollkommen.

Danke nochmals an alle, Anselm
Reply all
Reply to author
Forward
0 new messages