Keeping Your Favicon Organized

Favicons are those little pictures that show up next to your site's name in a variety of places in web browsers.

It really helps your site stand out when user's have dozens of tabs open and creating them is simple. Just upload an image to any number of favicon generators and then save the resulting favicon.ico to the root of your website and the browsers will automatically find them.

But what if you don't want to have random icons filling up your website's project directory? What if you want to have them nicely kept in your imgs directory? We'll there are two solutions.

Solution one is to add the following line to your section. This will tell the web browsers where to look for the file.

<link rel="shortcut icon" href="/img/favicon.ico">

The only downside to this is that if for some reason this line doesn't get served (your user receives an error page that doesn't include it, you forget it) then they aren't going to get the file because the browser is going to default to looking for /favicon.ico. This is fixed with solution two which is adding the following line to your .htaccess file:

RewriteRule ^favicon\.ico$ /img/favicon.ico [R=301,L]