• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

Favicon

May 17, 2011 by Webhead

Problem

When the simplest things don’t work it can drive you nuts.  I had a task to add a favicon to a website so that it shows in the browser.  To do this all I thought I had to do was get the PNG, convert it to a .ICO file on one of the many online converters and place it in the home directory of the website.  What do you do when the image shows at http://mydomain.com/favicon.ico but doesn’t show as the browser’s page icon?

Solution

  • Clear the browser cache
  • Make sure you have the link tag in the <head> part
    <link REL="SHORTCUT ICON" HREF="/favicon.ico">
  • Go here and make sure your icon is up to the standards

When I looked at Firebug I saw that there was a tag <link rel=”icon” href=”” type=”image/x-icon” >.  I thought it was a little strange, but I also thought Firebug was just interpreting the icon location since it wasn’t in the source code I was looking at.  (Firebug shows the real-time values of elements instead of the actual code.  ie. if you use javascript to move an element, it will show the new coordinates instead of the original ones).

After a while, I found the website that validates favicons.  Once I saw that extra “image/x-icon” again, I looked through my PHP code and saw that it was including that, which is why I didn’t see it in the main html code.

Filed Under: Coding Tagged With: html

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools