Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Using Favicons

Featured Replies

I am exploring the use of favicons on my site. My site, http://www.strongfamilies.us, is in php. I just placed a favicon on the main page. It is supposed to animate. After placing the favicon code only on the main page, it appears instantly on all the pages of my site without animation as viewed through all the major browsers except for FF. In FF, it only appears on the main page. It also animates on FF.

 

Since my site is in php, is there a way that I could add this favicon code to some file within the Includes folder so that it appears on all the pages at once without me having to add the code to each individual page in order for it to appear in FF and intimate in all the other browsers?

 

Thanks.

All you need is this line in the head area of your html document.

 

<link rel="shortcut icon" href="http://yoursite.com/path-to.favicon-filename.ico" type="image/x-icon" />

If you have an include for the header area place it there.

 

<head>
code above
</head>

 

Done

Edited by a.g.r.c

  • Author

Thank you so much for your response. The problem is that I would like to place this favicon code on a file within the Includes folder of my php website so that I don't have to manually place it on every page. However, I am unsure as to which file it should go on. I noticed that the following code appears on all my site pages:

 

<link href="/includes/general.css" rel="stylesheet" type="text/css" /><link href="/includes/layout.css" rel="stylesheet" type="text/css" /><link href="/includes/nav.css" rel="stylesheet" type="text/css" />

 

Does this mean that I should place the favicon code on either general.css, layout.css, or nav.css? If so, which file should the code be placed on? Thanks.

Thank you so much for your response. The problem is that I would like to place this favicon code on a file within the Includes folder of my php website so that I don't have to manually place it on every page. However, I am unsure as to which file it should go on. I noticed that the following code appears on all my site pages:

 

<link href="/includes/general.css" rel="stylesheet" type="text/css" /><link href="/includes/layout.css" rel="stylesheet" type="text/css" /><link href="/includes/nav.css" rel="stylesheet" type="text/css" />

 

Does this mean that I should place the favicon code on either general.css, layout.css, or nav.css? If so, which file should the code be placed on? Thanks.

 

No you'd need to find which file and without having a crystal ball handy it's really difficult for me to tell you.

 

This is not a css issue, it's something you place within the markup of your page and the browser interprets that.

 

You are on the right track by finding that code... Now all you need to do is find that file on server / hard drive.

 

If you use a decent code editor you can chose to search within a folder for text.....

 

Beyond that this could be a nightmare.

 

Anyone? rolleyes.gif

surely if it's going in the <head> of your page/s you will only have one if everything else is an include?

And it won't go in a .css file. That won't work.

if it's got the <head></head> section for the site then yes :)

  • Author

Thank you so much for all your recommendations. I added the favicon code to header.php and now the favicon appears on all the pages. The only issue that I have is that it is only animated while viewing the site with FF. I am not concerned about this issue though, as long as the favicon appears on all the pages. This issue is now resolved!!

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.