{"id":9333,"date":"2020-07-07T10:09:25","date_gmt":"2020-07-07T07:09:25","guid":{"rendered":"https:\/\/vipestudio.com\/?p=9333"},"modified":"2020-07-15T21:54:01","modified_gmt":"2020-07-15T18:54:01","slug":"before-you-make-your-favicon-wordpress-guide","status":"publish","type":"post","link":"https:\/\/vipestudio.com\/en\/before-you-make-your-favicon-wordpress-guide\/","title":{"rendered":"Before you Make your Favicon: WordPress Guide"},"content":{"rendered":"<p>Welcome to Part 2 of our ongoing series on Favicons, and let\u2019s set the ball rolling, continuing from where we left off last time.<\/p>\n<p>Since we agreed in the previous part that a Favicon is both essential and pretty easy to make, let\u2019s now look at two steps needed to get to the Favicon you have in mind.<\/p>\n<h2>Deciding on a Favicon Size<\/h2>\n<p>A Favicon can range in size from 16 \u00d7 16 pixels all the way to 512 \u00d7 512 pixels (a.k.a. 512 px), depending on the use case. So, at some point, you\u2019ll have to decide what devices and resolutions you\u2019d want to support with your Favicon. Refer to the list below to figure out which size works for you:<\/p>\n<ul>\n<li>16px is the size of choice for all browsers as it is the smallest possible size for a Favicon. This also possibly makes it quite pixelated or blurry on clients that support larger sizes.<\/li>\n<li>24px is the size of the icon that IE (Internet Explorer) 9 uses for its \u2018pinned\u2019 sites.<\/li>\n<li>32px is a Favicon size used for quite a few visible elements \u2013 an IE new tab page, Windows taskbar elements, and the Read later sidebar in Safari.<\/li>\n<li>57px is what you\u2019d need if you wanted the icon to display correctly on an iOS home screen that\u2019s \u2018standard\u2019 resolution \u2013 as in it isn\u2019t Retina.<\/li>\n<li>72px is the size for a \u2018standard\u2019 resolution iPad home screen.<\/li>\n<li>114px is what more and more of the modern devices use, especially when you have Retina displays that like to make the most of \u2018double-standard\u2019 resolutions so that everything looks clear and high quality.<\/li>\n<\/ul>\n<p>It goes without saying that making your Favicon in all these sizes would be the best bet, as that\u2019ll ensure it displays correctly for all visitors, browsers and devices. Alternatively, it also makes sense to just pick the devices that you specifically target and just use those sizes.<\/p>\n<h2>The Design Phase, and Picking the Right Format<\/h2>\n<p>Favicon creation can take a bit of time, and it depends on other factors how you\u2019ll end up going about it, but we\u2019ll look at that later and see what methods and options are at your disposal.<\/p>\n<p>Remember these pointers, though, while you\u2019re only just designing the Favicon.<\/p>\n<ul>\n<li><strong>Simplicity.<\/strong> No matter how big your intended Favicon size is, it\u2019s still a small part of every screen it\u2019ll be displayed on, so avoid busy designs and make it easy to understand and recognize.<\/li>\n<li><strong>Brand Consistency.<\/strong> At its heart, the Favicon is your tiniest brand logo or identity \u2013 so don\u2019t stray from the colour schemes, fonts, or logo elements that you use for your brand logo or any other components in your branding.<\/li>\n<li><strong>Make it Big.<\/strong> We can\u2019t stress this enough. Anyone who has zoomed into a low-resolution picture, or seen a regular 16px Favicon displayed on a Retina screen can confirm that it defeats the purpose of your Favicon if you start small and then \u2018upscale\u2019 it to higher resolutions. Additionally, a larger Favicon is also way easier for you to work with when creating.<\/li>\n<\/ul>\n<p>The design you come up with will also need to be saved in the right format. The \u2018.ico\u2019 format is available in most graphic design suites. You\u2019ll need to save the base Favicon file as Favicon.ico, as browsers and operating systems will default to this file if no other icon is available. For differently sized versions, you can include the pixel values in their file names.<\/p>\n<p>Now that you know what you need to bear in mind before you embark on making the Favicon, Part 2 of this Favicon series has served its purpose, Remember we said this process was time-consuming? We\u2019ll join you next time with information about specialized tools for Favicon-building and adding that\u2019ll make it quick and painless for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Part 2 of our ongoing series on Favicons, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[117],"tags":[235,266,128],"class_list":["post-9333","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-design","tag-design","tag-favicons","tag-wordpress-en"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/9333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/comments?post=9333"}],"version-history":[{"count":0,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/9333\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/media\/9336"}],"wp:attachment":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/media?parent=9333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/categories?post=9333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/tags?post=9333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}