• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
Daily Blog Tips

Daily Blog Tips

How to make money from your blog

  • Home
  • Popular
  • Contributors
  • About
  • Contact / Advertise
  • Blogging
  • Marketing
  • Design
  • Money
  • Reviews
  • Productivity
  • Software
  • Technology

How to create a favicon

By Daniel 19 Comments Reading Time: 3 minutes

favicon.gifA favicon (short for “favorite icon”) is that small icon displayed on the browser URL bar, on the bookmark lists and, for certain browsers, on the navigation tabs. While a favicon will not drastically change your traffic it will certainly improve the look of your blog, adding a unique icon and making sure that readers are able to individuate your site inside bookmark lists easily. Below you will find a step by step guide to create a favicon.

1) General Guidelines

A favicon is nothing more than a 16 pixels by 16 pixels icon, and the file has a .ico extension. As you can imagine it is pretty difficult to put complex graphics in such a small frame. When designing your favicon, therefore, you should concentrate on simple images or letters. Make sure that the color of the favicon reflects the color of your website, so that readers will be able to associate the icon with the site.

2) Using Online Generators.

Online generator Logaster is very convenient service. The functionality of the site is simple and intuitive, there is no need to have any skills to work with graphic editors. Before creating a favicon, you need to create a logo. But this extra step is justified by the fact that you get not only the opportunity to choose from a variety of service-generated images, but also get a favicon in the same style with the logo.
When the items are created, you can easily download files from your account on Logaster and upload it to your site.

3) Using Photoshop (skip this point if you are not using Photoshop)

Adobe Photoshop is probably the best alternative for a well-designed favicon. The standard Photoshop can not handle .ico, so the first thing to do is to download a Windows Icon Photoshop Plugin (you can download it here).

Once you have the Plugin installed you should create a 64 x 64 pixels canvas and start playing with it. After you are done designing the favicon you will need to resize the image. Go to the Image Size menu and click Resample Image. This process will make sure that the image will not blur as you scale it down. Finally just save the 16 x 16 image as “favicon.ico”.

4) Using MS Paint and web tools

Favicons are very simple image icons, meaning that even Microsoft Paint should be enough to create a good looking one. The easiest way is to create a 32 x 32 pixels JPEG image with Paint and then use the online service “Favicon from Pics” to convert the JPEG image into a favicon.ico file.

5) Uploading the favicon.ico file

Once you are done with the favicon.ico file you should upload it to your site. Just make sure you place it in the root directory, which is the directory where the index file is located.

6) Changing your header

The final step is to change your header, which is the code that goes between the <head> and </head> tags. All you need to do is to add the following line:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Notice that this code will only work if the favicon.ico is located in the root directory.

7) Testing

Everything should be in place now, just open your browser and point to your site to check whether the favicon is appearing or not. Bookmark the site and open a couple of tabs to see how the icon is looking, if you do not like it just go back to the drawing board.

How to create a favicon Photo

About Daniel

Daniel Scocco is a programmer and entrepreneur located in São Paulo, Brazil. His first company, Online Profits, builds and manages websites in different niches. His second company, Kubic, specializes in developing mobile apps for the iOS and Android platforms.

Reader Interactions

