favicon als base64 eine gute idee?

[xorg1990]

Hallo Leute, es gibt ja im WWW diesen favicon Generator: https://www.favicon-generator.org/

Der generiert ein wunderschöne favicons. Das Problem ist, beim meinem ESP8266 passen die nicht mehr in den Flash speicher

Es besteht ja nun die Möglichkeit einige Images als base64 zu encodieren.

Grundsätzlich geistern da 2 Fragen in meinen Kopf rum.

Frage 1. Spare ich wirklich Speicherplatz wenn ein Bild im base64 Format vorhanden ist?

Und: werden die Bilder gecached. Sprich wenn ich den Chrome öffne hat man ja diese Verknüpfung Ansicht von allen häufig besuchten Seiten.
Wird da das icon angezeigt auch wenn ich keine Verbindung zum ESP habe?

Seit WINDUMM 8 gibt es ja die Kachelansicht, geht das mit base64 ICONS's?

 

[mikdoe]

Hi!

base64 ist mehr als 30 % größer als das Original. Das liegt daran, dass es kein Komprimierungsformat ist sondern eine Art Umkodierung in "harmlose" Zahlen und Buchstaben, hauptsächlich um Binärdaten transportfähig zu machen z. B. im Rahmen von MIME.

Die zweite Frage habe ich nicht verstanden. Du bringst die Windows Desktop Kacheln mit Favicons zusammen? Ich nutze weder Win 8 noch dessen Kacheln. Wie ist da der Zusammenhang zu Favicons?

 

[xorg1990]

Die zweite Frage habe ich nicht verstanden. Du bringst die Windows Desktop Kacheln mit Favicons zusammen? Ich nutze weder Win 8 noch dessen Kacheln. Wie ist da der Zusammenhang zu Favicons?

Nun, Windows 8 und Nachfolger speicher die favicons im Starter ab. Das nennt sich Windows Tiles.

Dadurch das die Kacheln unterschiedlich groß sind, brauch man unterschiedliche große Bilder.

Am besten du liest das hier mal:
https://www.edv-lehrgang.de/windows-tiles-und-browserconfig-xml/


Frage ist nur kommt Windows mit base64 als Tiles image klar? Ich glaube nämlich nicht.


Was alternativ funktioniert ist die Bilder RAW in den PROGMEM zu Packen:

//konvertiert mit https://littlevgl.com/image-to-c-array modus RAW
static const char image310x310[] PROGMEM = {
  0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d, 0x49, 0x48, 0x44, 0x52, 
  0x00, 0x00, 0x01, 0x36, 0x00, 0x00, 0x01, 0x36, 0x08, 0x06, 0x00, 0x00, 0x00, 0xeb, 0xbc, 0xbe,

Da kommt dann auch mal ein Array zu Stande mit ~52000 Feldern
Funktioniert aber grundsätzlich erst mal.

Möchte man alle Systeme mit einem Icon abdecken, kommt der meta -tag Wahn raus:

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/icon180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/icon192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/icon144x144.png">
    <meta name="theme-color" content="#ffffff">
    <meta name="msapplication-config" content="msconfig.xml">

Ich habe nur 64kb an Speicher zur Verfügung, das ist etwas Knapp

Einzige Abhilfe wäre ein ESP Modul mit 'nem größern Flash. Ich habe mich nun in die ESP-201 Module verliebt.

Der Artikel ist auch ganz nett (für die Nerds):
https://www.wunderwald.ch/esp/ESP_Webserver_fuer_richtige_Webseiten.pdf

Auch ganz interessant ist die "Fallstricke" von Stefan Frings:
ESP8266 und ESP8285 Module Anleitung

Es gibt allerdings noch viel, viel mehr Mankos vor allem was das WLAN betrift.

 

[kkapsner]

Wenn du IE ignorieren kannst/willst, könntest du ein svg als favicon verwenden: https://caniuse.com/#feat=link-icon-svg
Je nach Bild kann das viel kleiner als ein png sein.

EDIT: ich halte favicon als bas64 für keine gute Idee.

 

[xorg1990]

Hm, SVG macht sich natürlich ein wenig blöd wenn man ein Bild in Bitmap Form vorliegen hat.
Aber netter hinweis ich denke drüber nach.

Ich selbst halte base64 auch für kein gute Idee als favicon. Weil es höchstwahrscheinlich nicht gecached wird.
Es ist allerdings interessant was alles so möglich ist:Favicons im externen Stylesheet einer Homepage


Beim ESP8266 macht das schon sinn auf base64 zu setzten weil man sich unnötige Requests spart.