Select Page

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.

sapphire favicon

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.