Twitter
1.2
Multicons
09. August 2010 · Author: Dale Crum
34 Comments

Multicons

Multicons is a multi-favicon code generator which automatically inserts the necessary meta tags for both favicons (site-wide and/or admin) and Apple Touch / iPhone icons.

Not sure what a favicon is? “A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab. Some programs allow the user to select an icon of their own from the hard drive and associate it with a website.” – Wikipedia

Favicons have a subtle, if small, role in building the branding of a website. When a user takes notice of a favicon it can often be a good indication they have come to the right place serving as visual representation of a website not only in the browser address bar but also when sifting through bookmarks. It is no secret that our eyes gravitate towards images before text and not just on the web but iPhones and iPads as well.

The meta data output by Multicons:

Site-wide Favicon:
• Location: Website [and Admin if no Admin Favicon specified]
• Meta Tags ganerated:

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://www.yoursite.com/favicon.ico" />

Admin Favicon:
• Location: Admin only
• Meta Tag generated:

<link rel="shortcut icon" href="http://www.yoursite.com/wp-content/favicon.ico" />

Apple Touch / iPhone Icon
• Location: Website only
• Meta Tag generated:

<link rel="apple-touch-icon" href="http://www.yoursite.com/apple-touch-icon.png">

If no image links are provided then no code is output, thus leaving a settings field blank will not bloat the site down with empty meta tags. If an is Admin image is not provided this option will default to the Site-Wide Favicon.

This plugin includes two sample files to assist in building the required images. We have included both a favicon.tiff and an apple-touch-icon.tiff file. These sample images are pre-sized and ready for a creative mind. Open these files in a graphics editor of your choice, make the necessary changes, save them in their appropriate file format and upload them. Typically favicons are stored in the ‘root’ of a website or in the case of WordPress, the same location as the ‘wp-content’ folder.

Installation

  1. Download the plugin and expand it.
  2. Copy the multicons folder into your plugins folder ( wp-content/plugins ).
  3. Log-in to the WordPress administration panel and visit the Plugins page.
  4. Locate the multicons plugin and click on the 'activate' link.
  5. Set up the plugin by visiting Settings > Multicons and provide links to your favicon images.

Screenshot

doc4design.com - Multicons - Screenshot

