2 posts tagged

Верстка

Как сделать чёткий 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, возможно в других системах не будет такой красоты и простоты. Вот статья на эту тему.

25 April 2017   Верстка   Сайты

Мое первое творение с использованием JS

С января этого года изучаю вёрстку (не без их помощи) в апреле решил вникнуть в JavaScript. Очень много чего красивого и полезного можно реализовать на нем, но пока у меня получился только калькулятор :)

Идея пришла давно, когда я вручную наполнял сайт и подгонял картинки разных разрешений под нужную ширину. Иногда использовал специальные программы типа FastStone Resizer, иногда смотрел в сети, а самым извращенным способом было открытие этой самой картинки в фотошопе, далее Save for Web и уже в этих полях я ставил нужные значения чтобы указать их в img :)

Возможно все это какой-то бред или я чего-то не знаю, но такие подсчёты регулярно требуются и я решил применить знания на практике. На макет, верстку и написание скрипта ушло пару вечеров. Результат мне нравится, может еще кому это пригодится. В дальнейшем планирую добавлять фичи, как только будут появляться новые познания в JS.

23 April 2017   Dev   JS   Верстка   Дизайн   Калькулятор