Adding a favicon to a static HTML page

Question

I have a few static pages that are just pure HTML  that we display when the server goes down  How can I put a favicon that I made  it s 16x16px and it s sitting in the same directory as the HTML file  it s called favicon ico  as the  tab  icon as it were  I have read up on Wikipedia and looked at a few tutorials and have implemented the following    lt link rel  icon  href  favicon ico  type  image x-icon   gt   lt link rel  shortcut icon  href  favicon ico  type  image x-icon   gt    But it still doesn t want to work  I am using Chrome to test the sites  According to Wikipedia  ico is the best picture format that runs on all browser types   Update  I could not get this to work locally although the code checks out it will only really work properly once the server started serving the site  Just try pushing it up to the server and refresh your cache and it should work fine

User · Answer

I know its older post but still posting for someone like me   This worked for me   lt link rel  shortcut icon  type  image x-icon  href  favicon ico    gt    put your favicon icon on root directory

User · Answer

If you add the favicon into the root images folder with the name favicon ico browser will automatically understand and get it as favicon I tested and worked  your link must be www website com images favicon ico  For more information look this answer   Do you have to include  lt link rel  quot icon quot  href  quot favicon ico quot  type  quot image x-icon quot    gt

User · Answer

Most browsers will pick up favicon ico from the root directory of the site without needing to be told  but they don t always update it with a new one right away   However  I usually go for the second of your examples    lt link rel  shortcut icon  type  image x-icon  href   favicon ico    gt

User · Answer

lt link rel  shortcut icon  type  image png  href   favicon png   gt    lt link rel  shortcut icon  type  image ico  href  http   example com favicon ico   gt    This worked for me

User · Answer

Note that FF fails to load an icon with a redundant    in URL like  img  favicon png  Tested on FF 53  Chrome is OK

User · Answer

As recommended by W3 org  you can use the rel attribute to achieve this   Example    lt head gt   lt link rel  icon         type  image png         href  http   example com myicon png  gt

User · Answer

Convert your image file to Base64 string with a tool like this and then replace the YourBase64StringHere placeholder in the below snippet with your string and put the line in your HTML head section    lt link href  data image x-icon base64 YourBase64StringHere  rel  icon  type  image x-icon    gt    This will work 100  in browsers

User · Answer

Notice that if your site is running as a subfolder ie   http   localhost MySite    You will need to take that into account  If you are doing so from an ASP NETapp all you need to do is add a   to the front of the URL    lt link rel  shortcut icon  type  image x-icon  href    favicon ico    gt

User · Answer

If the favicon is a png type image  it ll not work in older versions of Chrome  However it ll work just fine in FireFox  Also  don t forget to clear your browser cache while working on such things  Many a times  code is just fine  but cache is the real culprit

User · Answer

As per OP s update  It was not showing up locally  but as per OP s update  once I uploaded it to the server  it was fine   Since this is a simple  static html website  I have the luxury of working on it without running a local webserver  A webserver will generally automatically serve up the favicon  if there is one  by default     But when not running a webserver  the browser itself will not just read the directory looking for additional files  say a favicon ico  unless it is listed in the html document     So  while I had the following items in the head tag          lt link rel  apple-touch-icon  sizes  180x180  href   apple-touch-icon png  gt       lt link rel  icon  type  image png  sizes  32x32  href   favicon-32x32 png  gt       lt link rel  icon  type  image png  sizes  16x16  href   favicon-16x16 png  gt       lt link rel  manifest  href   site webmanifest  gt    I did not also include a reference for plain  ol favicon ico  Even though  the favicon ico file was included  in addition to the images listed above     Once I added the following line          lt link rel  icon  type  image x-icon  href  favicon ico  gt    It did also show up in my browser  when I viewing the local file  even when not serving it through a local server   So icon showed up fine when it ran on the live server  but not locally     I mention this explicitly because the favicon generator I used  kindly supplied the code  icons  manifest  and instructions   However  while it included the favicon ico image  it did not include a  lt link gt  to that file in the code to add to the html document  I guess that service presumes favicon ico will automatically be served up and used by all browsers by default  so only the  alternate  versions needed to be explicitly added to the head tag  Evidently  they don t consider that when viewing files locally  aka not serving them up locally   we aren t interested in seeing the favicon

User · Answer

You can make a  png image and then use one of the following snippets between the  lt head gt  tags of your static HTML documents    lt link rel  icon  type  image png  href   favicon png   gt   lt link rel  icon  type  image png  href  https   example com favicon png   gt

User · Answer

Actually  to make your favicon work in all browsers  you must have more than 10 images in the correct sizes and formats   I created an App  faviconit com  so people don  t have to create all these images and the correct tags by hand   Hope you like it

