[tr?id=375062763293406&ev=PageView&noscript=1]

   (BUTTON) Toggle navigation [1]Favicon Generator
     * [2]Favicon
          + [3]Favicon generator
          + [4]SVG Favicon
          +
          + [5]Favicon checker
          +
          + [6]Favicon generator for Gulp
          + [7]Favicon generator for Grunt
          + [8]Favicon generator for Ruby on Rails
          + [9]Favicon generator for Node.js CLI
          + [10]Favicon generator for ASP.NET Core
          + [11]Favicon generator for Google Web Starter Kit
     * [12]Social
          + [13]Social generator
          +
          + [14]Social checker
     * [15]API
          + [16]API introduction
          + [17]Favicon generation interactive API
          + [18]Favicon generation non-interactive API
          + [19]Download the favicon of a website
          + [20]Favicon analysis
          + [21]Web components
     * [22]Contribute
          + [23]Report an issue
          + [24]Compatibility test
          + [25]Donate
     * [26]Misc
          + [27]FAQ
          + [28]Change log
          + [29]Compatibility
          + [30]Extensions
          +
          + [31]Blog
          + [32]Contact us
          + [33]Newsletter
          +
          + [34]Terms of service
          + [35]Privacy policy
          + [36]Cookies

     * [37][glyphicons-social-32-twitter.png]
     * [38][glyphicons-social-31-facebook.png]

Favicon Generator. For real.

All browsers

     * chrome
     * Safari
     * Firefox
     * Internet Explorer
     * Edge

All platforms

     * iOS
     * Android
     * Windows
     * Mac OS X
     * Google Result Pages

Your favorite technologies

     * HTML5
     * WordPress
     * Grunt
     * Gulp
     * Node.js
     * Command line
     * Ruby on Rails
     * ASP.NET Core
     * Google Web Starter Kit

   (BUTTON) Select your Favicon image

   Submit an image (PNG, JPG, SVG...), at least 70x70.
   Your image should be 260x260 or more for optimal results.
   (BUTTON) Demo with a random image
   [39]Create a SVG favicon
   0% completed

Favicon for Desktop Browsers and Google Result Pages

   The classic favicon is used by desktop browsers and other platforms. For example,
   search engines such as Google and Yandex are showing this icon in their search
   results.

Desktop browsers

Default theme

Dark theme / Incognito

Google result pages

Desktop

Mobile

   The favicon for desktop browsers is often the web site logo itself. However, a
   lack of contrast with the tabs or Google result pages can disrupts the appearance
   of the icon. Adding a solid background can make your favicon more resilient.
   (*) Use the original image as is.
   ( ) Add margins and a plain background.
   Background color #333333_____________
   Background radius ____________________
   Image size ____________________

Favicon for iOS - Web Clip

   iPhone and iPad users can pin your web site on their home screen. The link looks
   like a native app.
   iOS home screen
   iOS home screen
     * [40]Settings
     * [41]Assets
     * [42]Dedicated picture

   Your favicon is transparent. This is usually a good thing, but not for iOS Web
   Clips which are supposed to be opaque. Look at the sample on the left, this is
   how a user would see your favicon as a Web Clip on his device. What to do about
   this?

   Your favicon is not transparent. This is a good thing for iOS Web Clips. Yet, web
   clip corners are rounded. Depending of your favicon, it may disrupt its design.
   For example, if your favicon features a square border, it will be cut at the
   corners. Look at the sample on the left and check how your favicon will be
   rendered on iOS. What do you want to do?
   (*) Use the original favicon as is. iOS will fill the transparent regions with
   black.
   ( ) Add a solid, plain background to fill the transparent regions. Add margins
   and a plain background.
   Background color #ffffff_____________ Tip: You can pick a color directly from the
   preview.
   Margin size (for a 57x57 icon) ____________________

   We always create a single, high resolution, one-size-fits-all icon. Everything
   else is optional.

iOS 7 and Later

   [ ] Create all icons for iOS 7 and later

iOS 6 and Prior

   [ ] Create all icons for iOS 6 and prior

