Implementing a favicon for a single site is about as easy as it gets. Simply upload favicon.ico to the root of your public directory on your server and you’re good to go. But what do you do if you have a situation where you have multiple domains pointing to the same directory? Say, a WordPress network using the multisite feature with multiple domains and subdomains?
A solution might be a plugin. However, we don’t want to use a plugin unless it’s necessary. Stick with native functionality if you can. A common solution is simply placing in the <head> a snippet of html like this:
<link rel=”shortcut icon” type=”image/x-icon” href=”http://domain.com/wp-content/themes/theme/favicon.ico” />
Certainly this should be done. However, it’s not really a true solution. For one, many programs and bots try to access an assumed existing favicon.ico automatically. If /favicon.ico is not there it can use up valuable bandwidth. The shortcut icon tag <link> won’t do. True, you can simply add a favicon to your root. However, this still doesn’t solve the multisite problem. All sites would share the same icon and this would probably be a branding issue.
A better way to solve the problem would be to use .htaccess to display, for example, http://domain.com/wp-content/themes/this-theme/favicon.ico as /favicon.ico when the host domain is domain.com, http://domain.com/wp-content/themes/that-theme/favicon.ico as /favicon.ico when the host domain is domain2.com and http://domain.com/wp-content/themes/other-theme/favicon.ico as /favicon.ico when the host domain is domain3.com.
First, simply upload your default
favicon.ico to the root directory of your server.
Second, backup any existing .htaccess file located in the root directory of your server. Next, add the following code to the file .htaccess and upload it to the root directory of your server as an ASCII file. If you’re using WordPress be sure to add the code to the beginning of your .htaccess file. If you don’t, your new code will be ignored.
# favicons
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^(www.)?domain2.com$ [NC]
RewriteRule ^favicon\.ico$ wp-content/themes/that-theme/favicon.ico [L,NC]
RewriteCond %{HTTP_HOST} ^(www.)?domain3.com$ [NC]
RewriteRule ^favicon\.ico$ wp-content/themes/other-theme/favicon.ico [L,NC]
Now try to access /favicon.ico for each domain (e.g. http://domain2.com/favicon.ico). If all was done successfully you should see the desired icon as /favicon.ico for each domain. Of course, even if you’re not using WordPress or if your icons are elsewhere you could alter this code to point to icons in different directories and with different file names (e.g. images/favicon.ico, wp-content/themes/theme/images/my-icon.ico). For each domain, in most cases, you’ll have to append new code pair lines (“RewriteCond,” “RewriteRule”) and edit them accordingly to suit your needs. If there isn’t a matching domain the default /favicon.ico that was actually uploaded will be used thus preserving server resources and maintaining the default brand.