\n
...<\/span><\/pre>\n\n
<\/g><\/span>\r\n<\/g><\/span>\r\n<\/svg><\/span>\r\n)=====\"<\/span>);<\/span><\/pre>\n<\/div>\n<\/div>\nNote:\u00a0 XML must begin ON THE SAME LINE as the variable declaration.\u00a0 If not, the browser complains about XML not starting on the first line.\u00a0 Cyan text<\/span> above is the original SVG definition.<\/p>\n\n- Modify your HTML header to link to the SVG file:<\/li>\n<\/ol>\n
<!DOCTYPE HTML>\r\n<HTML><HEAD>\r\n<TITLE>My App v1.0<\/TITLE>\r\n<META http-equiv='refresh' content='$DELAY,.' \/>\r\n<LINK rel=\"icon\" href=\"\/favicon.svg\" type=\"image\/svg+xcml\"><\/span>\r\n<\/HEAD>\r\n<BODY>\r\n\r\n\/\/ your HTML here\r\n\r\n<\/BODY>\r\n<\/HTML><\/pre>\n\n- Create a server handler to serve out the referenced SVG file:<\/li>\n<\/ol>\n
\n
void setup(){\r\n\r\n \/\/*** Other setup code ***\r\n\r\n \/\/HTTP Server\r\n server.on(\"\/\" , normal_handler);\u00a0 \u00a0 \/\/this is your \r\n server.on(\"\/favicon.svg\" , handleFavicon);\u00a0 \/\/favicon handler\r\n server.begin();\r\n\r\n \/\/*** Other setup code \r\n}\r\n\r\n...\r\n\r\nvoid handleFavicon(void){\r\n server.send(200,\"image\/svg+xml\",favicon_svg<\/span>);\r\n}<\/pre>\n<\/div>\nThe pay careful attention to the content types – unless everything is configured properly, the browser will refuse it.\u00a0 “favicon_svg” is the variable we are declaring in “favicon.svg.h”.<\/p>\n
<\/p>\n
<\/span>Why Inline PNG Did Not Pan Out<\/span><\/h2>\nAt first, things worked great.\u00a0 As I started adding more content, I realized that the ESP became increasingly unstable.<\/p>\n
After MUCH troubleshooting, here is the problem:<\/p>\n
\n- server.send() writes the ENTIRE document as a single string and sends it back to the client.\u00a0 There is probably a way to break this up in to two or more strings, and then store each in its own variable, but this is way more complicated than using server.send()<\/li>\n
- As you build the HTML, every time you use a String function to concatenate or replace, behind the scenes it’s creating a NEW string and then copying all of the data from the other strings.<\/li>\n
- With 3000 extra bytes of base64-encoded PNG in there, it was having to copy the icon over and over and over in memory just to serve up a simple application.<\/li>\n<\/ul>\n
Using the code above and SVG format, the response to the client can be much more easily stored in a single variable without thousands of bytes of overhead.\u00a0 When the browser asks for favicon.svg, the extra handler we set up serves it directly from PROGMEM without even having to copy it.\u00a0 Well…maybe the server object copies it in to a buffer, not sure.\u00a0 But WE don’t have to copy it.\u00a0 So even though the client may request it repeatedly, the ESP just keeps serving the same static content, with no string manipulation required.<\/p>\n
The other problem I think I was having with sending raw PNG is that I suspect server.send(), expecting a string, can’t handle binary data.\u00a0 Since SVG is explicitly text, it doesn’t have that problem with SVG.<\/p>\n
Another nice thing about linking the SVG is that you can test it by going to http:\/\/[whateverYourESPipAddressIs]\/favicon.svg – this should display the favicon in your browser.<\/p>\n
<\/p>\n
<\/span>OLD Step by Step Solution (Uses base64-encoded PNG)<\/span><\/h2>\nOverview – add an icon <LINK> reference containing an inline, base64-encoded PNG to the document header.<\/p>\n
\n- Go design \/ borrow \/ draw \/ photograph your website icon.\u00a0 48×48 pixels is an appropriate resolution.\u00a0 Save as PNG format or convert to PNG.\u00a0 The rest of the steps assume the icon file is saved as favicon.png<\/strong>.<\/li>\n
- Convert to base64.<\/li>\n<\/ol>\n
base64 favicon.png > favicon.h<\/pre>\n\n- Add favicon.h to your project.\u00a0 Be sure to add “include” to your main INO file:<\/li>\n<\/ol>\n
#include \"favicon.h\"<\/pre>\n\n- Edit the base64 file (favicon.h) to add a variable declaration and HTML syntax:<\/li>\n<\/ol>\n
\n
const String favicon = F(<\/span>R\"=====(<\/span><link href=\"data:image\/x-icon;base64,<\/span>\r\niVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAwnpUWHRSYXcgcHJvZmlsZSB0eXBl<\/span>\r\nIGV4aWYAAHjabVDBEcMgDPt7io4AyBB7HNKkd92g49eAk4a2ukMRlk8xpv31fNCtIUUmzosULSUY<\/span>\r\nWFlTNSFhoHaOgTt3wC27T3U6jWQlfDqleP9Rj2fA+FRT+RIkdzfW2VD2fPkKSj5Zm6jpzYPUg5CG<\/span>\r\nET2gjmeForJcn7DuYYaMQ41Y5rF\/7ottb8v2H6S0IyIYAzwGQDuFUE2gs1qjNZlmqDGgHmYL+ben<\/span>\r\nA\/QG3cVZGvmEWAMAAAGFaUNDUElDQyBwcm9maWxlAAB4nH2Rv0vDQBzFX1ulRSoOVhB1yFB1sYuK<\/span>\r\nONYqFKFCqBVadTC59Bc0aUhSXBwF14KDPxarDi7Oujq4CoLgDxD\/AHFSdJESv5cUWsR4cNyHd\/ce<\/span>\r\nd+8Af6PCVLMrDqiaZaSTCSGbWxWCrwgghAGMY1hipj4niil4jq97+Ph6F+NZ3uf+HL1K3mSATyCO<\/span>\r\nM92wiDeIZzYtnfM+cYSVJIX4nHjCoAsSP3JddvmNc9FhP8+MGJn0PHGEWCh2sNzBrGSoxNPEUUXV<\/span>\r\nKN+fdVnhvMVZrdRY6578heG8trLMdZojSGIRSxAhQEYNZVRgIUarRoqJNO0nPPxDjl8kl0yuMhg5<\/span>\r\nFlCFCsnxg\/\/B727NwtSkmxROAN0vtv0xCgR3gWbdtr+Pbbt5AgSegSut7a82gNlP0uttLXoE9G0D<\/span>\r\nF9dtTd4DLneAwSddMiRHCtD0FwrA+xl9Uw7ovwV61tzeWvs4fQAy1FXqBjg4BMaKlL3u8e5QZ2\/\/<\/span>\r\nnmn19wOXfXK13okkWAAADXhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw\/eHBhY2tldCBiZWdp<\/span>\r\nbj0i77u\/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEgeG1sbnM6<\/span>\r\neD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDQuNC4wLUV4aXYyIj4KIDxyZGY6<\/span>\r\nUkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5z<\/span>\r\nIyI+CiAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgIHhtbG5zOnhtcE1NPSJodHRw<\/span>\r\nOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5h<\/span>\r\nZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgIHhtbG5zOmRjPSJodHRw<\/span>\r\nOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgIHhtbG5zOkdJTVA9Imh0dHA6Ly93d3cu<\/span>\r\nZ2ltcC5vcmcveG1wLyIKICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8x<\/span>\r\nLjAvIgogICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICB4bXBN<\/span>\r\nTTpEb2N1bWVudElEPSJnaW1wOmRvY2lkOmdpbXA6Mzk0OTdlOTgtMDNlNy00YzhjLWE3OTUtYzA3<\/span>\r\nMTU0YmMzMjNhIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBkOGIwMDU1LWY1OGQtNDMx<\/span>\r\nMi1iZjQyLTJiMzEwODc1NjJmOCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlk<\/span>\r\nOjk1OGM2YjAzLTc5NmUtNDlkOC04NTE0LTczMzdmNDBiNWMzMiIKICAgZGM6Rm9ybWF0PSJpbWFn<\/span>\r\nZS9wbmciCiAgIEdJTVA6QVBJPSIyLjAiCiAgIEdJTVA6UGxhdGZvcm09IkxpbnV4IgogICBHSU1Q<\/span>\r\nOlRpbWVTdGFtcD0iMTc3MzA3MTM3OTY2MDIwOCIKICAgR0lNUDpWZXJzaW9uPSIyLjEwLjM0Igog<\/span>\r\nICB0aWZmOk9yaWVudGF0aW9uPSIxIgogICB4bXA6Q3JlYXRvclRvb2w9IkdJTVAgMi4xMCIKICAg<\/span>\r\neG1wOk1ldGFkYXRhRGF0ZT0iMjAyNjowMzowOVQxMDo0OTozOS0wNTowMCIKICAgeG1wOk1vZGlm<\/span>\r\neURhdGU9IjIwMjY6MDM6MDlUMTA6NDk6MzktMDU6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAg<\/span>\r\nIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAg<\/span>\r\nc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpkMjlmYzAw<\/span>\r\nNi03Mjk1LTQ3OTYtYmU3YS1kNTM3MTFkODAxYzIiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9<\/span>\r\nIkdpbXAgMi4xMCAoTGludXgpIgogICAgICBzdEV2dDp3aGVuPSIyMDI2LTAzLTA5VDEwOjQ5OjM5<\/span>\r\nLTA1OjAwIi8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNj<\/span>\r\ncmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAK<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg<\/span>\r\nIAogICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI\/PmARca0AAADq<\/span>\r\nUExURfvUM\/\/\/\/wAAABQVGAAAFv\/YNP\/aNP\/cNfvTKfvSHf\/bNPvRFfvSJPvTLQAAFRETGPvXRP3o<\/span>\r\nn\/7xxvzihP\/99\/zjif\/66v700v744\/bQMvzkjvzgePvVOPvaWv733v\/++v3rrQsPGPzebP3po9e2<\/span>\r\nLpmCJv3uu7qeKgAJF8OlKP7yyf701PvZUOrGMSwoGk1DHeXBLjsyDF9RE3NhFx0dGUQ7HIx3JKmP<\/span>\r\nKGlaIFlMHn1rIvzecSchCIFtGhEOA413HC0mCc+vKjozG1NIHbCWKTArGiUjGXNiIUc8Dh0YBr6g<\/span>\r\nJlJGEDQsC0I4DYFzfZMAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH<\/span>\r\n6gMJDzEnKahS+gAAAcZJREFUSMetlm1vwiAQx0\/4AJqW1KAkrYsP2YTE2fiQNLUh+kLnvv\/nWWun<\/span>\r\nBUprcfu\/Anq\/chzHAfRMkWE0Sjhjg7dRNCS1z2BYez4DRcz3SAtAIg418Yg0AOHcYn5D5qENCHxo<\/span>\r\nlB\/UgSWHFvGlCXgMWsU8HXhmXxElsHxqnxPLCgg4dBAP7kA4hk7yw19gDh01LwGiOUTltOpMJdWc<\/span>\r\nIjcg0uz3GM\/unS3Ge42ICkCfYIcx7suyLfM23hlTQM\/TJtgURtvHBBhvtCm8HNBSSEwKo2PZORbt<\/span>\r\nidAC1QPCXABGYAh1l9Kyk9Zdys0jPdTFonHjovM4wUgfEHvc3z7C2sd7oX8fQWLsZtvG5UqAg5M4<\/span>\r\nMDeAuQPOLiVuQKKElYomK0GVsFYbN1s3EDTOlI2rUkOi2ErQDEklNZTk26HryuJPijI1+ZT0zn91<\/span>\r\nOZlbK88opmp6qwcoJ9B5IdQ8iRFSl+YZR5TuDghd4pNcCbGavmefCKGUGkdULwLyijTpPka2MrM4<\/span>\r\nV+aHbGUpM2Yho3K2\/j6gyzn9EtZCZiuVVAhaGxyHrxZj93Lf6UL5+NuV5X4ptl+74+A\/Lnb3p8ML<\/span>\r\nj5Pq+TNgjCfW588PLVM0F+a3EicAAAAASUVORK5CYII=<\/span>\"\r\nrel=\"icon\" type=\"image\/x-icon\" \/><\/span>\r\n)=====\"<\/span>);<\/span><\/pre>\n<\/div>\n\n- Add favicon to the HTML header:<\/li>\n<\/ol>\n
String html=\"\";\r\nhtml+=\"<!DOCTYPE HTML><HEAD>\";\r\nhtml+=\"<TITLE>My App!<\/TITLE>\";\r\nhtml+=favicon;<\/span>\r\nhtml+=\"<\/HEAD>\";\r\nhtml+=\"<BODY>\";\r\n\r\n...app code...\r\n\r\nhtml+=\"<\/BODY><\/HTML>\";\r\n\r\n\/\/send html to client<\/span>\r\nserver.send(200,text\/html,html);<\/pre>\nSince the header of EVERY page must include the favicon link, I have my header declared statically, and do a string replace.<\/p>\n
Here is the result:<\/p>\n
![\"\"](\"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-content\/uploads\/ss-favicon-600x331.png\")
<\/p>\n
Note:<\/p>\n
\n- Correct icon in upper-left<\/li>\n
- No failed call to favicon.ico<\/li>\n<\/ul>\n
<\/p>\n
<\/span>Stuff that DID NOT Work<\/span><\/h2>\nI tried adding a server handler for \/favicon.ico and then passing binary file data back to the client.\u00a0 This fails for some uknown reason.\u00a0 I tried multiple file formats and variable declaration formats, and honestly couldn’t get it to work.<\/p>\n
The method above is simple and reliable.\u00a0 Unfortunately, it adds 4k to the payload on every page refresh, but that’s not a huge amount of overhead.<\/p>\n
UPDATE:\u00a0 Add this to the list of stuff that did not work.<\/p>\n
<\/p>\n
<\/span>OLD Detailed Explanation (base64-encoded PNG)<\/span><\/h2>\nLooking at the color-coded code sample above:<\/p>\n
\n\n\n| Color<\/th>\n | Meaning<\/th>\n | <\/td>\n<\/tr>\n |
\n| \u2588<\/span><\/td>\n | c++ variable declaration.<\/td>\n | <\/td>\n<\/tr>\n |
\n| \u2588<\/span><\/td>\n | c++ syntax for preformatted, multiliine string<\/td>\n | <\/td>\n<\/tr>\n |
\n| \u2588<\/span><\/td>\n | HTML syntax<\/td>\n | <\/td>\n<\/tr>\n |
\n| \u2588<\/span><\/td>\n | base64-encoded favicon.png<\/td>\n | <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n C declaration:<\/p>\n |