fav.ico not working in the address bar

It helps to check that the file name is favicon.ico (and not ‘fav.ico’ or something else) and that it’s saved in the appropriate .ico format and size (e.g. 16×16, 32×32, 64×64 – don’t go overboard with bigger ones; typically the 16×16 size is used in address bars, and there’s a dramatic difference in filesize between ’em, too)

Finally, to be sure: put the favicon.ico file both in the webserver root folder (usually named public_html or www) and in the theme folder.

And once you’re done, clear your browser cache thoroughly – especially the favicon.ico files are persistent critters.

thanks for the quick reply, i tried the suggestions that you provided and still nothing. i think it has something to do with the theme, but i have no idea what it would be. I have identical code that i use for one of my other sites and it has no problems.

any other ideas?

Last thing that comes to mind – I skipped it because it seemed kinda obvious – is to check that there’s actually a call to the favicon.ico file in the theme.

E.g. check in the HTML source code (of any page on your website, doesn’t matter which one) whether you see something like this:

<link rel="shortcut icon" href="https://www.example.com/wp-content/themes/yourtheme/favicon.ico" type="image/x-icon" />

If you don’t see something like that, edit the theme’s header.php file to include it. A good place would be right underneath the line containing the HTML <title> tag.

The location of the favicon file doesn’t matter; it can be either in the webserver root folder (i.e. directly in the public_html or www folder) or just as in that example above, where I linked to the theme’s folder, as that’s very often where a favicon file is placed by the theme author (then again, it’d be strange if the theme’s author didn’t also include a proper favicon link in the theme’s header file but hey, could be an oversight).

The ‘Default’ theme doesn’t have a favicon though, so if you use that theme, you’ll have to upload the favicon file, and also include that line in header.php pointing to where you put that favicon file (the webserver root is usually the best place).

yeah, i had to add that to the header of my theme and it didnt show up, so i added that code to the default theme to just see if it would show up and it did.

the fav icon shows up but only in the list, not the address bar. here is a screenshot of what im talkin about: https://jeffmillies.com/image-hosting/screen1.jpg

Once again: the proper name is NOT fav.ico but favicon.ico – this is what’s shown now in your HTML source code:
<link rel="SHORTCUT ICON" href="/fav.ico"/>
Change the name and try using this instead:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

then why would it work here: https://jeffmillies.com and https://jennifertrudo.com ? i have used the same code for both of them.

i changed the code and it still doesn’t show up, here is the link to the site: https://thekevintrudo.com

https://thekevintrudo.com/favicon.ico doesn’t exist, but https://thekevintrudo.com/fav.ico does.

Can you hear me now?

hey pinoy.ca, thanks for pointing that out. i set the name of the ico in the theme folder to favicon.ico but for got the one in the main html folder. i changed it over and still nothing. any other ideas?

Clear your browser cache. Thoroughly.

Then reload and behold the magically appearing favicon.ico ??

what browser are you using? im using firefox 3.5.2 and its not showing. i manually cleared the cache and refreshed the page.

Try this alternative:
<link rel="shortcut icon" href="https://thekevintrudo.com/wp-content/themes/edit-3col-rdmban-rr/images/favicon.ico" type="image/x-icon" />
It’s possible that, somewhere between the theme and WP itself, something interferes with images placed at root-level.

Please, don’t forget to triple-check that you put the fully qualified URL there (just as in my example) and that, indeed, the file exists: with that name, and in that exact location.

Finally: your favicon.ico is 48×48 – not that it’s a crime against humanity, but it’s usually best to go with 8×8 or 16×16 (or 32×32 or 64×64 if you must, but Vista and Windows 7 aren’t majority cases – yet) and if you use a decent image editor, you should be able to cut it down to below 1KB in size.

Edited to add: for example, the favicon.ico in use here at www.remarpro.com is 16×16 and about 1.1KB – looks pretty good to me!

In general, browsers who understand the rel="shortcut icon" tag can also handle GIF, JPG formats for the file and can scale it. Newer browsers can also handle PNG and APNG. (Very) old browsers who don’t understand the tag expect it at the root folder and expect it in the Windows 95-esque .ICO format.

Here’s non-authoritative stuff to read: https://en.wikipedia.org/wiki/Favicon.ico

When your image is complex and is larger than 16×16 (such as a photo) and the browser shrinks your image — you may not like the pixelated result. If you have time to spare, it’s best to design your favicon on a 16×16 canvas.

Me, I renamed and uploaded a 16×16 8-bit-color GIF.

Hey pinoy.ca

Thanks for the advice, I tried it out by saving as a gif and lowering the size. still nothing. I am led to believe that there is something in the theme that is conflicting with the favicon. I have a working favicons on other sites that I have made and i have not had any problems.

the fav icon for my personal web page is 678px by 678px
https://jeffmillies.com/fav.ico

and that works fine. Thanks for all the suggestions but I think the theme is interfering some how. I would be welcome to try any suggestions about changing the theme in anyway.

Best to let a WordPress function generate the favicon link to the ico located in the root of your web directory; that way there’s no problem if you change themes:

<link rel="icon" href="<?php bloginfo('siteurl'); ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php bloginfo('siteurl'); ?>/favicon.ico" type="image/x-icon" />

Or, if you want, the active template directory:

<link rel="icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />

hello songdogtech,

nice code so that you dont have to add in the whole thing, but it still doesnt work.

viewing in the latest firefox: https://thekevintrudo.com/