Jump to content



Photo

How to get favicon work on both Retina and standard?


  • Please log in to reply
4 replies to this topic

#1 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

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

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

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

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • 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 PhilTheThrill

PhilTheThrill

    Neowinian Senior

  • Joined: 28-November 03
  • Location: Canada
  • OS: Win 8.1
  • Phone: WP8

Posted 27 February 2013 - 00:24

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


#5 The_Decryptor

The_Decryptor

    STEAL THE DECLARATION OF INDEPENDENCE

  • Tech Issues Solved: 4
  • Joined: 28-September 02
  • Location: Sol System
  • OS: iSymbian 9.2 SP24.8 Mars Bar

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.

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.



Click here to login or here to register to remove this ad, it's free!