Как сделать чёткий favicon

Совсем недавно обнаружил оптимальный для себя вариант создания фавиконки. Обычно используют различные сервисы, которые минимизируют картинку или просто сжимают в фотошопе до размера 16х16 пикселей. Но картинка все равно получается так себе, и к тому же этот способ сложнее моего.

Я просто обрезаю картинку до 300х300 пикселей. Либо создаю новую с таким размером, а затем сохраняю в формате .png. Можно сделать 100х100, навряд ли это как повлияет на ситуацию. Для IE нужно сохранить favicon в формате .ico. Далее кидаем в корневую папку с сайтом и пишем в head’e:

<link rel="shortcut icon" href="favicon.png">

Фавикон супер-чёткий, работает как на mac, так и на win:

В добавок ко всему, пользователей iOS и macOS ждет приятный бонус:

Красивая полноразмерная фавиконка отображается в Сафари, без использования всяких тегов типа:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

Именно этот тип favicon, я проверял только в iOS, возможно в других системах не будет такой красоты и простоты. Вот статья на эту тему.

Share
Send
Pin
25 April 2017   Верстка   Сайты
Popular