AHHH, favicons. Some of you have them, some of you wonder, “How’d they get their logo up there?” Some of you have never thought about it. Different site platforms handle it differently. The most common method to get YOUR logo up in the browser tab is to add the code into your header:
If you’ve only got a favicon.ico in the root of your site, you don’t need to use any of this markup. However, its still good practice to link to it. Some of you use WordPress plugins for this. You really don’t need ONE MORE plugin calling to something. Go into your HEADER.php file and put it before the </head> tag with the examples above. If you get stuck, I can help you with that, too. If you eliminate ONE MORE SCRIPT and plugin, it keeps your site more efficient. Some templates even suggest 4-6 versions of your favicon,ico or .png file for different device displays.
Linking to the apple-touch-icons allows other apps and platforms to use the icon (such as Android)
Place the Opera Speed Dial image first in the list, to avoid it appearing as the favicon.
But how do you make one in the proper sizes and file formats? AHHH, that’s where I come in. I can make them for you. They usually take me about 30 minutes for all formats if you give me a nice resolution version of your logo. Let me know if you would like me to do this for you.