[GH-ISSUE #1397] Change favicon #1196

Closed
opened 2026-02-28 01:28:57 +03:00 by kerem · 12 comments
Owner

Originally created by @by-pm on GitHub (Apr 19, 2022).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1397

Hi,

Is it possible to change the favicon of the WifiManager? I'd like to put my logo init.

Thanks,
pienmatla.

Originally created by @by-pm on GitHub (Apr 19, 2022). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1397 Hi, Is it possible to change the favicon of the WifiManager? I'd like to put my logo init. Thanks, pienmatla.
kerem 2026-02-28 01:28:57 +03:00
  • closed this issue
  • added the
    Question
    label
Author
Owner

@makeSmartio commented on GitHub (Apr 19, 2022):

I haven't done it via the samples here, but you can set it with this line in Setup:

client.print("HTTP/1.1 301 Moved Permanently\r\nLocation: http://{ipAddress}/favicon.ico\r\n\r\n");

<!-- gh-comment-id:1103162514 --> @makeSmartio commented on GitHub (Apr 19, 2022): I haven't done it via the samples here, but you can set it with this line in Setup: client.print("HTTP/1.1 301 Moved Permanently\r\nLocation: http://{ipAddress}/favicon.ico\r\n\r\n");
Author
Owner

@tablatronix commented on GitHub (Apr 19, 2022):

Yeah there is a custom head html setter, you would have to use a base64 image though

<!-- gh-comment-id:1103187226 --> @tablatronix commented on GitHub (Apr 19, 2022): Yeah there is a custom head html setter, you would have to use a base64 image though
Author
Owner

@tablatronix commented on GitHub (Apr 19, 2022):


  const char* icon = "<link rel='icon' type='image/png' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADQElEQVRoQ+2YjW0VQQyE7Q6gAkgFkAogFUAqgFQAVACpAKiAUAFQAaECQgWECggVGH1PPrRvn3dv9/YkFOksoUhhfzwz9ngvKrc89JbnLxuA/63gpsCmwCADWwkNEji8fVNgotDM7osI/x777x5l9F6JyB8R4eeVql4P0y8yNsjM7KGIPBORp558T04A+CwiH1UVUItiUQmZ2XMReSEiAFgjAPBeVS96D+sCYGaUx4cFbLfmhSpnqnrZuqEJgJnd8cQplVLciAgX//Cf0ToIeOB9wpmloLQAwpnVmAXgdf6pwjpJIz+XNoeZQQZlODV9vhc1Tuf6owrAk/8qIhFbJH7eI3eEzsvydQEICqBEkZwiALfF70HyHPpqScPV5HFjeFu476SkRA0AzOfy4hYwstj2ZkDgaphE7m6XqnoS7Q0BOPs/sw0kDROzjdXcCMFCNwzIy0EcRcOvBACfh4k0wgOmBX4xjfmk4DKTS31hgNWIKBCI8gdzogTgjYjQWFMw+o9LzJoZ63GUmjWm2wGDc7EvDDOj/1IVMIyD9SUAL0WEhpriRlXv5je5S+U1i2N88zdPuoVkeB+ls4SyxCoP3kVm9jsjpEsBLoOBNC5U9SwpGdakFkviuFP1keblATkTENTYcxkzgxTKOI3jyDxqLkQT87pMA++H3XvJBYtsNbBN6vuXq5S737WqHkW1VgMQNXJ0RshMqbbT33sJ5kpHWymzcJjNTeJIymJZtSQd9NHQHS1vodoFoTMkfbJzpRnLzB2vi6BZAJxWaCr+62BC+jzAxVJb3dmmiLzLwZhZNPE5e880Suo2AZgB8e8idxherqUPnT3brBDTlPxO3Z66rVwIwySXugdNd+5ejhqp/+NmgIwGX3Py3QBmlEi54KlwmjkOytQ+iJrLJj23S4GkOeecg8G091no737qvRRdzE+HLALQoMTBbJgBsCj5RSWUlUVJiZ4SOljb05eLFWgoJ5oY6yTyJp62D39jDANoKKcSocPJD5dQYzlFAFZJflUArgTPZKZwLXAnHmerfJquUkKZEgyzqOb5TuDt1P3nwxobqwPocZA11m4A1mBx5IxNgRH21ti7KbAGiyNn3HoF/gJ0w05A8xclpwAAAABJRU5ErkJggg==' />";

  // set custom html head content , inside <head>
  wm.setCustomHeadElement(icon);

Screen Shot 2022-04-19 at 4 42 03 PM

<!-- gh-comment-id:1103201185 --> @tablatronix commented on GitHub (Apr 19, 2022): ```c++ const char* icon = "<link rel='icon' type='image/png' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADQElEQVRoQ+2YjW0VQQyE7Q6gAkgFkAogFUAqgFQAVACpAKiAUAFQAaECQgWECggVGH1PPrRvn3dv9/YkFOksoUhhfzwz9ngvKrc89JbnLxuA/63gpsCmwCADWwkNEji8fVNgotDM7osI/x777x5l9F6JyB8R4eeVql4P0y8yNsjM7KGIPBORp558T04A+CwiH1UVUItiUQmZ2XMReSEiAFgjAPBeVS96D+sCYGaUx4cFbLfmhSpnqnrZuqEJgJnd8cQplVLciAgX//Cf0ToIeOB9wpmloLQAwpnVmAXgdf6pwjpJIz+XNoeZQQZlODV9vhc1Tuf6owrAk/8qIhFbJH7eI3eEzsvydQEICqBEkZwiALfF70HyHPpqScPV5HFjeFu476SkRA0AzOfy4hYwstj2ZkDgaphE7m6XqnoS7Q0BOPs/sw0kDROzjdXcCMFCNwzIy0EcRcOvBACfh4k0wgOmBX4xjfmk4DKTS31hgNWIKBCI8gdzogTgjYjQWFMw+o9LzJoZ63GUmjWm2wGDc7EvDDOj/1IVMIyD9SUAL0WEhpriRlXv5je5S+U1i2N88zdPuoVkeB+ls4SyxCoP3kVm9jsjpEsBLoOBNC5U9SwpGdakFkviuFP1keblATkTENTYcxkzgxTKOI3jyDxqLkQT87pMA++H3XvJBYtsNbBN6vuXq5S737WqHkW1VgMQNXJ0RshMqbbT33sJ5kpHWymzcJjNTeJIymJZtSQd9NHQHS1vodoFoTMkfbJzpRnLzB2vi6BZAJxWaCr+62BC+jzAxVJb3dmmiLzLwZhZNPE5e880Suo2AZgB8e8idxherqUPnT3brBDTlPxO3Z66rVwIwySXugdNd+5ejhqp/+NmgIwGX3Py3QBmlEi54KlwmjkOytQ+iJrLJj23S4GkOeecg8G091no737qvRRdzE+HLALQoMTBbJgBsCj5RSWUlUVJiZ4SOljb05eLFWgoJ5oY6yTyJp62D39jDANoKKcSocPJD5dQYzlFAFZJflUArgTPZKZwLXAnHmerfJquUkKZEgyzqOb5TuDt1P3nwxobqwPocZA11m4A1mBx5IxNgRH21ti7KbAGiyNn3HoF/gJ0w05A8xclpwAAAABJRU5ErkJggg==' />"; // set custom html head content , inside <head> wm.setCustomHeadElement(icon); ``` ![Screen Shot 2022-04-19 at 4 42 03 PM](https://user-images.githubusercontent.com/807787/164106742-8a39a2ea-da6c-4355-bbd1-2f050e8b8dce.png)
Author
Owner

@tablatronix commented on GitHub (Apr 19, 2022):

You could also add a custom webhook and return an image from whereever, spiffs and proper header etc.

Or just modify the strings.h file and add it there

<!-- gh-comment-id:1103202213 --> @tablatronix commented on GitHub (Apr 19, 2022): You could also add a custom webhook and return an image from whereever, spiffs and proper header etc. Or just modify the strings.h file and add it there
Author
Owner

@by-pm commented on GitHub (Apr 20, 2022):

I think I might be too new in C/C++ for this haha. Anyone who can explain what to do exactly to change it? :)

<!-- gh-comment-id:1103567361 --> @by-pm commented on GitHub (Apr 20, 2022): I think I might be too new in C/C++ for this haha. Anyone who can explain what to do exactly to change it? :)
Author
Owner

