Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Blog » New WordPress Plugin: Favicon-Header

New WordPress Plugin: Favicon-Header

Being a self-proclaimed geek with more devices than I’d care to enumerate, I recently set up a lightweight virtual machine to run the classic network monitoring tool MRTG. For those unfamiliar with this tool, it merely polls your network devices for SNMP counters to create pretty graphs showing network traffic.

mrtggraph

I wanted to take this a step further, and convert the standard output into a Mobile Web App. A Web App is similar to a normal Mobile App, except the code is hosted as a webpage on a server on the Internet, and you access said app through a traditional or mobile web browser. This untethers the developer from only creating an iOS App or only creating an Android App, but instead lets you create an app for any mobile device to view (including Windows Phones and Blackberrys, if they still exist in the wild).

homescreen

In the old days, when you were making your WordPress site ready for Mobile Devices, you were anticipating a very small screen. These days, screen resolutions are much higher than they used to be, and even the smallest handheld devices are sporting at least 720p-type resolution. This generally means you can forgo the need for Mobile Themes in WordPress (or optionally use the one supplied by WordPress’s Jetpack), and focus on making sure you have all the proper high resolution icons available for iOS, Android, and Windows devices.

windowstile

This is where the site Real Favicon Generator comes into play. Creating 10 to 20 versions of your icon in various sizes and resolutions, as well as formats for different devices, is not fun and tedious at best. Real Favicon Generator allows you to upload a single 250×250 resolution image, and it will provide a ZIP file for download with all of the various formats, as well as HTML code that will need to be placed in your website’s header.

The new WordPress Addon called Favicon-Header by yours truly allows you to inject this HTML header code into your WordPress site without the need to modify the underlying theme. This will allow your theme developer to keep providing updates without affecting your custom code. Installation is as simple as copying the folder to your plugin folder on your website, and then enabling the plugin in the WordPress Admin panel.

Here is a more detailed outline of those steps:

  1. Visit Real Favicon Generator.
  2. Provide ideally a 250×250 image (or larger), and download the resultant ZIP and HTML code. In the next steps, we will upload the ZIP file to our website, and use a WordPress plugin to add our HTML code.
  3. Extract and upload via sFTP/FTP/SCP all of the image files and place them in your root web directory.
  4. Search for the WordPress plugin Favicon-Header in the WordPress Plugin Administration Web Panel.
  5. Enable Favicon Header in your WordPress Administration Web Panel.
  6. Add HTML code from step 2 to Favicon Header plugin settings page.

faviconsettings

Once the steps above have been completed, you should be able to see your new HTML meta header tags on every page of your website. Likewise, when you bookmark or add your WordPress site to your Mobile device’s home screen, the proper icon will be displayed. Obviously this is a very minor tweak, but without a good mobile icon, I would never place a normal website on my mobile device’s homescreen, so this is important if you wish to reach mobile users with your website.

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2012 zSprawl's zApps

Fork me on GitHub