User · Answer

Usage Syntax   ico   gif   png   svg  This table shows how to use the favicon in major browsers  The standard implementation uses a link element with a rel attribute in the  section of the document to specify the file format and file name and location   Note that most browsers will give precedence to a favicon ico file located in the website s root  therefore ignoring any icon link tags                                                Edge   Firefox   Chrome   I E    Opera   Safari    ---------------------------------------- ------ --------- -------- ------ ------- --------     lt link rel  shortcut icon                 Yes    Yes       Yes      Yes    Yes     Yes         href  http   example com myicon ico  gt                                                          lt link rel  icon                          Yes    Yes       Yes      9      Yes     Yes         type  image vnd microsoft icon                                                               href  http   example com image ico  gt                                                           lt link rel  icon  type  image x-icon      Yes    Yes       Yes      9      Yes     Yes         href  http   example com image ico  gt                                                           lt link rel  icon                          Yes    Yes       Yes      11     Yes     Yes         href  http   example com image ico  gt                                                           lt link rel  icon  type  image gif         Yes    Yes       Yes      11     Yes     Yes         href  http   example com image gif  gt                                                           lt link rel  icon  type  image png         Yes    Yes       Yes      11     Yes     Yes         href  http   example com image png  gt                                                           lt link rel  icon  type  image svg xml     Yes    Yes       Yes      Yes    Yes     Yes         href  http   example com image svg  gt                                                           File format support  The following table illustrates the image file format support for the favicon                                            Animated                                   Browser             ICO   PNG    GIF    GIF s   JPEG   APNG   SVG     ------------------- ----- ------ ------ ------- ------ ------ ------    Edge                Yes   Yes    Yes    No                             Firefox             1 0   1 0    1 0    Yes     Yes    3 0    41 0     Google Chrome       Yes   Yes    4      No      4      No     No       Internet Explorer   5 0   11 0   11 0   No      No     No     No       Safari              Yes   4      4      No      4      No     No       Opera               7 0   7 0    7 0    7 0     7 0    9 5    44 0       Browser Implementation  The table below illustrates the different areas of the browser where favicon s are displayed                         Address     Address bar  Links                        Drag to     Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop    ------------------- ------------ ----------- --------- ----------- ------ ---------    Edge                No            Yes         Yes       Yes         Yes    Yes         Firefox             until v12     Yes         Yes       Yes         Yes    Yes         Google Chrome       No            No          Yes       Yes         1 0    No          Internet Explorer   7 0           No          5 0       5 0         7 0    5 0         Safari              Yes           Yes         No        Yes         12     No          Opera               v7   12  Yes    No          7 0       7 0         7 0    7 0                              gt  v14  No                                                         Icon files can be 16  16  32  32  48  48  or 64  64 pixels in size  and 8-bit  24-bit  or 32-bit in color depth   While the information above is generally correct  there are some variations exceptions in certain situations        See the full article at the source on Wikipedia      Update    more info     See Google s  new   2019  criteria to Define a favicon to show in search results  You can retrieve  programmatically or manually  Google s cached favicon for any domain with a URL such as  https   www google com s2 favicons domain stackoverflow com  Using the above URL directly in an  lt img gt  tag returns        I ve used realfavicongenerator net a couple times  it s very thorough  generating customizing every possible favicon variation you might need for maximum compatibility    However  if you re seeking a single favicon image  this is might not be the tool for you    For simple file conversion  eg   PNG to ICO  etc  I like onlineconvertfree com

User · Answer

Try to use the  lt link rel  icon  type  image ico  href  images favi ico   gt

User · Answer

lt link rel  shortcut icon  type  image ico  href   favicon ico   gt   lt link rel  shortcut icon  type  image ico  href  http   example com favicon ico   gt   lt link rel  shortcut icon  type  image png  href   favicon png   gt   lt link rel  shortcut icon  type  image png  href  http   example com favicon png   gt

User · Answer

I used convert -resize 16x16 img png favicon ico  on linux konsole  to convert my image  and  add  lt link rel  icon  href  images favicon ico  type  image png  sizes  16x16  gt  to my header and everything work perfect

User · Answer

as an additional note that may help someone some day   You can not echo anything to the page before   Hello  lt link rel  shortcut icon  type  image ico  href   webico ico   gt   lt link rel  shortcut icon  type  image ico  href   webico ico   gt    will not load ico   lt link rel  shortcut icon  type  image ico  href   webico ico   gt   lt link rel  shortcut icon  type  image ico  href   webico ico   gt  Hello   works fine

[html] Adding a favicon to a static HTML page

Examples related to html

Examples related to static

Examples related to favicon