How to create a favicon for CSS site

10 replies
  • WEB DESIGN
  • |
Does anyone know an easy way to create a favicon in CSS? I've been having a hard time, on my old site which was HTML it was so easy!
#create #css #favicon #site
  • Profile picture of the author xtrapunch
    Favicon is not added through CSS. It will be done via HTML tags. I guess you know how.
    Signature
    >> Web Design, Wordpress & SEO - XtraPunch.com <<
    Web Design & SEO Agency | Serving World Wide from New Delhi, India

    {{ DiscussionBoard.errors[4085399].message }}
    • Profile picture of the author jamesg3
      make image 16x16 or 32x32 or 64x64 then save as png (but .ico is better if you have my PS plugin that allowes you to save as .ico) with name of favicon.
      in header add this line insiode </head> tag
      HTML Code:
      <link rel="icon" type="image/png" href="http://example.com/favicon.png">
      Signature
      Serious Wordpress sites, html/css sites and flash sites Cheap. I provide killer SEO, easy to use e-commerce solutions and payment gateways. Check me out at Serious Website Design.
      Need Hosting with serious speed and power? 3.99 a month. Take a look here. Serious Website Hosting.
      {{ DiscussionBoard.errors[4094548].message }}
      • Profile picture of the author Abhishek Kundu
        Originally Posted by jamesg3 View Post

        make image 16x16 or 32x32 or 64x64 then save as png (but .ico is better if you have my PS plugin that allowes you to save as .ico) with name of favicon.
        in header add this line insiode </head> tag
        HTML Code:
        <link rel="icon" type="image/png" href="http://example.com/favicon.png">
        hi NWJewelry,

        i do agree with jamesg3.

        you can google search with "favicon generator" or can directly go to http://www.favicon.cc

        you can upload your png file in the website and it will change it to an .ico file.
        HTML Code:
        <link type="image/x-icon" href="http://www.yourdomainname.com/images/favicon.ico" rel="shortcut icon">
        hope this helps you to have your proper favicon in your website.
        Signature
        CLICK HERE>>> FOLLOW ME ON TWITTER <<
        {{ DiscussionBoard.errors[4273039].message }}
  • Profile picture of the author cravereplace
    To make things even easier, once you have an image you want to use as a favicon go to this site: favicon.ico Generator

    and it will generate an .ico file for you.
    {{ DiscussionBoard.errors[4101533].message }}
  • Profile picture of the author Deema
    Create an 16x16 icon in Photoshop and save it as favicon.png

    Then search in google for favicon converter and convert it to ico then put it to the root directory of your site. All major browser will hook it automatically.
    {{ DiscussionBoard.errors[4124020].message }}
  • Profile picture of the author Deema
    It's an icon you see on the left in the address bar when you type an URL. Or you see icons next to each item in your bookmarks. Some search engines display them in SERPS.
    {{ DiscussionBoard.errors[4124119].message }}
  • Profile picture of the author sarvesh2
    many website available in net who help you take the css
    Signature

    Seo tips Free Paytm Cash

    {{ DiscussionBoard.errors[4124955].message }}
  • Profile picture of the author cherryberry
    you can get help from google regarding making fav-icon. As you can get step by step tutorials to make fav icon
    {{ DiscussionBoard.errors[4262205].message }}
  • Profile picture of the author joelgarner
    Originally Posted by NWJewelry View Post

    Does anyone know an easy way to create a favicon in CSS? I've been having a hard time, on my old site which was HTML it was so easy!

    for now you can use a php script that will open each html file and for each one it can add the favicon. Pretty simple. better yet you can upgrade the website to use a cms.
    {{ DiscussionBoard.errors[4265954].message }}
  • Profile picture of the author derricks4
    It's more simple than all that. Take the image you want for the favicon, upload it to the root level of your server, and rename it to: favicon.ico
    Thats it!
    Signature
    EXPLODE Your Sales! The PREMIER Copywriting Service on WF<PM ME!
    ^^GUARANTEED 100% to INCREASE YOUR PROFIT ^^
    {{ DiscussionBoard.errors[4266599].message }}

Trending Topics