How do I add a favicon to my site

I’m trying to add a favicon to my site but not working below is my code

<title>Top rated credit card's - Credit And Habit</title>
		<link rel="icon" type="image/png" href="ari-_1_%20(3).png" sizes="16x16">

We would need to see your file structure to see if you’re linking to that PNG correctly. Also, I would rename the PNG file to something more simple and friendly, it’s good practice to use descriptive terms that show what the PNG file is.

Go to the Real Favicon Generator and follow the steps.

Use the links they give you in your HTML if you’re just using a static site. If you’re using a framework (django, express, etc.) configure it so that those files appear to come from your website root, just like in the HTML links they generate.

2 Likes

thanks for the link it look like a great website but it didn’t work for me. actual I don’t have right now a website it is just a html folder saved in my desktop.

1 Like

Then I would assume you’re not linking to it correctly.

Perhaps try adding the favicon to your page as an image file to ensure you’re linking to it correctly. Then copy that file path as a favicon.

I tried but still not working. maybe because it’s not published it will not work

It should work locally as long as you have the correct file path. I believe that’s what it is, but it’s hard to tell without actually seeing your directory.

here is the image thats working and wen I copy it as a favicon it’s not working

<img src="file:///C:/Users/regster%203/Documents/new%20program/program/favicon_package_v0.16/apple-touch-icon.png">

and here is the head of my code

<link rel="apple-touch-icon" sizes="180x180" href="file:///C:/Users/regster%203/Documents/new%20program/program/favicon_package_v0.16/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="file:///C:/Users/regster%203/Documents/new%20program/program/favicon_package_v0.16/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="file:///C:/Users/regster%203/Documents/new%20program/program/favicon_package_v0.16/favicon-16x16.png">
		<link rel="manifest" href="file:///C:/Users/regster%203/Documents/new%20program/program/favicon_package_v0.16/site.webmanifest">
		<link rel="mask-icon" href="file:///C:/Users/regster%203/Documents/new%20program/program/favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
		<meta name="msapplication-TileColor" content="#da532c">
		<meta name="theme-color" content="#ffffff">

Then that might be the problem. Favicon implementation is supposed to be standard, but isn’t always, because different browsers look for different files in different places. The favicon is supposed to be favicon.ico in the website root and most frameworks or servers have some configuration tricks to make that file appear to be in the website root when requested by the browser.

Since you’re not running a server, I would assume that it’s up to your browser on whether to follow a link to a filename on the local file system or not (seems like not). Image links in the body of a document will work this way, but I’m not sure favicons will since they are different. The only thing I would try is to set your favicon link as

    <link
      rel="icon"
      type="image/x-icon"
      href="favicon.ico"
      >

and make sure that you have the file favicon.ico in the same directory as index.html (or whatever the page’s file is named). Favicons have a standard file format and some browsers will ignore the wrong formats (or at least used to), so I would still get the file generated and then drop it in the directory with my page to see what happens.

3 Likes

thanks it seams to be that the problem is on my computer