Miscellaneous

   [X] In the HTML, declare only the icon with the highest resolution
   [ ] Generate the corresponding precomposed icons

   If your master picture does not fit iOS well, you can submit a picture designed
   especially for iOS.
   (BUTTON) Pick picture for iOS
   (*) Master picture
   [ios_home_screen_transparent_window.png]
   ( ) Dedicated picture
   [ios_home_screen_transparent_window.png]
   [spinner.gif]

Favicon for Android Chrome

   Add to Homescreen is a also a feature of Android Chrome. Your visitors can mix
   their natives apps and web bookmarks.
   Android home screen
   Android home screen My app
   Android switcher
   Android Chrome Switcher - Light cross Android Chrome Switcher - dark cross
   Android Chrome Switcher - Browser icon Android Chrome Switcher - Standalone icon
   Chrome My app Android Chrome Switcher - Navigation
   Android splash screen
   (BUTTON) Home (BUTTON) Switcher (BUTTON) Splash
     * [43]Main settings
     * [44]Options
     * [45]Assets
     * [46]Dedicated picture

   Android is flexible regarding icon design. However, it automatically rounds icons
   which can be bad news if your icon needs square corners. Also, make sure your
   favicon will always be prominent, whatever the background. Use the options below
   to find the best fit.
   (*) No change, keep the master picture as it is.
   ( ) Add a solid, plain background to fill the transparent regions. Add margins
   and a plain background.
   Background color #ffffff_____________ Tip: You can pick a color directly from the
   preview.
   Margin size (for a 96x96 icon) ____________________
   ( ) Apply a slight drop shadow, similar to official Google apps (Gmail, Play
   Store, YouTube...).
   App name ____________________
   Theme color #ffffff_____________ Starting with Android Lollipop, you can
   customize the color of the task bar in the switcher.

   Android Chrome M39 introduces a manifest that helps you refine the behavior of
   the Add to Homescreen link.
   ( ) Browser. In this mode, when the user clicks the link, Android Chrome behaves
   as if the page was opened like any regular web site.
   (*) Standalone. In this mode, Android Chrome gives a little more "native" style
   to the opened page. In particular, it lets you enforce the start URL and screen
   orientation. It also remove the navigation bar and gives your web site its own
   tab in the task switcher.
   Start URL ____________________ Typically, your homepage. Use this field to
   override the URL of the bookmarked page.
   Orientation
   (*) Not specified. Android Chrome will behave as it usually does when the user
   rotates his/her device.
   ( ) Force screen orientation to Portrait.
   ( ) Force screen orientation to Landscape.

Modern versions

   Android Chrome 39 and later
   (*) Create only recommended, high resolution icons
   ( ) Create all documented icons

Legacy versions

   Android Chrome 38 and prior
   [ ] Declare the icon in the HTML code If you don't, Chrome uses the Apple Touch
   icon

   If your master picture does not fit Android well, you can submit a picture
   designed especially for Android.
   (BUTTON) Pick picture for Android Chrome
   (*) Master picture
   [android_splash_screen.png]
   ( ) Dedicated picture
   [android_splash_screen.png]
   [spinner.gif]

Windows Metro

   Windows 8 and 10 users can pin your web site on their desktop. Your site appears
   as a tile, just like a native Windows app.
   Windows 8 home screen
     * [47]Settings
     * [48]Assets
     * [49]Dedicated picture

   Transparent pictures make better tiles. Look at the sample on the left and check
   that your tile looks good. You can also choose the background of the tile.
   Use this color (preferably, choose one [50]suggested for the Windows Metro UI):
   #da532c_____________
   (BUTTON) Teal (BUTTON) Dark Blue (BUTTON) Light Purple (BUTTON) Dark Purple
   (BUTTON) Dark Red (BUTTON) Dark Orange (BUTTON) Yellow (BUTTON) Green (BUTTON)
   Blue
   (*) Use the original favicon as is.
   ( ) Use a white silhouette version of the favicon. Works well with pictures with
   significant transparent regions.

Windows 8.0 / IE 10

   [ ] Medium, square icon, declared with two HTML markups

Windows 8.1 and 10 / IE 11 and Edge

   These icons are declared in a dedicated browserconfig.xml file, generated along
   with the icons.
   [ ] Small, square icon
   [X] Medium, square icon
   [ ] Big, square icon
   [ ] Rectangular icon

   If your master picture does not fit Windows well, you can submit a picture
   designed especially for Windows.
   (BUTTON) Pick picture for Windows
   (*) Master picture
   [w8_home_screen.png]
   ( ) Dedicated picture
   [w8_home_screen.png]
   [spinner.gif]

