What is the best practice or best way to display Fav Icon’s. Minimum design? PNG? Gif? Just wanted to get some feedback on what you guys have done that got you the best results.
Sean
Here is my public share link: LINK
(how to access public share link)
It’s a question I often ask myself (: Since I work with Webflow I generate a .ico file and feed the dashboard.
If you want to do more, be sure you have these files:
ICO favicon.ico (32x32)
PNG favicon.png (96x96)
Tile Icon tileicon.png (144x144)
Apple Touch Icon apple-touch-icon-precomposed.png (152x152)
You also have generators like this one: http://realfavicongenerator.net/
They output even more details favicons:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<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="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
That post explains most of it: GitHub - audreyfeldroy/favicon-cheat-sheet: Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)
Now there’s also the new Safari favicons for pinned tabs. WF doesn’t support it yet.
Pinned sites allow your users to keep their favorite websites open, running, and easily accessible.
You can set the pinned tab icon for your site by providing a vector image. Use an SVG image with a transparent background and 100% black for all vectors. Add the following markup to all your pinnable webpages, replacing “website_icon” with your own file’s name:
<link rel="mask-icon" href="website_icon.svg" color="red">
In the example, the color attribute sets the display color of the image. That attribute can specify a single color with a hexadecimal value (#990000), an RGB value (rgb(153, 0, 0)), or a recognized color-keyword, such as: red, lime, or navy.
So @Vincent you are adding the basic pieces to the Webflow dashboard?
Are you still using SVGs for icons inside your site? I’ve used font icons (font awesome) occasionally those are blocked by firewalls when fonts aren’t so I’ve been using PNGs at 2X the size but even though they load quickly, if you use a source like gtmetrix it says the icon width/height need set and the PNG measurements could be reduced.
I have a client hung up on this so I’m looking for a best practice that works with Webflow.
Actually no, I was saying that I’ve been lazier than that and only rely on what Webflow asks: the favicon and the web app icon. But now that I did this research, I may consider it.
Yes, I use SVG for icons, more than ever. And I strongly count on both Webflow, icons makers and icons management softwares to use them even more in the future. What could be done?
<i> element too, and allow us to chose icons in an icon stock and have a lot of control over it.Webalys sells iconpacks I’m working with for years now, they’re my go-to in terms of icons. I strongly recommend them, the quality and variety is incredible. They also do http://fontastic.me/ wich lets you build iconfonts from their collection and use their cloud so you don’t have to push your font files for every modification you make. But I stopped using icon fonts entirely. It’s only convenient to change colors, but apart of that it’s a complex system.
Iconjar is open source, it can gather your icons but also your much more complex vectors:
http://vincent.polenordstudio.fr/snap/Screen_Shot_2015-11-25_at_09.36.07.png
I use PNG for sensible icons that have to be pixel perfect, like the ones in a menu bar for example. Everything that is “UI”, I have a special attention to it.
Sorry for the late reply. Thanks for the information. As I’ve started to use SVGs one issue I’ve ran into is them stretching height wise in some instances…on older android devices that are still being used and on some newish Kindles.
Is there something specific that I can do to keep that from happening? I got it corrected on my own site but I think it’s only because I have an image wrapped by an absolute position box.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.