@tablatronix commented on GitHub (Apr 20, 2022):

Do you know how to encode the image ? (its web design)

this just adds this html into the <head> of the output
and needs to be set before anything else like autoconnect() etc

const char* customhtmlhead = "BLARGHHHHH";
wm.setCustomHeadElement(customhtmlhead);
<!-- gh-comment-id:1104338553 --> @tablatronix commented on GitHub (Apr 20, 2022): Do you know how to encode the image ? (its web design) this just adds this html into the <head> of the output and needs to be set before anything else like autoconnect() etc ``` const char* customhtmlhead = "BLARGHHHHH"; wm.setCustomHeadElement(customhtmlhead); ```
Author
Owner

@by-pm commented on GitHub (May 29, 2022):

I know how to create a base64 image, i always use base64-image.de

But i dont know where to change any code haha, as in which file or something.
Someone told me i can do it for you but i wanna learn it myself ofcourse :)

<!-- gh-comment-id:1140453209 --> @by-pm commented on GitHub (May 29, 2022): I know how to create a base64 image, i always use base64-image.de But i dont know where to change any code haha, as in which file or something. Someone told me i can do it for you but i wanna learn it myself ofcourse :)
Author
Owner

@tablatronix commented on GitHub (May 29, 2022):

I added an example to the kitchen sink example, hit up the discord for chat its not veyr active but theres a few folks in there