macOS Safari

   Safari implements pinned tabs and takes advantage of the MacBook Touch Bar. This
   feature relies on an SVG icon. This icon must be monochrome and Safari does the
   rest.

Pinned tab - No focus

   [no_focus.png]
   [no_focus.png]

Pinned tab - Focus

   [focus.png]
   [focus.png]

Touch Bar

   [touch_bar.png] [touch_bar.png]
     * [51]Settings
     * [52]Dedicated picture

   (*) Use a silhouette of the original image. Works well with pictures with
   significant transparent regions.
   ( ) Turn your picture into a monochrome icon. Play with the threshold to get the
   best result. ____________________
   ( ) No icon. Safari uses the first letter of your domain name to create a default
   icon. You should use this option if your site absolutely needs to be W3C
   compliant.
   Theme color #5bbad5_____________

   If your master picture does not fit well, you can submit a picture designed
   especially for Safari.
   (BUTTON) Pick picture for Safari pinned tab
   (*) Master picture
   [touch_bar.png]
   ( ) Dedicated picture
   [touch_bar.png]
   [spinner.gif]

Favicon Generator Options

     * [53]Path
     * [54]Version/Refresh
     * [55]Compression
     * [56]Scaling algorithm
     * [57]App name
     * [58]Additional files

   (*) I will place favicon files (favicon.ico, apple-touch-icon.png, etc.) at the
   root of my web site. [59]Recommended.
   ( ) I cannot or I do not want to place favicon files at the root of my web site.
   Instead I will place them here: ____________________

   When a browser loads a favicon for the first time, it tends to cache it and to
   never load it again. When your web site is not new and you want to update your
   favicon, that can be a problem: your loyal visitors won't notice the change. A
   workaround is to append a version to the favicon URLs as a query parameter.
   (*) This is a new web site, nobody visited it yet. So there is no "old" favicon
   and no caching issue.
   ( ) The web site is already in production and many people already visited it. I
   want returning visitors to see my new favicon, not the old one.
   http://example.com/favicon.ico? v_________ = ____________________

   Compress the favicon pictures and reduce their size by 50%-80%. [60]Learn more

Oops!

   Something went wrong with the compression. Sorry for this :-/

   Would you be so kind to [61]report an issue? Please attach your master picture.
   (*)

   Expected compression rate: %

   [spinner.gif]

   We let you choose the scaling algorithm which provides the best result for your
   picture. Please wait a few seconds while we prepare the previews.
   (*)
   16x16 picture 16x16 picture, 8x zoom
   [spinner.gif] [spinner.gif]

   When adding a link to the home screen, the user can choose a caption. By default,
   this is the bookmarked page title, which is usually fine. However, iOS and
   Windows 8 let you override this default value.
   (*) No app name, let the browser offer the page title by default.
   ( ) Specific app name, override the page title. ____________________
   [ ] Generate README.md, which summarizes the package install instructions. Use
   this option to make the favicon package self-sufficient.
   [ ] Generate html_code.html, which contains the icons HTML markups. This file can
   be inlined as is in HTML documents.
   (BUTTON) Generate your Favicons and HTML code
   (BUTTON) ×

Your favicon is not correct

   (BUTTON) Close

Your master picture

   (BUTTON) Cancel and submit another picture (BUTTON) Continue with this picture
   (BUTTON) ×

Missing pictures

   You have chosen to use a specific picture fot the iOS Web clip, but you haven't
   uploaded any picture. Please upload a picture or choose another option.

   You have chosen to use a specific picture fot the Windows 8 tile, but you haven't
   uploaded any picture. Please upload a picture or choose another option.
   (BUTTON) Close
   (BUTTON) ×

Missing path

   You have chosen to not place your files in the root of your web site. Please
   specify a path.
   (BUTTON) Close

