Example of Hyperlink Cues with Favicons 2
(bigger text, 'full-size' 16x16 favicons)
On this page, the javascript looks for a ul tag with the class of "favilist". Then it goes through every link in that list and looks to see if the href starts with "http:", which would indicate that it's an external link. If so, it grabs the favicon off that domain name and inserts it before each link. If no favicon exists, it uses a locally stored image (
) to indicate the link is external.
A List of Some Articles to Read
A List of Some Articles to Read (no favicon examples)
- some local file (no favicon at all because this is a local file, no http: in the href)
- JD says cropping is for designers, not photographers (because this points to blog.jdgraffam.com instead of www.jdgraffam.com, the favicon is not where the javascript thinks it is, so a generic image should be in its place.)
- http://www.reasonstation.net/ (i did a search for 'this site has no favicon', and this is the only site that showed up. should be no favicon, instead shows a generic img, safari shows nothing)
For sake of demonstration, and to make it easy for you to view source for everything, both CSS and JavaScript are in the head of this document. In real-world implementation, it is best practice to use external files for each when possible.