Adding Favicon

Adding Favicon

favicon (short for “favorites 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.

A favicon is typically a graphic 16 x 16 pixels square and is saved as favicon.ico in the root directory of your server. You can use a favicon with any WordPress blog on a web server that allows access to the root directories.

Creating a Favicon

A favicon can be easily created using any graphic program that will allow saving of .ico graphic files, such as The GIMP. There are also online services that will allow you to create a favicon for free.

The image should be clear and is usually designed to match your blog image and/or content, a big task for something so small.

To prepare the image to be saved as favicon.ico:

  1. By cropping or adding space around the image, make the image square.
  2. Resize the image to 16 x 16 pixels.
  3. Save the file as favicon.ico.

If using an online service to create your favicon, such as favicon.co.uk or Dynamic Drive, follow the instructions provided by the site. Then download the image of the favicon.ico to your computer.

Installing a Favicon in WordPress

  1. First log into your wordpress site by visiting /wp-login.php. If you are faculty this site is located at http://faculty.eng.fau.edu/wp-login.php if you are staff it is http://staff.eng.fau.edu/wp-login.php
  2. Next click on Plugins from the Dashboard menu on the left panel of your browser’s window
  3. Click Activate Shockingly Simple Favicon
  4. Click Media from the Dashboard menu on the left panel of your browser’s window
  5. Click Add New
  6. Click the button that says Select Files and locate and upload your favicon icon file on your computer. The file should end with the extension .ico
  7. Once uploaded click on the Show link.
  8. Copy the File URL text to your clipboard (Highlight the text and right click and select copy)
  9. Click Settings from the Dashboard menu on the left panel of your browser’s window
  10. Click S. Simple Favicon under Settings.
  11. Under the Settings section of Shockingly Simple Favicon Options past the File URL from your clipboard into the text box next to Favicon URL.
  12. Click Save Changes, clear your browser’s cache and visit your website. The favicon should show up next to the address bar in your browser.