34 Comments

  1. Thank you – I went through so many plugins before I found one that works!!

    My favicon doesn’t seem to be working in exporer – any ideas on how to fix this?

  2. Natalie,

    It’s working, I just checked it in Safari. Might be a cache issue that hasn’t quite cleared yet. The site is looking good by the way.

  3. Hi! Great plugin! –I’m very new to wordpress sites and the instructions were easy to follow! I’ve got it working correctly in firefox but not safari. I’ve cleared my cache and that didn’t fix it. Any idea what I’ve done wrong? Thanks for your help!!
    PS I love when I see plugin creators posting answers to questions in the comments sections.

  4. Roger,

    Look in your header.php file for the following:

    This is a link to an RSS favicon. Delete this line and everything should work as expected.

  5. I am able to make the icons work on the firefox browser but the site uses the RSS icon when using IE.
    Is there any way to make IE use the icons properly.
    Thanks doing this for a customer and they want the nice icon int he tab to be consistent.

  6. Karlene,

    It’s working perfectly over here. If you’re using Firefox there may be a delay re-caching the favicon.

  7. Hello, Great plugin but I seem to have a problem with it showing up on the site. It shows up fine in the dashboard. I placed the icon in both the index folder and the folder with the wp-contents. The dashboard works but the WP logo is still displaying in the public site. Don’t know if its a catche issue. Can you tell? It should be a green globe.

  8. Hi There,
    Love this plug-in. Works like a charm – Awesome

    P.S clashes with ‘Gravatar Favicon’ by Patrick.

    Cheers

  9. Hi – I have uploaded the plug-in to my wordpress blog. I am stuck at the point:

    ‘Set up the plugin by visiting Settings > Multicons and provide links to your favicon images.’

    My favicon is stored on my desktop as an ico file. I’m not sure I have a link to the favicon as such. Can you let me know what steps I should take now please to upload my ico file into the settings!

    Thank-you!

  10. Claire,

    Looks like your favicon is in place. If you want to change the icon to something else simply create a new image, upload it to your website and make sure the link (on the Mulitcons Settings) is set correctly.

  11. I see that my picture is there- is that my favicon? Can I change it to something else??

  12. I have downloaded your multicons plugin – how to I upload my picture for the favicon? I am not a computer programmer, so I hope this can be done easily! Thanks.

  13. Michael says:

    Works like a charm with WordPress 3.2.1.

    Thank you very much!

  14. Thank you for this puglin, thank you very much. Piranha SEO/ Black Hat SEO Team

  15. Wammus says:

    Good plugin, works without a hassle!

    I Did change a part in the source so the iOS icon comes without a reflective shine. You might want to make that an extra option?

    See : http://en.wikipedia.org/wiki/Favicon#Device_support
    (I changed line 178 : “apple-touch-icon-precomposed”)

    Thanks!

  16. Custom Web says:

    Plugin worked great. I used other plugins, but this one got the job done the first time. Good job!

  17. Crystal,

    Please ignore the comment about the two lines of code. This is part of the plugin’s design, my mistake.

  18. Crystal,

    If you’re using Firefox it can take awhile before showing the favicon, this is not a new problem, Firefox can be stubborn. I also noticed you have code for two of the same favicon in place: see below.

    <link rel="shortcut icon" href="http://theweekendhomemaker.com/wp-content/uploads/2011/06/favicon4.ico" />
    <link rel="icon" type="image/png" href="http://theweekendhomemaker.com/wp-content/uploads/2011/06/favicon4.ico" />

    The first seems to be generated by Mulitcons and the second may have already been there, delete the second line of code and Just a heads up, I am seeing the icon in my browser.

  19. Hi –

    Your instructions were easy enough to follow. However, when I go to my site, there is no favicon at all, not even the default internet explorer icon. It just a blank space. What am I doing wrong?

    Regards,
    Crystal

  20. Thank you. Good plugin!

  21. We installed it into our site, check the result if you want to use this plugin.

  22. Thanks for this plugin. As far as I know, it’s the only one that works with the new WordPress 3.1. Kudos, Programmer-Doc-Dood.

  23. I run several client wordpress sites. I always use multicons. Your plugin is simple. I’ve never had it fail. Thanks!

  24. Webdesign Blog says:

    Thank you for this plugin and your good work. Now I enjoy a nice favicon on my webblog.

    Cheers, Wouter
    Styling Designs Webdesign Blog

  25. Marti,

    Hopefully I understand what you’re after here. The code for the admin favicon only shows up when viewing the source in the admin panel and the code for the site favicon only displays when visiting the website.

    If you are stating that while linking to an admin favicon then the site favicon doesn’t work then you might just check the link to see if the site favicon is working. I just visited your site and it seems to be working: link rel=”shortcut icon” href=”http://www.happyart.com/favicon.ico” This might be a cache issue with the browser.

  26. Sleek and elegant indeed – except my site favicon won’t show up while my admin one does. Yep I did check and double check to make sure I have each .ico and .icon file formatted and located correctly in the right folder and or root directory. Could this be a theme issue?

  27. Mike,

    I’ll see what I can do about using a relative path, but this would force the user to always place the favicons in a specific location which I wasn’t too fond of. I’m open to thoughts on this though.

  28. Mike Heft says:

    Thought it would make a path relative to my theme, but it asked for an absolute path.

    I solved it by putting this in the header:
    <link rel="icon" type="image/png" href="/favicon.ico” />

  29. George,

    The plugin has not been tested as such. Please give it a try and let us know.

  30. Does this plugin work with mutlitsite; so that each of my multisites can have their own favicon?

  31. Carsten,

    This is very strange, I’ve run multiple tests and haven’t encountered this issue. I’ve decided to update the plugin using your comments as a precaution for other users. Thank you for bringing this to my attention.

  32. Carsten says:

    Hello!

    Yes, thats true. I copied the complete folder to my webspace. Then in the WordPress-BackEnd I’ve found it in the List of plugins. When I now klick on the “activate” Link, I got an error ,that the multicons.php wasn’t found. The check via FTP shows me the two txt-file in the multicons folder, but not the php.

    Looking through the php file shows the unlink command in the first few lines. So I try to delete the If-Block around this unlink command. uploading again, activating and all works as requested.

    WordPress 3.0.1 and php-Version 5

    Greets
    Carsten

  33. Carsten,

    I’m not sure I follow you. Are you saying the php file is deleting itself from your site? What version of PHP and WordPress are you currently using?

  34. Carsten says:

    Hi!

    Great Plugin, but it deletes itself. If I try to activate it the “multicons.php” will be deleted. There is an “unlink” in the first lines of the code.

    Greets
    Carsten

Trackbacks

  1. 今年(2011)最後に自分のWebサイトのファビコンを作成して設置してみる | bl6.jp
  2. Delicious Bookmarks for July 17th through July 18th « Lâmôlabs
  3. How To Create Favicons
  4. Recently updated wordpress plugins: 2010.8.10 (1) | WP Note
  5. Как добавить favicons в блог | Multicons | темный Незнайка светлый Wordpress | n-wp.ru

Leave A Comment

Please wrap any code within the <code> tag to display properly

With CISPA (Cyber Intelligence Sharing and Protection Act) starting to make headlines in recent days I thought it only appropriate to take a look back at how well SOPA (Stop Online...

Welcome back to Doc4 Design's backups for beginners, wherein we continue to break the First Rule of Backups by talking about backups! In part one, we discussed the need for, and...

Backups are something that we all know are important, but sadly, we seldom spend much time on them, especially at home. For most of us data on our home systems isn't expensive or critical,...

Incorporating animals into identities is not a groundbreaking topic by any means but making the design work on a professional level isn't always an easy task. Making use of an artist's...

It's Christmas time, so I thought I would have a little fun with my article this month, not that I don't usually have fun. Since we are all designers, what better topic to discuss than...