Как добавить фавикон на сайт, установить иконку (favicon) через html в браузере, требования к картинке, как скачать иконку с сайта

При разработке веб-сайта большое внимание уделяется уникальности сайта, его позитивному восприятию. Чем красочнее и дружелюбнее город, тем больше он привлекает посетителей. Среди элементов дизайна стоит отметить favicon — инструмент, который делает сайт узнаваемым и запоминающимся.

Назначение опции

Термин «фавикон» или «Favicon» впервые появился в браузере IE5 в 1999 году. Это сочетание двух английских слов «FAVorites» и «ICON». Это небольшой значок, используемый для визуальной идентификации веб-проекта.

Он появляется в начале названия сайта в поисковых системах.

Он также появляется перед адресом в строке поиска и в закладках браузера.

Установка фавикона в заголовке страницы имеет несколько положительных сторон:

1. При поиске информации страница выделяется в поисковой выдаче, привлекая внимание пользователя. На рисунке ниже показаны варианты вывода с favicon и без него.
2. Значок помогает повысить узнаваемость компании. Если пользователь запомнил логотип организации, он будет идентифицировать его и на других страницах.
3. Найти нужную страницу в истории проще, если присутствует значок.

Кроме того, отсутствие иконки может вызвать недоверие посетителей к сайту. Наличие иконки позволяет увеличить трафик на сайт и является необходимым условием для эффективного SEO-продвижения.

Требования к картинке

Традиционно значок создается в виде графического файла в формате ico размером 16×16 пикселей. Этот формат поддерживается всеми браузерами.

Современные версии браузеров также могут читать значки PNG размером 16×16 или 32×32. Если браузер не распознает фавикон, он выдаст ошибку 404. Поэтому рекомендуется использовать оба формата.

При разработке иконки необходимо учесть ряд тонкостей:

1. Используйте логотип сайта или организации в качестве основы для фавикона. Избегайте большого количества мелких элементов на изображении, так как при размере 16×16 они будут «размывать» изображение.
2. Учитывайте направление ресурса. Например, магазин, торгующий рыбой, может использовать в качестве иконки изображение рыбы.
3. Популярным способом создания имиджа является использование первой буквы названия компании. Например, Facebook (F), Google (G) и другие.
4. Если ресурс описывает памятную дату или праздник, отображаются символы этого события.

Икона может быть выполнена различными способами:

• в графическом редакторе, таком как Photoshop или Gimp;
• из готового изображения, обработав его в генераторе favicon, например, Favicon.cc, Favicon.ru, Logaster.ru;
• выбрать из онлайн-каталога, например, findicons.com, thefavicongallery.com, iconj.com.

Как сделать осциллограф из вашего компьютера

Затем перейдите к шагу загрузки фавикона.

Добавление на сайт

Ниже мы рассмотрим 3 способа добавления фавикона на сайт.

Автоматическая установка браузером

Самый простой способ — загрузить иконку. Здесь вы загружаете изображение в корневой каталог сайта. Сделать следующее:

1. Выберите готовый фавикон. Он должен быть в формате ico.
2. Если расширение значка отличается, его следует изменить с помощью конвертера. Например, вы можете использовать онлайн-конвертер convertico. Назовите полученный файл favicon.ico.
3. Ссылка на главную папку сайта с помощью файлового менеджера или FTP-клиента. Эта папка обычно называется public_html или htdocs. Загрузите файл favicon.ico в папку.
4. Очистите кэш браузера и откройте веб-проект с только что установленным favicon. Изображение должно появиться в адресной строке.

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

Указание в коде сайта

Метод заключается в добавлении иконки favicon на страницу с помощью html: в код страницы добавляются строки с адресом и форматом иконки. Используйте следующий алгоритм:

1. Откройте исходный код страницы. Перейдите на хостинг, где размещена страница. Найдите html-страницу в файлах, обычно это index.html.
2. Найдите тег в верхней части.
3. Вставьте код между ними:

.

Здесь «image_URL» — это путь к файлу изображения. «image/x-icon» — это формат файла, в примере приведен случай с расширением ico. Для других представлений эта часть кода будет выглядеть так, как показано на рисунке.

Когда все будет сделано, очистите кэш и снова откройте страницу.

Размещение иконки через WordPress

Существует несколько способов установки фавикона на страницу в WordPress.

Панель управления

Начиная с версии приложения 4.3, иконку сайта можно установить из панели управления. Для этого:

