I’ve recently been asked How to add a favicon to a WordPress Website and the topic continues to pop up. So, I thought I’d post a little about it.
A favicon, also known as a favorites icon, website icon, shortcut icon, url icon, or bookmark icon, is a small, square image, associated with a specific website.
The WordPress.org codex pages already have an article called Creating a Favicon.
In this codex, we are told to add:
[sourcecode language=”html”]<link rel="shortcut icon" href="<?php bloginfo(‘template_directory’); ?>/favicon.ico" />[/sourcecode]
…to the theme’s header.php file, below the <head> HTML tag.
If your favicon needs a transparent background, save it as a .PNG file, using favicon.png instead of favicon.ico, like so:
[sourcecode language=”html”]<link rel="shortcut icon" href="<?php bloginfo(‘template_directory’); ?>/favicon.png" />[/sourcecode]
I usually add about five lines of code these days, to include icons for the various Apple Touch systems.
[sourcecode language=”html”]<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo(‘template_directory’); ?>/favicon.ico" /><!– favorites icon – favicon.ico –>
<link rel="icon" type="image/x-icon" href="<?php bloginfo(‘template_directory’); ?>/favicon.ico" /><!– desktop icon – favicon.ico –>
<link rel="apple-touch-icon" href="<?php bloginfo(‘template_directory’); ?>/apple-touch-icon-57×57.png" /><!– Other iPhone, iPod Touch, and Android devices –>
<link rel="apple-touch-icon" sizes="72×72" href="<?php bloginfo(‘template_directory’); ?>/apple-touch-icon-72×72.png" /><!– First generation iPad: –>
<link rel="apple-touch-icon" sizes="114×114" href="<?php bloginfo(‘template_directory’); ?>/apple-touch-icon-114×114.png" /><!– iPhone 4 –>[/sourcecode]
…just below the <head> HTML tag.
If your website is powered by WordPress, I suggest doing things the way the WordPress codex recommends it to be done.
If writing even a little php code, modifying WordPress template files or following WordPress Codex is outside your comfort level, hire a professional to help.