Why put the favicon pictures in the root directory

   When [62]generating a favicon with RealFaviconGenerator, the instructions ask you
   to place all files at the root of your web site. You may want to place them in a
   sub-directory, for example in http://mywebsite.com/icons/, just to make things
   clearer. However, there are three drawbacks with this approach:
     * Internet Explorer looks for favicon.ico at the root of the web site. Granted:
       this is because we ask you to [63]not declare favicon.ico.
     * iOS devices look for files such as apple-touch-icon-144x144.png at the root
       of the web site, [64]as described by Apple. This issue can be mitigated by
       declaring the icons in the HTML code (this is necessary for Android anyway),
       but following Apple conventions is probably the best move.
     * By default, Internet Explorer 11 looks for browserconfig.xml at the root of
       the web site.
     * Several services, such as [65]Yandex, look for favicon.ico in the root
       directory.

   (BUTTON) Ok

Favicon compression

   RealFaviconGenerator can compress the generated pictures. You usually get a
   50%-80% compression rate. Not bad! [66]The compression works well on all tested
   platforms. Even better!

   The compression is lossy, meaning you might notice differences between the
   original and compressed pictures. Yet the differences are (supposed to be)
   minimal:
   Uncompressed picture (36KB) Compressed picture (14KB)
   Uncompressed picture        Compressed picture

   You can see slight differences in the gradient part:
    No zoom      4x zoom
   Gradients Zoom gradients

   When you download the compressed pictures, make sure they match your standards.
   (BUTTON) Ok

