how to add favicon to website ?

by mbwani
17 replies
  • WEB DESIGN
  • |
i want to create a favicon to my website so that the favicon image gets displayed into the address bar of browser.
i replaced the favicon.ico in root directory of website with the .ico image but that only displays icon when i work within the dashboard of the wordpress and when only website is opened in the browser icon is not displaying.
please help.
#add #favicon #website
  • Profile picture of the author Bokva
    Sometimes it takes time for browser to pick it up. If you're sure it's proper file, just wait. Clear cache, try other computer maybe, just to check...
    Signature

    Take ACTION!

    {{ DiscussionBoard.errors[6754484].message }}
    • Profile picture of the author mbwani
      the browser displays only the favicon when i work inside the wordpress.
      i think there might be some other file for theme to replace. is that?
      {{ DiscussionBoard.errors[6754488].message }}
  • Profile picture of the author silkuneed
    To add a favicon to your Web site, you'll need both an image and a method for specifying that the image is to be used as a favicon. This document explains the method preferred by W3C for specifying the favicon. There is another common method that is illustrated below, with an explanation of why that method is inconsistent with some principles of Web architecture. Both methods only apply to HTML and XHTML, one of the limitation discussed below.


    This document does not discuss in detail how to create a favicon image. However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.
    {{ DiscussionBoard.errors[6754487].message }}
    • Profile picture of the author mbwani
      Originally Posted by silkuneed View Post

      To add a favicon to your Web site, you'll need both an image and a method for specifying that the image is to be used as a favicon. This document explains the method preferred by W3C for specifying the favicon. There is another common method that is illustrated below, with an explanation of why that method is inconsistent with some principles of Web architecture. Both methods only apply to HTML and XHTML, one of the limitation discussed below.


      This document does not discuss in detail how to create a favicon image. However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.

      i used the ico image format and of size 16x16 pixel. the wordpress default image was favicon.ico so i renamed my icon as favicon.ico and uploaded on server in place of default image. but i am getting any option for the png and other formats .please can you help me how can i upload the png format as favicon.
      i uploaded the png icon to one of my websites watch movie but there was option in theme to upload that and that worked fine. but in my another website theme has no option for that and i am getting confused that how can i manually add favicon image to this website.
      {{ DiscussionBoard.errors[6754923].message }}
  • Profile picture of the author BillyW
    Put this code into the <head> of your web page:

    <link rel="icon" type="image/png" href="http://example.com/myicon.png">
    Signature
    Qosso.com - Exceptional Branding At Affordable Prices
    {{ DiscussionBoard.errors[6755509].message }}
  • Profile picture of the author vgvetter
    Try the All In One Favicon Plugin, version 3.1 by Arne Franken...
    {{ DiscussionBoard.errors[6758886].message }}
  • Profile picture of the author webpeon
    Add the favicon.ico to your themes root folder wp-content/yourtheme

    once you have done that force the icon to reset by doing this, this will remove the need to clear cache and/or wait it out..

    open the icon directly in a web page using the directory
    Code:
    www.yourdomain.com/wp-content/yourtheme/favicon.ico
    reload the webpage using the right click option or ctrl +f5
    open your main page and check.
    Signature
    Web 2 Mobile
    The Future of The Web
    {{ DiscussionBoard.errors[6758989].message }}
  • Profile picture of the author BOBTYLOR
    Sometimes it needs time for web browser to pick it up. If you're sure it's proper data file, just delay. Clear storage cache, try other computer maybe, just to check...
    {{ DiscussionBoard.errors[6761881].message }}
  • Profile picture of the author gabem
    I too have frequently run into delays in favicons being displayed. As long as you have the link rel="icon" code in your header with the right path to your icon, it should show up relatively quickly. If it doesn't and you're 100% sure that the code/link is correct, try clearing your cache and reloading the page.
    {{ DiscussionBoard.errors[6771765].message }}
  • Profile picture of the author HorseStall
    These two articles tell you how to do it - Online Business Resources


    Goodluck
    {{ DiscussionBoard.errors[6772126].message }}
  • Profile picture of the author electrickiwi
    I always use DynamicDrive.com's FavIcon generator to generate my FavIcons after I've created the image in Photoshop. They've got instructions for implementing them, too.

    Like a few of the other posters before me have said, they can take a while to refresh/show up though!
    {{ DiscussionBoard.errors[6777845].message }}
  • Profile picture of the author VKinternetsavvy
    there are a free online tools available to create a favicon, such as faviconmaker, etc. You would need to clear the browser cache to see the new favicon
    {{ DiscussionBoard.errors[6780352].message }}
  • Profile picture of the author fileppoa
    To add a favicon to your Website, you'll need both an picture and a means for specifying that the picture is to be used as a favicon. This records describes the technique recommended by W3C for specifying the favicon. There is another typical technique that is confirmed below, with an details of why that technique is not efficient with some concepts of Web structure. Both techniques only implement to HTML and XHTML, one of the restrictions described below.
    {{ DiscussionBoard.errors[6780408].message }}
  • Profile picture of the author WebsiteBegin
    With Wordpress, you have several options:
    1) The manual code - <link rel="icon" type="image/png" href="http://example.com/myicon.png">

    2) A plugin. You can do a quick search of the plugin directory and find a wealth of plugins that will apply a favicon for you.

    3) Most themes have support for favicons. Thesis is one such example.
    Signature
    WebsiteBegin | Learn to Build and Manage an Amazing Website

    Follow me on Twitter - Joeb3219
    {{ DiscussionBoard.errors[6782832].message }}
  • Profile picture of the author Eric Pacheco
    make sure to delete all browsing data from your browser so you will download the new information.
    {{ DiscussionBoard.errors[6783664].message }}

Trending Topics