favicon

How to set favicon.ico properly on vue.js webpack project?

by

Check out the Project Structure of webpack template: https://vuejs-templates.github.io/webpack/structure.html Note that there is a static folder, along with node_modules, src, etc. If you put some image into the static folder, like favicon.png, it will be made available at http://localhost:8080/static/favicon.png Here is the documentation for static assets: https://vuejs-templates.github.io/webpack/static.html For your favicon issue, you can put a … Read more

Favicon Standard – 2023 – svg, ico, png and dimensions? [duplicate]

by

Disclaimer: I’m the author of RealFaviconGenerator, which I expect to be up-to-date (mostly, see below). So don’t be surprised if this answer matches what RFG generates. The one-size-fits-all myth There is no “one size fits all” icon. You can’t create a single SVG icon and expect it to work everywhere. From a technical point of … Read more

Does a favicon have to be 32×32 or 16×16?

by

Update for 2020: Sticking to the original question of 16×16 versus 32×32 icons: the current recommendation should be to provide a 32×32 icon, skipping 16×16 entirely. All current browsers and devices support 32×32 icons. The icon will routinely be upscaled to as much as 192×192 depending on the environment (assuming there are no larger sizes … Read more

How to set-up a favicon?

by

With the introduction of (i|android|windows)phones, things have changed, and to get a correct and complete solution that works on any device is really time-consuming. You can have a peek at https://realfavicongenerator.net/favicon_compatibility or http://caniuse.com/#search=favicon to get an idea on the best way to get something that works on any device. You should have a look at … Read more

HTML 5 Favicon – Support?

by

The answers provided (at the time of this post) are link only answers so I thought I would summarize the links into an answer and what I will be using. When working to create Cross Browser Favicons (including touch icons) there are several things to consider. The first (of course) is Internet Explorer. IE does … Read more

local (file://) website favicon works in Firefox, not in Chrome or Safari- why?

by

You can use Base64 data of an image. Put something like this: <link href=”data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD9/f0F/Pz8DP///wD///8P////Dv///xL///8P////A////wD///8A/v7+Cf///wX///8A////APv7+wr9/f0D+/v7Dv///wb///81+vv8i/v7/Iv3+PqL4+nxi+ru9JHy9Piu5+zzru3w9ZD+/v5x/v7+H////wr///8A9/f3H/7+/g7///8J////HNDX5Pyaq8j/m6zJ/5esy/+QpcX/larK/5uwzv+MoMH/mqrG/5qlv+7Q0Nty/f3+Af///wD///8A/v7+A////wz+/v6b2d/q/4abvf+Emr7/jKHD/5Gnyf+Uqsz/fpW5/4mXuP/U1OL/e3ui+MPE0l7///8A////AP///wD///8P////Xa680/9/lrr/kafJ/5yy0/+WrM7/nbPT/52uyv+ktM7/1NTi/8LC1f+lpr3n////AP///wD///8A////AP7+/mDo7PL/ytPi/5yv0fehsuXuuMvl0Kq81drS2uf8+/z9bff3+SG5uM1r8vL1ff///wD///8A////AP///wr+/v4H/v7+jufq8umIg/Sut7L9YKul/W7PzvlMnZn03Ozq/x/+/v4H////AP///wD///8A////AP///wD///8A5OH/IpuS/pF3cfPploz/hH5y/6F/dP+gl47/gkw++e7Hwv9Fta//XPj4/gf///8A////AP///wD///8A+vn/BoyB/pGlnf5vfHfxy4mA/JlIOf/lmZD+f1lK/89kWPrPmZD+f9zY/yu3sP5ar6j/ZP///wD///8A6uj/GbSt/l6imv9yVkf/1HBm+MJ5eOrlhX/1s2JY+dRpYPfPv7/zb4+F/41WR//Uloz/hI6E/47///8A////AOro/xmnn/9teW3/qH5y/6HKxf9B9/n7Fc3N9VfMyvlQraj6cbWv/1zj4f4h2tf/Lks7/+NmWP+/0s7/OP///wCvqP9kjoT/jo6E/46Sif+I+vn/Bt3a/ypsX/+5////AH90/6Dj4f4h0Mz/OrWv/1yyq/9gkon/iNzY/yv///8A19P/MvLx/g////8A////APX0/wxvYv6119P/MtzY/ytmWP+/oZj/df///wBQQP/dt7D+Wv///wD///8A////AP///wD///8A////AKyk/2makf9+UUL/283J/z/l4/8f1dH/M////wD///8At7D+Wv39/gH///8A////AP///wD///8A////AP///wDa1/8u2tf/LtrX/y719P8M////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A//8AAOAfAADgBwAA4AMAAPABAADwHwAA8d8AAPAfAADonwAA8CEAAOf5AADGvQAA/bcAAP3/AAD//wAA//8AAA==” rel=”icon” type=”image/x-icon” /> into the <head> section of an html file. Base64 data can be received, for example, by favicon.cc

favicon not working in IE

by

Right you’ve not been that helpful (providing source would be have been really useful!) but here you go… Some things to check: Is the code like this: <link rel=”icon” href=”http://www.example.com/favicon.ico” type=”image/x-icon” /> <link rel=”shortcut icon” href=”http://www.example.com/favicon.ico” type=”image/x-icon” /> Is it in the <head>? Is the image a real ico file? (renaming a bitmap is not … Read more

tech