Comments

  1. Avatar of Treathyl FOXTreathyl FOX says

    at

    Absolutely fantastic DIRECTION, Daniel. As always when I follow your advice, I never go over a cliff and am left hanging. I now have a favicon on all my websites, except one. But that’s not your fault. Thanks sweetie pie!

    Reply
  2. Avatar of April BraswellApril Braswell says

    at

    Thank you for making How to Make a Favicon so simple. I’m working on one for a new website. Looks like a fun project. The again, I enjoy pursuing creative projects.

    April Braswell

    Reply
  3. Avatar of Penny Stocks to BuyPenny Stocks to Buy says

    at

    I’m going to want to get a favicon up for my site sometime. Guess you’ve shown how do it, thanks. =)

    Reply
  4. Avatar of Zafar MajidZafar Majid says

    at

    I’ve got a great little logo that I use on my website, it would make a good favicon… I’ll certainly give it a try.

    Thanks for explaining how to do it.

    Reply
  5. Avatar of Daily Good TipsDaily Good Tips says

    at

    Favicon is our identity. It can work normally in my browser Opera

    Reply
  6. Avatar of FasilFasil says

    at

    The easiest and simplest way to create Favicon …

    Reply
  7. Avatar of Indian Stock TipsIndian Stock Tips says

    at

    I tried the favicon and successfully installed the same at Indian-Share-Tips.com; but found that the same was visible in firefox and was getting saved on book marking. However icon is visible in Opera ut is not visible on book marking. Lastly favicon is not at all visible in Internet explorer and googl chrome. Please help. regards

    Reply
  8. Avatar of JobsNgrJobsNgr says

    at

    Thanks for the post.I will like to creat a Favicon For My Forums.

    Reply
  9. Avatar of KayeKaye says

    at

    THANK YOU! I have a plugin that sends me all my 404s. It’s a useful tool but I have gotten SERIOUSLY irked by all the Favicon 404s. After a lot of research, I finally figured out that I needed to add one, and went looking for help. Out of all the results from Google, I spotted your site. Having subscribed for a while, I felt confident I could trust your advice and IT WORKED. Well, the pix isn’t showing up but that’s probably on my end. But there’s an empty square and NO MORE 404s for the missing Favicons – YAYYYY! Now I’ll work on getting a better pix that will actually show up, just because it’s cute, but my main problem is happily solved. Thanks for this article and your interesting emails 🙂 🙂 🙂

    Reply
  10. Avatar of Bang KritikusBang Kritikus says

    at

    Wow great article. Thanks .

    Reply
  11. Avatar of DannyDanny says

    at

    I use SM Favicon Generator. This one works great and its fast.

    Reply
  12. Avatar of Klajdi HenaKlajdi Hena says

    at

    @ Vj: You can do it very easily on Blogger. I use blogger, and i use a favicon. Visit my site to see it.

    @Rex Owens: Internet Explorer does not support favicons. that’s why.

    Reply
  13. Avatar of KevinKevin says

    at

    Reply
  14. Avatar of Rex OwensRex Owens says

    at

    I can get my favicon to work in Firefox but can’t get it to work in Internet Explorer. Can anyone help me with this problem?

    Reply
  15. Avatar of Adam GrowAdam Grow says

    at

    thanks for your info.
    cool….

    Reply
  16. Avatar of RamanathanRamanathan says

    at

    Thanks buddy. I used it.

    Reply
  17. Daniel says

    at

    I used Blogger almost 1 year ago, and by the time you were not able to use favicons because you could not upload files directly to the root. I am not sure if they updated this feature or not.

    Regarding WordPress free platform, are you able to access the header.php file if you go under “Presentation” and then “Theme Editor”?

    Reply
  18. Avatar of Madhur KapoorMadhur Kapoor says

    at

    Great article mate…

    Reply
  19. Avatar of VJVJ says

    at

    Great! I’ve done it for one of my sites that I have control over hosting for – but, how to do at wordpress? blogspot? Possible?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Trending Today

Popular

  • 28 Ways to Make Money with Your Website 514 Comments
  • 43 Web Design Mistakes You Should Avoid 474 Comments
  • 4 Steps to Increase Your Blog Traffic 188 Comments
  • How to Find Advertisers for Your Website 126 Comments
  • Top 25 SEO Blogs 243 Comments
  • 101 Blog Tips I learned 177 Comments
  • 30 Traffic Generation Tips 351 Comments
  • 6 Ways to Speed Up Your Site 51 Comments
  • 9 Hacks to Show Readers Your Best Stuff 21 Comments
  • 50 Simple Ways to Gain RSS Subscribers 145 Comments
  • The Best Website Taglines 127 Comments
  • What Is Success? 57 Comments
  • How to setup a 301 Redirect 52 Comments
  • The 7 Characteristics of Good Domains 76 Comments
  • 7 Ways to Promote your Site 133 Comments
  • Top 25 Celebrity Blogs 44 Comments
  • What Is A Blog? 81 Comments
  • Blog Setup: 40 Practical Tips 57 Comments
  • 10 Tips To Write Your Most Popular Post 79 Comments
  • The Blog Post Checklist 75 Comments
  • Interview: 12 Top Online Entrepreneurs 98 Comments
  • What Is Bounce Rate? 42 Comments
  • 20 SEO Terms You Should Know 28 Comments
  • How To Choose A Blog Name 15 Comments
  • 10 Tips to Sell Your Website on Flippa 37 Comments
  • Top 25 Web Design Blogs 80 Comments

Online business done right. Take your marketing efforts to the next level with tips and resources to get visitors to your website.
As featured
CNBC copyblogger problogger Entrepreneur Lifehacker Hubspot Business Insider Wordpress Showcase
Privacy Policy| Terms of Service | About | Contact

777 Brickell Ave #500-14648, Miami, FL, 33131, US
DBT Logo
DBT is an independent website. The views expressed on this site may come from individual contributors and do not necessarily reflect the view of DBT or any other organization. All Content Copyright ©2006-2023. Daily Blog Tips unless otherwise noted or credited.