Favicon HTML Code

Branding plays a vital role in web design. Using favicon helps to established a good feel and brand of your website.

What is favicon?

A favicon literally means favorite icon. This icon is saved on your computer when you add websites to your favorites or bookmark. Nowadays, this also serves as the identity of a website in the smallest version.

Where can I get a favicon?

There are various favicon generator out there. I use www.html-kit.com/favicon/. It works perfectly by uploading an image or a graphic.

HTML Code for Favicon

Place the HTML code inside the <head></head> tag.

.ico favicon

<link rel="shortcut icon" href="favicon.ico" />

.gif favicon

<link rel="icon" type="image/gif" href="animated_favicon1.gif">

combination of .ico and .gif

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">

Update!!!

Favicon for IOS (iPhone) and android phones

I strongly suggest to use this favicon generator tool to make favicon for all browser and mobile.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">

Favicon not showing up? Try these solutions.

  • The URL of the .ico or .gif is wrong
  • The favicon have different file name
  • They are working on a wrong page
  • They do not refresh/clear cache the web page

Note: Favicon don’t work on IE 6. It works when you bookmark the site.

Are you getting started with HTML?

Check out these helpful courses to improve your web development skills. These aren’t free but you can get big discounts you can get an 11-hour training for $10 which is the best deal that you can get. Click here to checkout the latest coupon codes.

Build Responsive Real World Websites with HTML5 and CSS3

If you’re a beginner in creating website this tutorial is right for you. You can watch video tutorials on your computer of mobile phone. Free software were use throughout the course and you don’t need a coding experience to get started.

Over 42,000 were enrolled and 7,000+ satisfied reviews!

take this course

FREE COURSE! Build Your First Website in 1 Week with HTML5 and CSS3

Since this is a free course, you would expect that many students will enroll. Over 118,000 are happy and you only need to learn HTML and CSS for 3 hours.

I strongly recommend this course if you want to have a good overview of what HTML and CSS is. If you want to be a professional web developer you can jump into other course to get in-depth knowledge of coding. For starters, this is the right place.

take this course