Favicon is a portmanteau of the words Favorites+icon
A “favicon” is the little icon that appears in various places in your browser & if a favicon is available, it will replace the standard Chrome/Firefox/Microsoft/Safari etc logo. Depending once again on the browser, it may appear in the address bar, the title bar, and on the tabs, and it should appear in your bookmarks (or favorites) if you bookmark the site. Your Windows computer is full of icons — just do a search for *.ico and see what turns up!
In this post:
Required knowledge:
1. Google specifications
I updated this tutorial in October 2024 after reading an article about Google’s updated specifications & recommendations for favicons. [1]
2. Create
Creating your favicon icon is super easy using one of the many online graphics websites. Try https://icoconvert.com/ and follow the instructions. You simply upload an image, generate the icon which is then displayed to you, and if you like it, you can download it.
3. Syntax
Copy your icon file into your website folder and add the following line of HTML between the <head> tags of each page:
<link rel="icon" type="image/x-icon" href="icon-name.ico">
The href attribute in the above code requires the web page and the icon file to be in the same directory. It can also be a relative path.
The name of the icon file is usually “favicon”, but this is not a requirement.
4. Example
The final code looks something like this:
<head>
<title>stylus: Engage, Inspire, Achieve!</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
5. Test
Your favicon will appear like this in browser tabs:
References:
- Montti, R. (2024) Google Now Recommends Higher Resolution Favicons, Search Engine Journal. Available at: https://www.searchenginejournal.com/google-now-recommends-higher-resolution-favicons/530793/ (Accessed: 26 October 2024).
- W3Schools Online Web Tutorials, W3Schools.com (no date) HTML Favicon. Available at: https://www.w3schools.com/html/html_favicon.asp (Accessed: 26 October 2024).