I have 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 (short for “favorite icon”) is an icon associated with a website or webpage intended to be used when you bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. Also, it is used as application icon of mobile device. – WordPress Codex Creating a Favicon
The WordPress.org Codex already has an article called Creating a Favicon.
In this codex, we are told to add:
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
…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:
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.png" />
I usually add at least five lines of code when adding a favicon, to include icons for the various Apple Touch systems.
<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-57x57.png" /><!-- Other iPhone, iPod Touch, and Android devices -->
<link rel="apple-touch-icon" sizes="72x72" href="<?php bloginfo('template_directory'); ?>/apple-touch-icon-72x72.png" /><!-- First generation iPad: -->
<link rel="apple-touch-icon" sizes="114x114" href="<?php bloginfo('template_directory'); ?>/apple-touch-icon-114x114.png" /><!-- iPhone 4 -->
…just below the <head> HTML tag.
If your website is powered by WordPress, I definately 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, contact me over on https://bamajr.com/; my business’ website.
