Hey people, I made a music website html and css

Informal
54

You’ll have to make an image that is at least squared (so width and height must be equal); also, what I suggest is that the logo is visible to the eye of the one who opens the website in the browser’s tab (so don’t write things that might be only readable on a square with size 256x256 for example). For example, I have a 32x32 image that is also visible without losing all the detail of the logo itself. Anyway either 16x16, 32x32 or 64x64 are fine.

After this, make sure to save it in ICO (or at least convert it so that the ICO file is in a format that makes the logo visible on the browser tab), then most browsers might already detect a favicon if it’s saved as favicon.ico on your home page (and so upload it on your htdocs folder), but if it doesn’t add this to your head tag on every page of your website:

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

Also make sure to replace favicon.ico with the name of the file you uploaded into your htdocs folder and image/x-icon with the MIME type of the image you uploaded if different from an ICO file. Like this, you won’t have problems with showing the website logo on other pages that aren’t in the root folder (so not the home page) and the home page itself, which is in the root folder. Even other image formats might work fine, but I only tried it with ICO in my case.

5 Likes
55

JxstErg1 Thanks I have made my logo and it works now :slight_smile:

1 Like
56

I also checked your website, but I still can’t see it… Did you make sure the file is uploaded correctly or was it my browser cache? I also tried to browse your website through incognito mode if that helps…

4 Likes
57

It seems to work in google chrome but not in Microsoft Edge, if your using google chrome exit and enter the browser again

58

It took me another incognito mode attempt for me to see it as an image, but still not working as a favicon…

3 Likes
59

try again please changed some settings should work in chrome don’t know why it isn’t working on edge

60

I got it working Microsoft Edge let me upload it

61

please refresh your browser now :slight_smile:

62

This code I edited

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

Now it works! So the rel="shortcut icon" made it work.

5 Likes
64

Well the id i added and href=“favicon.ico?” question mark at the end of that

65

You did the right thing, as the ? in the end of the URL will force browsers to look at the updated file right away, so there’s no need to clear the browser cache for the favicon to be shown.

5 Likes
67

You can also do:
favicon.ico?v=<?php echo intval(filemtime('/path/to/favicon.ico')); ?>

This way you can ensure that the cached version is always refreshed once you have replaced the original icon file without updating the source code again.

3 Likes
68

I would recommend against that for the OP. From my understanding of the topic, the OP has an HTML site. Adding in PHP just for that is going to add unnecessary server load, and increase load time as well.

5 Likes
69

Thought some PHP is there, keep in track using version number then.

4 Likes
70

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

71

Hey people google shows my name properly now in search website :slight_smile:

3 Likes
72

Good for you :+1:

3 Likes
74

This topic was automatically closed after 6 days. New replies are no longer allowed.