Welcome Guest! To access all forums & features, please register an account or sign-in. → Why register?



How to get favicon work on both Retina and standard?


4 replies to this topic - - - - -

#1 ACTIONpack

    Graphic Designer

  • 1,660 posts
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8 Pro
  • Phone: HTC Windows 8X

Posted 25 February 2013 - 19:33

I'm trying to get Retina favicon work on high resolution screen like Retina macbook pro and getting the ico showing up on a standard screen. If I put the favicon.ico in there then the high rez will not show up on my Retina macbook pro but if I take out the ico then it does not show up on standard screen.


<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="icon" type="image/png" href="http://www.romabio.com/images/retina-logo.png" />





#2 OP ACTIONpack

    Graphic Designer

  • 1,660 posts
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8 Pro
  • Phone: HTC Windows 8X

Posted 26 February 2013 - 20:29

Got a work around for this. If you want to get a high resolution version on the ICO then add a height and width to the short ico meta tag. Example below!




<link rel="shortcut icon" href="url link" style="height: 128px; width: 128px;" />
<link rel="icon" type="image/png" href="url link" />
<link rel="apple-touch-icon-precomposed" href="url link" />




#3 primexx

    Neowinian ULTRAKILL

  • 12,010 posts
  • Joined: 24-April 05

Posted 26 February 2013 - 22:42

you could also try icons with multiple sizes but i'm not sure if the browsers actually pick the right size

#4 AWKM

    Neowinian Senior

  • 2,668 posts
  • Joined: 28-November 03
  • Location: Canada

Posted 27 February 2013 - 00:24

also
<link rel="apple-touch-icon" href="/whatever.png">


#5 The_Decryptor

    THE ALPHA CEPH!

  • 18,342 posts
  • Joined: 28-September 02
  • Location: Sol System
  • OS: WinLin X 10.9 Ill-tempered Badger

Posted 27 February 2013 - 00:42

Unfortunately you'll have to use an ico file (With at least 16x16 and 32x32), I'm not sure any browser supports the standard method for it currently.

View PostACTIONpack, on 26 February 2013 - 20:29, said:

Got a work around for this. If you want to get a high resolution version on the ICO then add a height and width to the short ico meta tag. Example below!




<link rel="shortcut icon" href="url link" style="height: 128px; width: 128px;" />
<link rel="icon" type="image/png" href="url link" />
<link rel="apple-touch-icon-precomposed" href="url link" />


Does that actually work? In what browser?

If you want to specify a size you use the "sizes" attribute, CSS is meaningless for this.