Слово «фавикон» представляет собой сокращение от словосочетания «избранный значок» в переводе с английского языка. Данное название происходит от списка закладок в браузере Internet Explorer под названием «Избранное».

При добавлении сайта в закладки в браузере Explorer начиная от 5-ой версии он обращается к серверу с запросом, имеет ли данный ресурс файл favicon.ico. Если данный файл существует, то использоваться он будет для предоставления значка, который будет отображаться рядом с закладкой. В других браузерах, например, в Mozilla, также имеется поддержка для фавиконок. Этот значок в зависимости от программы для поиска может быть отображен в различных местах, не только в списке закладок. На самом же деле он может там даже не появляться. Отображается он в адресной строке или заголовке вкладки браузера.

Значки на вкладках браузера

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

Как создать фавикон?

Чтобы создать favicon.ico, нужно просто сохранить файл формата PNG с размером 16×16 и преобразовать его в значок с png2ico. На свое усмотрение вы можете добавлять в один и тот же значок различные изображения, чтобы обеспечить альтернативные решения. Большинство современных браузеров использует для такого изображения только формат 16×16. Однако в другом контексте, например, при перетаскивании URL на рабочий стол, может быть отображена большая иконка.  Если в значке ресурса содержится только изображение 16×16, то оно будет автоматически масштабироваться до нужного размера. С технической точки зрения не нужно будет добавлять альтернативные решения. Это может существенно увеличить качество изображения. Прежде, чем установить на сайт фавикон, необходимо посмотреть, как картинка будет выглядеть в разных размерах. Необходимо учитывать, что для пользователя с медленным интернетом фавикон может увеличить время загрузки страниц на несколько секунд. Это будет возможно в том случае, если файл загрузки изображения будет слишком большим, поэтому лучше не усердствовать. Добавления альтернативного формата 32×32 должно быть вполне достаточно для того, чтобы картинка хорошо смотрелась даже в случае с крупными значками. Возможность использования большого количества вариантов является приятным бонусом, который выполняется только при желании разработчиков сайта. Количество цветов лучше стараться поддерживать до 16. 16-цветную иконку можно создать при помощи png2ico. Это позволит создать файл меньшего размера, который будет быстрее загружаться. При создании изображения для добавления в favicon.ico стоит также помнить о том, что иконки могут быть отображены в различном фоновом цвете. По этой причине лучше будет использовать прозрачность, а не сплошной фон. Также необходимо продумать, как более грамотно установить фавикон, чтобы он гармонировал с фоном. Стоит заметить, что можно устанавливать промежуточные значения, измеряемые в процентах. Специалисты говорят о том, что идеальной является настройка, которая включает в себя примерно 30-40% от прозрачности фона. Чтобы сделать индивидуальный значок для сайта можно использовать логотип вашего бренда, любимое изображение или символ тематики ресурса. Рекомендуемым размером для фавикона является 512 пикселей и в высоту, и в ширину. Изображение должно иметь форму квадрата, но также можно использовать и прямоугольные картинки. Некоторые движки позволяют обрезать картинку при добавлении. Поэтому не стоит волноваться о том, как поставить на SMFфавикон в виде большой картинки.

Как создать иконку при помощи Photoshop

Специалисты рекомендуют для создания иконок использовать специализированную программу для редактирования изображений, например, GIMP или AdobePhotoshop. Это дает возможность создать значок с размерами ровно 512×512 пикселей. Это позволяет сохранять точные пропорции изображения, залить фон или использовать прозрачные изображения. Данная картинка может быть в форматах JPEG, PNG, GIF. После этого необходимо определить, как можно установить на сайт фавикон. Зачем необходимо добавлять фавикон на сайт? Как уже отмечалось ранее, иконка favicon представляет собой небольшой значок, который появляется в браузере рядом с названием сайта. Он дает возможность пользователям идентифицировать ссылку. Те посетители вашего сайта, которые заходят на него часто, смогут моментально определять это небольшое изображение. Это повысит узнаваемость бренда и поможет завоевать доверие среди пользовательской аудитории. Можно сказать, что фавикон определяет личность вашего сайта. Также он улучшает пользовательский опыт и юзабилити.

Как можно установить фавикон в html

Чтобы добавить фавикон на веб-страницу, необходимо установить его на сервер в той же папке, где расположена веб-страница. Это та информация, которую любой браузер в первую очередь будет искать для загрузки. Если он не обнаружит иконку, то проверит каталог верхнего уровня сервера. Если вы установите его там, то по умолчанию для всех страниц вашего домена будет отображаться один значок. В зависимости от типа браузера и его конфигурации, фавикон не всегда будет отображаться, даже в том случае, если он находится в одном из указанных мест. Чтобы прописать наличие фавикона в коде страницы, необходимо добавить две следующих строки в разделе <Head>:

<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

Как добавить фавикон в блог WordPress

Если вы задаетесь вопросом, как можно установить фавикон в «Директ», то здесь нет ничего особо сложного. Данный интерфейс имеет соответствующие пункты меню, которые дают возможность выбирать и загружать картинки. Начиная с WordPress 4.3 можно добавлять faviconна сайт из области администратора. Для этого необходимо просто перейти в «Вид»/»Настройки» и выбрать вкладку «Сайт». Используя раздел идентификатора сайта в настройщике, можно поменять название ресурса и его описание. Перед выходом из меню появится вопрос, хотите ли вы, чтобы новые данные отображались в заголовке. Также данное меню позволяет загрузить значок для сайта. Нужно просто нажать на кнопку «Выберите файл» и загрузить изображение, которое вы собираетесь использовать в качестве фавикона.

Как добавить фавикон на блог

Дальнейшая инструкция по установке фавикона будет выглядеть следующим образом. Если изображение, которое вы хотите загрузить, превышает рекомендуемый размер, то WordPress дает возможность обрезать его. Если файл не соответствует рекомендованным параметрам, вы можете сохранить внесенные изменения. Необходимо отметить, что инструкция по установке фавикона на сайт Joomlaбудет выглядеть примерно так же. После этого при просмотре содержимого сайта вы сможете увидеть faviconв действии. Также вы можете зайти на сайт при использовании мобильного устройства и выбрать в меню браузера пункт «Загрузить полную версию». Вы сможете заметить, что иконка в данном случае будет отображаться как на полноценном рабочем столе персонального компьютера.

Устанавливаем фавикон в старых версиях WordPress (ниже 4.2)

Прежде всего, необходимо загрузить свой фавикон в корневой каталог сайта по протоколу FTP. После этого вы можете самостоятельно вставить данный код в файл header.phpнужной темы.

<link rel=”icon” href=”http://www.example.com/favicon.png” type =”image/x-icon”>

<linkrel=”shortcuticon” href=” http://www.example. com/favicon.png ” type=”image/x-icon”>

Теперь осталось только заменить wpbeginner.comна URL вашего сайта, и можно считать дело сделанным. Если в блоге нет файл header.php и вы не можете его найти, то необходимо использовать специальный плагин. Установить и активировать его необходимо в настройках сайта. После того, как плагин будет активирован, нужно зайти в «Настройки», найти пункт «Вставка колонтитулов» и перейти ко вкладке «Вставка кода». Здесь необходимо внести приведенные выше изменения и сохранить настройки. Если вы не хотите разбираться с тонкостями настройки FTP, но все же интересуетесь установкой фавикона, то можете попробовать использовать специальный плагин, который осуществляет регулировку загрузки иконки на всех этапах. Такие дополнения к движку будут доступны не только для WordPress, но и для других систем, например, Joomla.