Check your favicon

   Check your existing favicon with our online tool and see what can be improved.
   [http://_] ____________________ (BUTTON) Check Favicon
   Protocol [http://_]
   Site ____________________
   (BUTTON) Check Favicon

Why RealFaviconGenerator

No hard decision

   With so many platforms and icons, it's hard to know exactly what you should do.
   What are the dimensions of favicon.ico? How many Touch icons do I need?
   RealFaviconGenerator did the reseach and testing for you.

Done in 5 minutes

   You spent hours on design, colors, graphics... How much time left for the
   favicon? Probably not much. But no worries, you only need a few minutes to tackle
   this task.

Compelling design, a platform at a time

   Each platform comes with its own design requirements. You can't just use the same
   picture everywhere. RealFaviconGenerator knows this and lets you craft your icons
   platform per platform.

Instant feedback

   How will Android display my icon? How will iOS round my Touch icon? No more
   guesswork. RealFaviconGenerator instantly shows you how your icons will look
   like.

   [67][glyphicons-social-32-twitter.png] [68][glyphicons-social-31-facebook.png]
   [69]Favicon Generator
   [70]Favicon Checker
   [71]Favicon for Gulp
   [72]Favicon for Grunt
   [73]Favicon for Ruby on Rails
   [74]Favicon for Node.js CLI
   [75]Favicon for ASP.NET Core
   [76]Favicon for Google Web Starter Kit
   [77]FAQ
   [78]Blog
   [79]Report bug
   [80]Change Log
   [81]Compatibility
   [82]Extensions
   [83]API
   [84]Compatibility Test
   [85]Contact us
   [86]Donate
   [87]Newsletter
   [88]Terms of service
   [89]Privacy policy
   [90]Cookies
   [91]RealFaviconGenerator.net © 2013-2024

References

   1. https://realfavicongenerator.net/
   2. https://realfavicongenerator.net/
   3. https://realfavicongenerator.net/
   4. https://realfavicongenerator.net/svg-favicon
   5. https://realfavicongenerator.net/favicon_checker
   6. https://realfavicongenerator.net/favicon/gulp
   7. https://realfavicongenerator.net/favicon/grunt
   8. https://realfavicongenerator.net/favicon/ruby_on_rails
   9. https://realfavicongenerator.net/favicon/node_cli
  10. https://realfavicongenerator.net/favicon/aspnet_core
  11. https://realfavicongenerator.net/favicon/google_web_starter_kit
  12. https://realfavicongenerator.net/
  13. https://realfavicongenerator.net/social
  14. https://realfavicongenerator.net/social/checker
  15. https://realfavicongenerator.net/
  16. https://realfavicongenerator.net/api
  17. https://realfavicongenerator.net/api/interactive_api
  18. https://realfavicongenerator.net/api/non_interactive_api
  19. https://realfavicongenerator.net/api/download_website_favicon
  20. https://realfavicongenerator.net/api/favicon_analysis
  21. https://realfavicongenerator.net/api/web_components
  22. https://realfavicongenerator.net/
  23. https://github.com/phbernard/realfavicongenerator/issues
  24. https://realfavicongenerator.net/favicon_compatibility_test
  25. https://realfavicongenerator.net/donate
  26. https://realfavicongenerator.net/
  27. https://realfavicongenerator.net/faq
  28. https://realfavicongenerator.net/change_log
  29. https://realfavicongenerator.net/favicon_compatibility
  30. https://realfavicongenerator.net/extensions
  31. https://realfavicongenerator.net/blog
  32. mailto:contact@realfavicongenerator.net
  33. https://realfavicongenerator.net/newsletter
  34. https://realfavicongenerator.net/terms_of_service
  35. https://realfavicongenerator.net/privacy_policy
  36. https://realfavicongenerator.net/cookies
  37. https://twitter.com/RealFavicon
  38. https://www.facebook.com/RealFaviconGenerator
  39. https://realfavicongenerator.net/svg-favicon
  40. https://realfavicongenerator.net/#ios_main_settings_sub_form
  41. https://realfavicongenerator.net/#ios_assets_sub_form
  42. https://realfavicongenerator.net/#ios_dedicated_picture_sub_form
  43. https://realfavicongenerator.net/#android_main_settings_sub_form
  44. https://realfavicongenerator.net/#android_options_sub_form
  45. https://realfavicongenerator.net/#android_assets_sub_form
  46. https://realfavicongenerator.net/#android_dedicated_picture_sub_form
  47. https://realfavicongenerator.net/#w8_main_settings_sub_form
  48. https://realfavicongenerator.net/#w8_assets_sub_form
  49. https://realfavicongenerator.net/#w8_dedicated_picture_sub_form
  50. https://realfavicongenerator.net/faq#windows_8_tile_colors
  51. https://realfavicongenerator.net/#safari_pinned_tab_main_settings_sub_form
  52. https://realfavicongenerator.net/#safari_pinned_tab_dedicated_picture_sub_form
  53. https://realfavicongenerator.net/#files_location_sub_form
  54. https://realfavicongenerator.net/#version_sub_form
  55. https://realfavicongenerator.net/#compress_sub_form
  56. https://realfavicongenerator.net/#scale_sub_form
  57. https://realfavicongenerator.net/#app_name_sub_form
  58. https://realfavicongenerator.net/#additional_files_sub_form
  59. https://realfavicongenerator.net/
  60. https://realfavicongenerator.net/
  61. https://github.com/RealFaviconGenerator/realfavicongenerator/issues
  62. https://realfavicongenerator.net/
  63. https://realfavicongenerator.net/faq#why_ico_not_declared
  64. https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
  65. http://help.yandex.com/webmaster/search-results/favicon.xml#how-to-create
  66. https://realfavicongenerator.net/favicon_compatibility#compressed
  67. https://twitter.com/RealFavicon
  68. https://www.facebook.com/RealFaviconGenerator
  69. https://realfavicongenerator.net/
  70. https://realfavicongenerator.net/favicon_checker
  71. https://realfavicongenerator.net/favicon/gulp
  72. https://realfavicongenerator.net/favicon/grunt
  73. https://realfavicongenerator.net/favicon/ruby_on_rails
  74. https://realfavicongenerator.net/favicon/node_cli
  75. https://realfavicongenerator.net/favicon/aspnet_core
  76. https://realfavicongenerator.net/favicon/google_web_starter_kit
  77. https://realfavicongenerator.net/faq
  78. https://realfavicongenerator.net/blog
  79. https://github.com/phbernard/realfavicongenerator/issues
  80. https://realfavicongenerator.net/change_log
  81. https://realfavicongenerator.net/favicon_compatibility
  82. https://realfavicongenerator.net/extensions
  83. https://realfavicongenerator.net/api
  84. https://realfavicongenerator.net/favicon_compatibility_test
  85. mailto:contact@realfavicongenerator.net
  86. https://realfavicongenerator.net/donate
  87. https://realfavicongenerator.net/newsletter
  88. https://realfavicongenerator.net/terms_of_service
  89. https://realfavicongenerator.net/privacy_policy
  90. https://realfavicongenerator.net/cookies
  91. https://realfavicongenerator.net/