1. Перейдите в меню «Внешний вид» и выберите «Настроить».
2. Затем нажмите на «Свойства сайта».
3. Перейдите в подраздел «Настройки». В самом низу будет опция «Значок сайта». Нажмите кнопку «Выбрать изображение».
4. Появится окно, в которое нужно перетащить файл изображения или указать путь к нему, нажав на кнопку «Выбрать файлы». Размер изображения должен составлять 512×512 пикселей.
5. После того как изображение будет загружено, программа вернется в раздел «Свойства сайта». В подменю «Значок сайта» теперь будет отображаться загруженный значок. Используйте опции «Редактировать изображение» и «Удалить» для редактирования или удаления изображения.
6. После завершения редактирования нажмите «Опубликовать» или «Сохранить».

Подборка продуктов Apple, о которых мало кто знает

Перезагрузите страницу. Фавикон появится на вкладке.

Использование плагина

Этот вариант использует плагин «All In One Favicon» для загрузки иконки. Если он отсутствует в вашей системе, вы можете установить его следующим образом:

1. Перейдите на вкладку «Плагины» и выберите «Добавить новый».
2. Найдите конкретный плагин и, найдя его, установите.
3. После завершения процесса появится кнопка «Активировать». Нажмите.
4. Затем перейдите на вкладку «Настройки» в нижней части панели и нажмите на плагин. Также вы можете перейти на вкладку ‘Plugins’ и в нижней части ‘All In One Favicon’ выбрать опцию ‘Settings’.
5. После этого откроются блоки настроек «Frontend Settings» и «Backend Settings». Там вам нужно будет загрузить свой фавикон. Необходимо быть внимательным и выбрать строку, соответствующую формату изображения. После того как изображение будет загружено в оба блока, подтвердите изменения.

Когда изменения вступят в силу, фавикон будет появляться на вкладке браузера при обновлении страницы.

Корневой каталог и файл header.php

Этот метод аналогичен автоматическому и ручному добавлению изображения в браузер, рассмотренному выше. Если после вставки фавикона в корневой каталог сайта он не появляется, следующим шагом будет редактирование файла header.php в WordPress. Для этого:

1. В консоли в разделе «Внешний вид» найдите опцию «Редактор».
2. В окне редактора нажмите на «заголовок». Откроется файл header.php.
3. Затем найдите тег и вставьте под ним 2 строки: .

Обе линии различают вставки «значок» и «значок ярлыка». Это сделано для обеспечения лучшей совместимости между различными браузерами. Если используется формат PNG, измените favicon.ico на favicon.png. Вы также должны указать ‘image/png’ в параметре type.

Как помечать веб-страницы с помощью Microsoft Edge

Подтвердите изменения, нажав кнопку ‘Обновить файл’. После обновления страницы значок появится на вкладке браузера.

Скачивание фавикона с сайта

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

Использование серверов Яндекс и Google

Вы можете сохранить изображение на своем компьютере или другом устройстве, перейдя по одному из следующих адресов: http://favicon.yandex.net/favicon/адрес_сайта или http://www.google.com/s2/favicons?domain=адрес_сайта.

Вместо «site_address» введите желаемый домен. После подтверждения изображение откроется, и вы сможете сохранить его на своем компьютере. Нажмите на изображение и выберите «Сохранить изображение как…» или нажмите CTRL+S.

Затем нужно указать место сохранения и подтвердить. При загрузке с сервера Google прозрачный фон изображения не сохраняется.

Использование корневой папки

Поскольку на большинстве сайтов фавикон хранится в корневом каталоге, для его получения просто введите в адресную строку следующее:

«website_address/favicon.ico». Например, введите mail.ru/favicon.ico, чтобы увидеть фавикон mail.ru. Откроется логотип сайта. Затем сохраните его, как описано выше.

Поиск в коде страницы

Если оба метода не помогли получить значок, его можно поискать в коде сайта. Начните с того, что откройте его.

Чтобы выполнить быстрый поиск, введите Ctrl+F. Появится окно для ввода поискового запроса. Введите в него слово «favicon».

Будут показаны все строки, содержащие это слово. Найдите среди них те, которые содержат ссылку на расположение favicon, как показано на рисунке.

Затем введите заданный адрес в поле поиска браузера и откройте страницу. Скачайте изображение.

После установки фавикона помните, что поисковые системы обновляют информацию о значке каждые 2-3 недели. Поэтому, если он отображается в названии сайта, но не виден в поиске, подождите, пока пройдет обновление.

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