{"id":61487,"date":"2016-02-03T04:37:01","date_gmt":"2016-02-03T09:37:01","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=61487"},"modified":"2020-05-04T12:58:01","modified_gmt":"2020-05-04T16:58:01","slug":"how-to-create-ico-favicon-with-photoshop","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-create-ico-favicon-with-photoshop.html","title":{"rendered":"How to create .ico favicon with Photoshop"},"content":{"rendered":"

This tutorial will show you how to create favicon<\/strong> for your website using Photoshop<\/strong>.<\/p>\r\n\r\nHow to create .ico favicon with Photoshop<\/a>\r\n\r\n

Favicon is a small but significant way of promoting your brand on your website. This is how it may look on your website:<\/p>\r\n\r\n\"How_to_create_favicon_for_your_website_using_Photoshop_1\"<\/a>\r\n

Photoshop is a great and flexible graphics editing program for creating custom favicons.<\/p>\r\n

Favicon is usually 16×16<\/strong> mini logo you can use on your website, but if you need a little more space to work with, you can start out with a document that is 64×64<\/strong> pixels, and then scale it down later.<\/p>\r\n\r\n

    \r\n\t

  1. Let’s create a new document in Photoshop. Open ‘File’ > ‘New’<\/strong> menu:<\/p>\r\n\t\r\n\"How_to_create_favicon_for_your_website_using_Photoshop_2\"<\/a>\r\n<\/li>\r\n\t\r\n\t

  2. Use ‘Zoom’ tool to increase the document for editing: <\/p>\r\n\r\n\"How_to_create_favicon_for_your_website_using_Photoshop_3\"<\/a>\r\n<\/li>\r\n\t\r\n\t

  3. For our example favicon, we’ll create a simple gradient background with 2 letters ‘TM”’ (TradeMark).<\/p><\/li>\r\n\t\r\n\t

  4. Apply ‘Gradient Tool’<\/strong> to your document. Feel free to use any color presets available by default or create new ones:<\/p>\r\n\t\r\n\"How_to_create_favicon_for_your_website_using_Photoshop_4\"<\/a>\r\n<\/li>\r\n\t\r\n\t

  5. Use ‘Horizontal Type Tool’<\/strong> to add your own text. Set the font family, font size, font color:<\/p>\r\n\r\n\"How_to_create_favicon_for_your_website_using_Photoshop_5\"<\/a>\r\n<\/li>\r\n\t\r\n\t

  6. Using ‘Transform Tool’ (Ctrl + T) <\/strong>adjust text position: <\/p>\r\n\r\n\"How_to_create_favicon_for_your_website_using_Photoshop_6\"<\/a>\r\n<\/li>\r\n\t\r\n\t

  7. Merge layers <\/strong>as shown on the screenshot below:<\/p>\r\n\t\r\n\"How_to_create_favicon_for_your_website_using_Photoshop_7\"<\/a>\r\n<\/li>\r\n\t\r\n\t

  8. Go to ‘File’ > ‘Save As’<\/strong>, open up the drop-down menu and select the .PNG (*.PNG)<\/strong> option. Hit the ‘Save’<\/strong> button:<\/p>\r\n\t\r\n\"How_to_create_favicon_for_your_website_using_Photoshop_8\"<\/a>\r\n<\/li>\r\n\t\r\n\t

  9. You’ve successfully created your own favicon image. It was saved as ‘favicon.png’<\/strong> file on your hard drive. <\/p><\/li>\r\n\t\r\n\t

  10. Favicons are saved as .ICO<\/strong> files, a file format that saves multiple images at different sizes for scaling purposes. Therefore, the last step would be converting image format from .PNG into .ICO<\/strong>. This will be the easiest step in the whole tutorial. <\/p>\r\n\t<\/li>\r\n\t\r\n\t

  11. Open any online Image Converting Website in your browser. We will use this website<\/a>. <\/p><\/li>\r\n\t\r\n\t

  12. Drop your ‘favicon.png’<\/strong> file into ‘Upload’ area (as shown on the screenshot). Convertion starts automatically. The process takes 1 – 2 seconds: <\/p>\r\n\t\r\n\"How_to_create_favicon_for_your_website_using_Photoshop_9\"<\/a>\r\n<\/li>\r\n\t

  13. Hit the ‘Download’<\/strong> button to get ‘favicon.ico’<\/strong> file to your hard drive. <\/p><\/li>\r\n\t\r\n<\/ol>\r\n\r\n

    And you’ve done it! We’ve created a unique favicon for your website using Adobe Photoshop software. Feel free to upload your favicon to your server. <\/p>\r\n\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nHow to create .ico favicon with Photoshop<\/a>\r\n\r\n

    \r\n\r\n

    If your budget is limited and you can\u2019t afford to pay for Adobe subscription every month, you can try this Online Photoshop Editor<\/a> that is available absolutely for free and can help even beginner users cope with designing logos and icons. If you don\u2019t perceive Photoshop as your main tool for creating custom favicons, have a closer look at these handy free favicon generators that perfectly fit such a task.<\/p>\r\n\r\n

    1. Genfavicon<\/strong><\/p>\r\n\r\n

    This is a wonderful instrument that you can use to turn any image into a working favicon for your site. Primarily, you need to crop and resize your image (both tools are available here) and then save the result in the .ico format. There is a handy preview function, so you can see how your favicon will look before you click the \u201cSave\u201d button.<\/p>\r\n\r\n

    2. RealFaviconGenerator<\/strong><\/p>\r\n\r\n

    You are unlikely to find a more universal and flexible tool for generating favicons. The biggest upside of RealFaviconGenerator is the possibility to test your new favicon, by entering the website\u2019s address and learning how efficient the favicon is.<\/p>\r\n\r\n

    The service collects the reviews and sorts them by platform, so you can find out how your favicon will look in different browsers and OS. With this info in mind, you can improve your favicon to make it appealing to a broader range of people.<\/p>\r\n\r\n

    3. Xiconeditor<\/strong><\/p>\r\n\r\n

    A truly remarkable generator for quick and effortless favicon creation from scratch. Looking through the available toolset, you are bound to be amazed, since there are all the necessary instruments for the task \u2013 a type tool, an eraser, a brush, a pencil tool and many other instruments shared absolutely for free.<\/p>\r\n\r\n

    If you have already created a kind of a base for your favicon, you can import it and adjust by altering the size. The preview feature adds to the popularity of this service, since it is always nice to know how your favicon will look like before importing the result.<\/p>\r\n\r\n

    4. Logaster<\/strong><\/p>\r\n\r\n

    This is probably one of the fastest and simplest favicon generators. The total number of logos created with the help of Logaster goes over 6,000,000 items.<\/p>\r\n\r\n

    The process is very straightforward. Select \u201cCreate Logo\u201d, enter your company\u2019s name and pick the proper activity type. There is a plethora of ready-made templates, which you can use with slight customization. Once you are done with settings, click \u201cStart\u201d and enjoy the result.<\/p>\r\n

    5. Favicon-Generator<\/strong><\/p>\r\n\r\n

    This is a handy tool favored by people using Android, Microsoft and iOS apps, as well as those trying to create a catchy and well-optimized favicon for online sources. It supports such formats as JPG, PNG and GIF, so upload an image in any of these formats and turn it into the .ico file. If there isn\u2019t any suitable image at hand, look through the integrated icon collection.<\/p>\r\n\r\n

    You can search for the proper image by letters, colors and numbers. After you\u2019ve selected a suitable file, start editing it and save the favicon you get to the root directory of your website.<\/p>","protected":false},"excerpt":{"rendered":"

    This tutorial will show you how to create favicon<\/strong> for your website using Photoshop<\/strong>.<\/p>\n","protected":false},"author":37,"featured_media":61501,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[250],"tags":[2174,560,918,564],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/61487"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=61487"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/61487\/revisions"}],"predecessor-version":[{"id":86575,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/61487\/revisions\/86575"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/61501"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=61487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=61487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=61487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}