Search⌘ K
AI Features
Home
Courses
PHP for the Web: Learn PHP without a Framework

Adding a Favicon

Understand how to create and serve a favicon.ico file in your PHP project. Learn where to place the favicon in your project directory and how web servers locate and serve it so browsers display the icon in the tab.

We'll cover the following...

Resource /favicon.ico not found

We didn’t create a favicon.ico file yet, so the server failed to return such an icon to the browser (“No such file or directory”). You can replay what the browser did by opening http://APPLINK/favicon.ico in your browser. You should see something like this:

When you go back to your terminal, you should see a new line:

[...] [...] [404]: /favicon.ico - No such file or directory

This line is pretty much the same as the one we saw before.

Note: You don’t actually have to go anywhere and open any URL as we have already set everything up for you. Coding environments have been provided where you can practice everything you’ve learned within a lesson.

We have used http://APPLINK just as a placeholder. The actual URL link on which the application will be available after running the code is located below the Run button of all the coding areas given in a lesson. Keep in mind that the link won’t work until the execution of the code has been completed.

Creating a favicon

Let’s create a favicon right now. There are many tools available for doing this, but one that works directly from the browser is favicon.cc.

Draw something nice there, and click Download Favicon. The downloaded file will be called favicon.ico. Copy this file into your project directory, and put it next to the index.html file.

You should have two files in your project now:

  • index.html
  • favicon.ico

Go back to the browser, and open the URL http://APPLINK/favicon.ico once more. Now you should no longer see a “Not Found” message. The server can find that favicon.ico file and return it to the browser, which will show it to you.

Finally, go back to the index page again (http://APPLINK). You should now also see the favicon used in the browser tab. The browser has found it too.

Run it right now!

We have already set things up for you. Just run the code below and click the link given below the Run button to view the webpage in a separate tab. You will see the favicon.ico file. Now, go to the index page by removing /favicon.ico from the URL and check if the favicon appears in the browser tab.

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Index</title>
</head>

<body>
	<h1>This is the index</h1>
</body>

</html>

We can see that the browser has found the favicon. Superb!

Which file to serve?

How does the web server know if it should serve index.html or favicon.ico? In case the request is for http://APPLINK/favicon.ico, it’s easy. It will look in the project directory for a file with the name favicon.ico and return it to the browser. The directory where the server looks for files is called the document root.

In the case of index.html, there is a bit of extra logic. http://APPLINK is short for http://APPLINK/ (with an added / at the end). The browser will ask the server for a file named /. But / is a directory (the document root). When a URL points to a directory, the server looks in this directory for a file called index.html and returns this file to the browser.