There is a idiom out there that I’m sure you’re all familiar with. Have you ever heard someone say that “The devil is in the details”? Well what this means is that in even the largest of projects, the success of the project often depends on the success of the it’s smallest components.
When it comes to building websites, this is no exception. You want your work to be taken seriously and reflect that of a professional. Providing a client with a custom designed theme that fits perfectly with their brand, only to have a generic favicon at the top of their browser window just doesn’t cut it.
What is a Favicon?
At it’s core, a favicon is a small image file usually 32×32 pixels in size or 16×16 pixels that represents the brand of a website. It’s basically an icon thats associated with a website, that it’s readers instantly recognize and associate with the brand.
The word favicon is a combination of the words favorite and icon. If you look at the image above, the favicons are the little images beside the titles in the three tabs. In the old days of the web, favicons were actually used as a way to measure the amount of traffic a website was getting by determining the amount of users that bookmarked a page.
Nowadays, favicons are used mostly for aesthetics. They are simply meant to improve the user experience, and help with branding.
It goes without saying that the Genesis Framework is pretty amazing. For those of us who know how to code and design, the Genesis Framework gives us the ability to create our own custom themes, with Genesis at our projects core.
For those of us who don’t know how to design or code, the Genesis Framework still shines bright with it’s vast selection of professional child themes from StudioPress. Bundled in with every Genesis child theme is the default Genesis favicon. While there’s nothing wrong with the Genesis favicon, you’re not going to want to use it on a site for a client, nor a personal website, it’s plain unprofessional.
As we mentioned earlier, favicons these days are meant solely for branding purposes. It makes no sense for a website to wear the brand of another website. It also lets everyone know that you’re using a Genesis Theme, and that you were too lazy or forgot to change to a default favicon.
Creating Custom Favicons
Creating custom favicons is dead simple. As we said earlier, favicons are just small images typically 32×32 or 16×16 pixels in dimension. You can create a favicon in any image manipulation program out there, be it Adobe Photoshop, or even Microsoft Paint. You simply specify the correct dimensions when saving the image.
Favicons are saved with the .ico file extension. This allows the web server to know that the image you’ve uploaded is a favicon, and to use that image as your website’s favicon. The typical filename to save your favicon under is “favicon.ico”.
Optionally, you can also use favicon generators to create your image. Favicon generators are websites you can upload an image to, which will then convert the image to a favicon for you to use on your website. It’s usually best not to use images that are very detailed, as they won’t show up well in such a small format. There are literally thousands of favicon generators out there, so a quick Google search will put you on the right path. If you don’t how to design but would like a custom favicon made for you, feel free to reach out to us, we can create a design that you’ll love.
Changing the Default Genesis Favicon
When it comes to changing the default favicon for Genesis Framework powered child themes, there are two popular options. The first option is the most simple and straightforward. It involves simply navigating to the folder where the Genesis favicon is stored, deleting it, then replacing it with your desired favicon.
You can locate the favicon by going to the “wp-content” folder at the base of your WordPress install. Once there, navigate to the themes folder, then to the folder that corresponds to the name of your genesis child theme. Proceed from there by opening up the images folder, and there should be a file named favicon.ico. You can use this same process on any genesis child theme, as the folder structures are usually all the same. Remember to name your favicon to “favicon.ico” to make sure the server uses your new image.
The second option takes a bit more work, but you won’t have to delete the default favicon. It’s basically using the method mentioned on wpstuffs.com/custom-favicon-genesis/ which mentions adding a custom Genesis filter to the functions.php file of your Genesis theme.
The above code essentially creates a custom function that returns an absolute URL, telling the filter where to find the new location of the updated favicon. The Genesis theme then displays the new favicon automatically.
You basically just paste that code into the functions.php file of your genesis child theme and it will do job for you. Simply change the url at the bottom from wpstuffs.com to the absolute url for the location of your new favicon file and you’re done!