Stephen asked 2 years ago
Hello Sara & Rui,
re. Build Web Server ESP32 v2.2 Course – Page 184.
In previous sections of the course I have been able to replace the ‘favicon.png’ with my own ‘stilsonsFull.png’ and call it successfully from the .html file.
I cannot call it from the ‘1-2 Hello World WS SPIFFS’ web page.
Attempt 1, I have included MY icon image file in the ‘data’ directory and changed the ‘href=’ to href=”stilsonsFull.jpg” in the .html file, uploaded both – with no success.
Attempt 2, I have renamed my icon to ‘favicon.png’ , changed the href= back to href=”favicon.png” uploaded both – still with no success.
After Uploading Filesystem Image and Hello World files the Icon is still the original ‘favicon.png’ image.
How can I use my own icon in the Web Page Title?
Regards,
Stephen
Sara Santos Staff answered 2 years ago
Hi.
Did you hard refresh the web browser?
When you added your own picture for favicon, what did you change in the code? Can you share the lines of code?
Regards,
Sara
Stephen answered 2 years ago
Good morning Sara.
Yes I did refresh the browser, I’m using Firefox.
main.cpp follows:-
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include “SPIFFS.h”
// Replace with your network credentials
const char* ssid = “my ssid”;
const char* password = “my pw”;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
// Initialise SPIFFS W/- this Function to be called in ‘setup()’
void initSPIFFS() {
if (!SPIFFS.begin(true)) {
Serial.println(“An error has occurred while mounting SPIFFS”);
}
else{
Serial.println(“SPIFFS mounted successfully”);
}
}
// Initialise WiFi w/- this Function to be called in ‘setup()’
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print(“Connecting to WiFi ..”);
while (WiFi.status() != WL_CONNECTED) {
Serial.print(‘.’);
delay(1000);
}
Serial.println(WiFi.localIP());
}
void setup() {
Serial.begin(115200);
initWiFi();
initSPIFFS();
server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request)
{
request->send(SPIFFS, “/index.html”, “text/html”);
});
server.serveStatic(“/”, SPIFFS, “/”);
server.begin();
}
void loop() {
}
index.html – code follows:-
<!DOCTYPE html>
<html>
<head>
<title>Stevie’s ESP Web Server</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<link rel=”icon” type=”image/png” href=”favicon.png”>
</head>
<body>
<h3>G’Day Stevie!</h3>
<h3>HowYa Goin’?</h3>
<p>Well Done Mate !!<br>Looks Like it’s working – Beaudy..</p>
</body>
</html>
The ‘data’ folder includes:-
-index.html,
-#styles.css,
and the ‘favicon.png’ file (the favicon.png file is actually my own image renamed however the browser still displays your original image, it is not picking up my own image ???
Regards,
Stephen.
Sara Santos Staff answered 2 years ago
If you go to the web server IP address followed by /favicon.png, what do you see?
Did you upload the filesystem image again?
Did you refresh the web browser with CTRL+F5.?
Regards.
Sara
Stephen answered 2 years ago
Hello Sara (well done to win World Cup down here, Spain played beautifully)
It appears I have found the problem and have fixed it –
Firefox was storing the favicon in cache and restarting FF did not clear the cache.
Another web site suggested clearing the cache and this worked, using Control+F5 is much faster of course.
This link also shows how to ‘Force FireFox to reload page ignoring cache’
https://resrequest.helpspot.com/index.php?pg=kb.page&id=385
Thanks again for your help,
Stephen.
Sara Santos Staff answered 2 years ago
Great.
I’m glad the issue is solved.
I’ll mark this issue as resolved. If you need further help, you just need to open a new question in our forum.
Regards,
Sara