{"id":15693,"date":"2022-10-21T09:19:42","date_gmt":"2022-10-21T09:19:42","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=15693"},"modified":"2023-02-21T07:56:31","modified_gmt":"2023-02-21T07:56:31","slug":"favicon-creation","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/favicon-creation.html","title":{"rendered":"How Can I Create a Favicon for My Website?"},"content":{"rendered":"\n

What Is a Favicon?<\/h2>\n\n\n\n

A favicon is the icon that appears in a browser\u2019s address bar next to the URL. Every browser has the ability to show you a website’s favorite icon. No matter what browser you are using the icon is always in the same place. If you create a “favorite” (via your bookmarks) out of the URL, you will see the favicon next to your favorite.<\/p>\n\n\n\n

A favicon is actually an .ico file and is not a renamed .png or .gif file. You will need to follow the instructions below to create one and integrate it in your website. We will show you how to create a favicon using several different methods.<\/p>\n\n\n\n

You can see an example of the favicon below.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Wikipedia describes a Favicon as follows:<\/p>\n\n\n\n

\n

A favicon<\/strong> (short for favorites icon<\/strong>), also known as a shortcut icon<\/strong>, website icon<\/strong>, URL<\/a> icon<\/strong>, or bookmark icon<\/strong> is a 16\u00d716 or 32\u00d732 pixel square icon<\/a> associated with a particular website<\/a> or webpage<\/a>.[1]<\/a><\/sup> A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers<\/a> will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar<\/a> and next to the page’s name in a list of bookmarks<\/a>. Browsers that support a tabbed document interface<\/a> 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.<\/p>\n<\/blockquote>\n\n\n\n

Why Would I Need a Favicon for My Website?<\/h2>\n\n\n\n

After reading the introduction you should know what a favicon is. You should also know why someone would want to have one.  We will continue on with asking \u201cWhy do other websites have them and what do they do for us?\u201d<\/p>\n\n\n\n

The easiest explanation for having a favicon is marketing and branding. By associating your icon with your website you are helping your brand\u2019s recognition. People will be able to identify your website with this icon. It can also help users find the website they are looking for quickly from their favorites folders. The little icon really goes a long way.<\/p>\n\n\n\n

Every major website has one and getting a favicon for your site can be a small step towards making your website or blog a little more professional.<\/p>\n\n\n\n

How Do I Create a Favicon for My Website?<\/h2>\n\n\n\n

There are many ways to create a favicon. We can use a graphics application to create one, we can use a free application to convert any file to a .ico file, and finally we can use a free website that will convert existing graphic files to a .ico file. These .ico files can be used as your favicon.<\/p>\n\n\n\n

The standard specifications for the file is a 16×16 .ico file. If you are a Photoshop guru you will have no problem creating your own. For the less technical savvy, we will look to an application called Irfanview (which we will cover a little later in this post.) This will let you convert a 16×16 .png file into a .ico file that will function as a favicon.<\/p>\n\n\n\n

After uploading your favicon to the root of your website, you will need to link to it from your page\u2019s HTML. The best implementation of the code will work on Internet Explorer, Firefox, Opera, Chrome and possibly others. That code is as follows:<\/p>\n\n\n\n

<link rel=\"shortcut icon\" href=\"https:\/\/www.example.com\/myicon.ico\"><\/code><\/pre>\n\n\n\n
This code appears below the <head> tag.<\/p>\n\n\n\n
Creating a Favicon Using IrfanView<\/h3>\n\n\n\n
To create your favicon using IrfanView you would start by downloading the free application from here<\/a>. You can open up your 16×16 png file in here by using File \u2013> Open<\/strong>. After you open the file you will see a screen similar to the one below.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Next you will need to open the file menu and choose save as. You will need to drop down the “save as type” menu and select the ICO \u2013 Windows Icon <\/strong>type.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Now you will be able to save your ico file properly. After it is saved you will be able to upload it to your webserver. The file needs to be in the root folder. After uploading the file you should be able to go to your domain name \/favicon.ico and view it in your browser.<\/p>\n\n\n\n
Creating a Favicon Using a Free Web Service<\/h3>\n\n\n\n
We saw how to manually create our favicon, create our favicon by saving as a .ico file from IrfanView and now we will show you how to create a favicon using a free website called favicon.cc. You start by visiting the website<\/a>. You will see a screen similar to the one below.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
You will be able to import an image from your local machine and turn it into a favicon. You can do this by clicking on “import image.” You will see this screen where you will be able to upload your .jpg, .jpeg, .gif, .png, .bmp, .ico, or .cur file. After browsing to the folder and file, click on upload. If the image that you are uploading is not already 16×16 you can use the shrink to square icon option above the upload button.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
When you are finished you can use their on screen image editor<\/a> (similar to Microsoft Paint) or you can download your new favicon. It will be in the proper .ico format and ready to upload.<\/p>\n\n\n\n
Essential Favicon Design Tips<\/h2>\n\n\n\n
Now that you know how to create and add a favicon to your website, here are a few helpful tips on how to make one that is eye-catching and easy to remember by your visitors.<\/p>\n\n\n\n
Use no photo inside your favicon<\/strong><\/h3>\n\n\n\n
Considering the tiny size of a favicon, users won’t be able to make out what is in the photo as it will most likely look blurred and unattractive.<\/p>\n\n\n\n
Put no words inside the favicon<\/strong><\/h3>\n\n\n\n
A single character or two are fine as the Yahoo! website favicon illustrates. If you use an entire word inside the favicon, though, it may be impossible to discern when the website renders on a smaller screen.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Make sure the favicon represents your brand in a compact way<\/strong><\/h3>\n\n\n\n
Yes, that is not an easy task but quite feasible. Take a look at the Procter & Gamble website, for example. We bet you will recognize the brand the moment you see their favicon.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Don’t forget about colors<\/strong><\/h3>\n\n\n\n
Why is that important? Various web page viewers have their specific selections of colors. That means that your favicon may look one way in Mozilla Firefox and another in Microsoft Edge, for instance. <\/p>\n\n\n\n
It’s highly recommended, then, that you test the favicon on several different backgrounds, with black, gray, and white being a minimum required set.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
A favicon is an important part of a website’s development. It helps create a visual association with the icon and your domain name. We showed you the file specifications if you want to create the .ico file yourself. We also showed you how to convert an existing image to a .ico file from within a free application called Irfanview. Finally we showed you how to use Favicon.cc to upload almost any image and convert it into a favicon.<\/p>\n","protected":false},"excerpt":{"rendered":"
A favicon is the icon that appears in a browser's address bar next to the URL. If you want to create one for your own website, we have described several methods you can use to achieve that. <\/p>\n","protected":false},"author":4,"featured_media":11287,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[751,740],"tags":[829,786],"class_list":["post-15693","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-design-services","category-tutorial","tag-photoshop","tag-ui-design"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Dmytro Mashchenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/dima"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/11\/01150042\/illustration-21-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["Digital design services<\/a>","Tutorial<\/a>"],"unlinked":["Digital design services<\/span>","Tutorial<\/span>"]},"tags":{"linked":["Photoshop<\/a>","UI design<\/a>"],"unlinked":["Photoshop<\/span>","UI design<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 3 years ago","modified":"Updated 3 years ago"},"absolute_dates":{"created":"Posted on October 21, 2022","modified":"Updated on February 21, 2023"},"absolute_dates_time":{"created":"Posted on October 21, 2022 9:19 am","modified":"Updated on February 21, 2023 7:56 am"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/11\/01150042\/illustration-21-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/11\/01150042\/illustration-21.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/11\/01150042\/illustration-21.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/11\/01150042\/illustration-21.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/11\/01150042\/illustration-21.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/11\/01150042\/illustration-21.png"},"featured_post_color":"#4d67e6","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/97bd036a871c68c70de0956108719ad9489849769ee15e25e0bee81f3bdd7286?s=96&d=mm&r=g","author_position":"CEO of GetDevDone","reading_time":"<\/span>  6<\/span> min read<\/span><\/span>","prev_post":{"slug":"the-good-the-bad-and-the-best-in-website-navigation","name":"The Good, the Bad, and the Best in Website Navigation"},"next_post":{"slug":"personalized-product-recommendations-for-shopify-stores","name":"5 Types of Personalized Product Recommendations for Shopify Stores in 2022"},"related_posts":["easy-ways-to-change-wordpress-upload-limit","the-good-the-bad-and-the-best-in-website-navigation","8-fatal-ux-design-mistakes-that-may-cause-your-business-to-fail"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/15693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=15693"}],"version-history":[{"count":26,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/15693\/revisions"}],"predecessor-version":[{"id":24647,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/15693\/revisions\/24647"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/11287"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=15693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=15693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=15693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}