https://github.com/tzapu/WiFiManager/blob/master/examples/Super/OnDemandConfigPortal/OnDemandConfigPortal.ino#L147

<!-- gh-comment-id:1140455831 --> @tablatronix commented on GitHub (May 29, 2022): I added an example to the kitchen sink example, hit up the discord for chat its not veyr active but theres a few folks in there https://github.com/tzapu/WiFiManager/blob/master/examples/Super/OnDemandConfigPortal/OnDemandConfigPortal.ino#L147
Author
Owner

@by-pm commented on GitHub (May 29, 2022):

Hmm i cant find that line number in my code tho. I use the wifimanager whitin another project: https://github.com/ESPWortuhr/Wortuhr

And this is the icon i wanna use:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACZElEQVQ4y5WR30tTYRjHv+fwnvO87zlnO/7YdsYpydbUubnpNHI/nNNlE3NDwkzC6y7C6LaL8CIhiO67KC+EMuo/KJCkG/FWEC+C8iIoiArKCF3mTjebbKhUz933hc/n+fECAC5PTUn4z7pYKMgHwWNZD4dyOfGv8LlEwu9qaLh78KAKsam73euZbNb9N7g7Hj/Ndf0TI3pSJ2BEjjCMtz19fZ7j4Fg83kWa9k3hfOdMe3umTqAKUVI43+O6/iGRSp2sBQvFItpCoYQqxE9ViB+RaLQvlck01wmEYWy1hUJjCucl0rQvXd3d7QBwe24OwY6OUYXzXdK0r7F4vKM1EJhUOF88JLgzP4/OSCRV6bQdicXigWDwSmWyjz29vS1c14kR7Ry6gTCMrWoOR6MxVYjvCuclhWhfM4x3yXTaCwCMiDOi3apAxhEV6ezcME1zwXEcVVXVzXA43Lu2uvq5MD0Nn9ebBaDUAbUTZIeHJcu27zOisss0V5PptAYA12dnEQgGpxTO9xiRc+QK5/N52ePzLTAix2xqejGSz6sAcGlyEqcCgWsK5/vCMN4zot9HChTOGxnRfqPH82xgcJABwIXRUcluabnFiMq6273h8/ut2hvUCVQhGj2W9WC8WJQB4OrMjOS37XuMqGyY5tpQLqcxIjpWcLa/XypOTEgAMJjNyh7LelRZ52VqYIAqv3BYwHV9XXe731Tz2Pi43Oz1PlaFKDV7vc9H8nlW04yrQmyrQiwCAAOAZCKRlWVZerW8DABwuVyOz+e7EY1Gb56w7e2nS0vlqiCZTJYkx2mFJP16vbKCP8G9l0P6iF3cAAAAAElFTkSuQmCC

