Here are the steps I took to make this icon transparent. I used Inkscape and Dynamic Drive’s online favicon generator to make this happen.
00
.
Thanks to this graphicdesign.stackexchange solution,
Just using save as -> png does not apply the transparent background. However, the transparent background is the default when you export: File > Export Bitmap -> Export.
In newer Inkscape versions (at least in version 0.91), that option is File > Export PNG Image (or Ctrl + Shift + e) instead. Note that when you do that, instead of a pop-up window, you will see an attached window (shown below) appear on the side.
.png
or .ico
#Another question I faced when working on this was whether I should save the favicon as a .png
or .ico
because I have seen both of these types being used.
Thanks to this stackoverflow solution,
All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you’ve specified a shortcut icon via <link>.
The answer also says that .ico
files support transparency just fine
and that’s where I learned about Dynamic Drive’s favicon generator tool.
.png
in Inkscape..ico
using Dynamic Drive’s favicon generator tool.Today I was browsing this site on my Android phone and I noticed that the Google Chrome browser did not show this favicon on the list of recently visited websites.
That bugged me and a little bit of googling led me to an even better online favicon generator website: realfavicongenerator.net.
I simply needed to upload my Inkscape created .png
(with transparent background) to that site, and it provided a favicon package for different platforms and an HTML code to be put in the <head>
:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#000000">
The website also shows previews of how the icon would look on different platforms: regular browser tabs, iOS, Android, etc.
Here is how this favicon looks on Android Chrome after updating the icons and this website’s <head>
.