Фавикон для сайта

По умолчанию все браузеры ищут фавикон в корне сайта, но ничего не случиться, если мы поместим фавикон в папку с картинками и укажем пути в хедере сайта. Удобнее всего создавать фавиконки в онлайн-генераторах. Сервис сам создаст оптимальные размеры и выдаст сгенерированный код.

1) Создать фавикон

Нужно подготовить картинку в любом из форматов (PNG, JPG, SVG), размером 260x260 пикселей. Как правило, при верстке сайта по готовому макету, дизайнер предоставляет уже готовую картинку для favicon. В остальных случаях можно самим нарисовать в фотошопе или скачать подходящее изображение, например здесь.

2) Добавить картинку в генератор и настроить

После генерации нас перекинет на страницу настроек. Настраиваем фавикон для iOS - выбираем второй пункт и задаем нужный цвет фона.

Делаем настройки под Android. Так же даем цвет фона и прописываем название проекта.

Остальные настройки можно оставить по умолчанию. Favicon генератор в качестве результата выдаст HTML код и архив для скачивания.

3) Установка фавикон на сайт

Скопированный HTML код вставляем в проект, между тегами head.

Скачиваем архив с автоматически сгенерированными фавиконками и распаковываем его в нужную папку. Затем меняем в коде пути к картинкам и к манифесту.

4) Проверяем

Открываем наш сайт и видим, что в адресной строке появился фавикон. Теперь браузер не будет тратить драгоценное время для поиска фавиконки, поскольку вы указали, где находятся фавиконки на вашем сайте.

Не стоит сильно заморачиваться с созданием фавиконок, делая размеры под все существующие устройства. Данный генератор предлагает нам оптимальный набор фавиконок, подходящих под большинство браузеров, в том числе и под мобильные устройства на Apple.

У меня часто спрашивают: "Что лучше изучать после освоения HTML и CSS для дальнейшей карьеры верстальщика?" Отвечаю: Нужно учить язык программирования JavaScript. По сегодняшним меркам это минимальная связка для того, чтобы стать полноценным верстальщиком. От себя могу порекомендовать мой видеокурс по JavaScript