<!-- gh-comment-id:1140456764 --> @by-pm commented on GitHub (May 29, 2022): Hmm i cant find that line number in my code tho. I use the wifimanager whitin another project: https://github.com/ESPWortuhr/Wortuhr And this is the icon i wanna use: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACZElEQVQ4y5WR30tTYRjHv+fwnvO87zlnO/7YdsYpydbUubnpNHI/nNNlE3NDwkzC6y7C6LaL8CIhiO67KC+EMuo/KJCkG/FWEC+C8iIoiArKCF3mTjebbKhUz933hc/n+fECAC5PTUn4z7pYKMgHwWNZD4dyOfGv8LlEwu9qaLh78KAKsam73euZbNb9N7g7Hj/Ndf0TI3pSJ2BEjjCMtz19fZ7j4Fg83kWa9k3hfOdMe3umTqAKUVI43+O6/iGRSp2sBQvFItpCoYQqxE9ViB+RaLQvlck01wmEYWy1hUJjCucl0rQvXd3d7QBwe24OwY6OUYXzXdK0r7F4vKM1EJhUOF88JLgzP4/OSCRV6bQdicXigWDwSmWyjz29vS1c14kR7Ry6gTCMrWoOR6MxVYjvCuclhWhfM4x3yXTaCwCMiDOi3apAxhEV6ezcME1zwXEcVVXVzXA43Lu2uvq5MD0Nn9ebBaDUAbUTZIeHJcu27zOisss0V5PptAYA12dnEQgGpxTO9xiRc+QK5/N52ePzLTAix2xqejGSz6sAcGlyEqcCgWsK5/vCMN4zot9HChTOGxnRfqPH82xgcJABwIXRUcluabnFiMq6273h8/ut2hvUCVQhGj2W9WC8WJQB4OrMjOS37XuMqGyY5tpQLqcxIjpWcLa/XypOTEgAMJjNyh7LelRZ52VqYIAqv3BYwHV9XXe731Tz2Pi43Oz1PlaFKDV7vc9H8nlW04yrQmyrQiwCAAOAZCKRlWVZerW8DABwuVyOz+e7EY1Gb56w7e2nS0vlqiCZTJYkx2mFJP16vbKCP8G9l0P6iF3cAAAAAElFTkSuQmCC
Author
Owner

@by-pm commented on GitHub (May 29, 2022):

So if someone has time and wanna have a look (bc i use the wifimanager in another project i mentioned above) that would be great. If not, i understand :) Let me know, thanks in advance :)

<!-- gh-comment-id:1140459869 --> @by-pm commented on GitHub (May 29, 2022): So if someone has time and wanna have a look (bc i use the wifimanager in another project i mentioned above) that would be great. If not, i understand :) Let me know, thanks in advance :)
Author
Owner

@tablatronix commented on GitHub (May 31, 2022):

What version of wm is it?

<!-- gh-comment-id:1141630602 --> @tablatronix commented on GitHub (May 31, 2022): What version of wm is it?
Author
Owner

@by-pm commented on GitHub (May 31, 2022):

The only thing I can find is @Version 0.0.0 in the WifiManager.cpp and WifiManager.h files.

<!-- gh-comment-id:1141930740 --> @by-pm commented on GitHub (May 31, 2022): The only thing I can find is @Version 0.0.0 in the WifiManager.cpp and WifiManager.h files.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/WiFiManager#1196
No description provided.