Use of favicon.ico with webserver

@ Catweazle NZ

Very logical and efficient coding, Will take a closer look

Thank you for your sharing of this code and your comments!

William

Server test code for more efficient serving of files from the SD card to the client browser.

//zoomkat 12/26/12
//SD server test code
//open serial monitor to see what the arduino receives
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields

#include <SD.h>
#include <SPI.h>
#include <Ethernet.h>

byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 
  192, 168, 1, 102 }; // ip in lan
byte gateway[] = { 
  192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 
  255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port
String readString; 

//////////////////////

void setup(){

  Serial.begin(9600);

  // disable w5100 while setting up SD
  pinMode(10,OUTPUT);
  digitalWrite(10,HIGH);
  Serial.print("Starting SD..");
  if(!SD.begin(4)) Serial.println("failed");
  else Serial.println("ok");

  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  //delay(2000);
  server.begin();
  Serial.println("Ready");
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {
          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 
        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging 

            client.println("HTTP/1.1 200 OK"); //send new page
          //client.println("Content-Type: text/html");
          client.println("Content-Type: image/jpeg");
          //client.println("Content-Type: image/gif");
          //client.println("Content-Type: application/x-javascript");
          //client.println("Content-Type: text");

          client.println();

          //File myFile = SD.open("boom.htm");
          File myFile = SD.open("HYPNO.JPG");
          //File myFile = SD.open("BLUEH_SL.GIF");
          //File myFile = SD.open("SERVOSLD.HTM");

          if (myFile) {

            byte clientBuf[64];
            int clientCount = 0;

            while(myFile.available())
            {
              clientBuf[clientCount] = myFile.read();
              clientCount++;

              if(clientCount > 63)
              {
                // Serial.println("Packet");
                client.write(clientBuf,64);
                clientCount = 0;
              }
            }
            //final <64 byte cleanup packet
            if(clientCount > 0) client.write(clientBuf,clientCount);            
            // close the file:
            myFile.close();
          }
          delay(1);
          //stopping client
          client.stop();
          readString="";
        }
      }
    }
  } 
}

@ zoomkat

Tried your "Server Test Code" with my favicon code; works flawlessly.

I am using a dynamic web page of "Content-type test"; could you take a look and see if I am missing anything code wise pertaining to favicon? I am unable to display any favicon with the code as written.

Attached "Weather.txt"that responds to "GET," for path of /Weather; this is my dynamic web page.
Tried using code tags; however, formatting made it hard to read.

http://68.45.231.214:7388/Weather --will display dynamic web page.

William

Weather.txt (3.9 KB)

I am unable to display any favicon with the code as written.

Below are sites that can turn .jpg files and such into .ico files. I don't much about .ico files, but they may only be saved by a browser to display in the browser saved favorite links. Also you have used a lan url in your web page for the other files.

https://www.google.com/search?as_q=make+.ico+file&as_epq=&as_oq=&as_eq=&as_nlo=&as_nhi=&lr=&cr=&as_qdr=all&as_sitesearch=&as_occt=any&safe=images&as_filetype=&as_rights=&gws_rd=ssl

@ zoomkat

Created a "favicon.ico" using a favicon generator; then modified my project code with your code for "handling" file serving. Also, I eliminated the HTML links for the favicon.ico; since these "favicon.ico" request come from the client browser. "Favicon.ico" now displaying in client browser (Firefox 39.)

Thank you zoomkat!

Adaption-zoomkat code.txt (1.02 KB)

Hello everybody, I'll try to explain how I solved the problem with my favicon. I foun online good favicon generator ico generator , you can create your favicon using drawing tool or generator and upload your picture jpeg, png, gif and convert to 16x16 or 32x32 ico file, also you can found gallery with favicons created by other users and download if you wish. At the end read the description how to set up favicon at your site!