Как добавить иконку «Фавикон» или «Избранное»

Вы когда-нибудь замечали маленький значок, который отображается в ваших закладках и на вкладках некоторых веб-браузеров? Это называется иконка избранного или значок избранного.

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

Создание Фавикон

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

Мы предпочитаем работать с маленьким размером напрямую, так как тогда будет гораздо понятнее, как будет выглядеть изображение в конце. Вы можете увеличить масштаб вашей графической программы и создать изображение. Это будет выглядеть блочно, когда уменьшено, но это нормально, потому что это не будет так очевидно, когда оно не уменьшено.

Вы можете сохранить изображение как нужный тип файла изображения, но многие генераторы значков (обсуждаемые ниже) могут поддерживать только файлы GIF или BMP. Кроме того, в файлах GIF используются плоские цвета, и они часто отображаются лучше на небольшом пространстве, чем фотографии в формате JPG.

Преобразование вашего изображения Favicon в иконку

Как только у вас появится приемлемое изображение, вам необходимо преобразовать его в формат значков (.ICO).

Если вы хотите быстро создать свою иконку, вы можете использовать онлайн-генератор Favicon, такой как FaviconGenerator.com. У этих генераторов не так много функций, как у программного обеспечения для генерации иконок, но они быстры и могут за несколько секунд получить вам значок.

Favicons как изображения PNG и другие форматы

Все больше браузеров поддерживают не только файлы ICO в виде значков. Прямо сейчас вы можете использовать значок в таких форматах, как PNG, GIF, анимированные GIF, JPG, APNG и даже SVG (только в Opera). Во многих браузерах существуют проблемы с поддержкой большинства этих типов, а Internet Explorer поддерживает только .ICO. Так что если вам нужен ваш значок для отображения в IE, вам следует придерживаться ICO.

Публикация иконы

Это просто опубликовать значок, просто загрузите его в корневой каталог вашего сайта.

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

Ссылка на основную публикацию