Где прописывается favicon. Ресурсы для создания фавиконок

Facebook

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

Что такое favicon

Favicon (или фавиконка ) - это специальный значок, который используется для отображения в некоторых элементах браузера. Каждый отдельный веб-ресурс имеет (или должен иметь) свою отдельную фавиконку, которую, к примеру, можно увидеть рядом с адресом сайта в названии вкладки браузера, в поисковой выдаче и в списке избранных сайтов. Именно из-за подобного использования в качестве символа для закладки и родилось название этого значка - FAVourite ICON, то есть иконка для избранного, так как изначально фавиконка использовалась только для этого.
В настоящее время фавиконка - это, во-первых, мини-символ сайта, который повышает узнаваемость ресурса; во-вторых, ее наличие положительно влияет на положение сайта в поисковой выдаче.

Как создать favicon

Если говорить о технических характеристиках, то стандартный размер для фавиконки - 16 х 16 пикселей; также возможно использование изображения размером 32 x 32 пикселя и совсем редко 48 х 48. Изначальный формат этого знака - ico, однако сейчас последние версии браузеров поддерживают также вывод фавиконок в форматах png, gif и jpeg. Набирает популярность и еще один вид фавиконки - анимированная (или динамическая). В этом случае это будет не статическая картинка, а меняющийся файл в формате gif. При выборе подобного формата имейте в виду, что на данный момент его вывод поддерживается только двумя браузерами: Firefox и Opera, а остальные браузеры будут показывать лишь первый кадр.

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

Для создания favicon подойдет любая графическая программа, в том числе и Paint: все, что вам нужно сделать, это изменить размеры изображения на 16 х 16 (или 32 х 32) пикселей и сохранить в одном из перечисленных выше форматов.

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

Ресурсы для создания фавиконок:

http://www.xiconeditor.com/ - вы можете загрузить изображение и затем отредактировать его или нарисовать favicon с нуля, множество настроек позволят вам воплотить в жизнь любые творческие желания;
http://www.favicon.cc/ - более простой редактор для создания фавиконок, на этом ресурсе вы также найдете коллекцию различных значков, которые можно отсортировать по тегам или названию;
http://antifavicon.com/ - редактор для тех, кто хочет вместо картинки использовать favicon в виде отдельных букв или слов.

Для того, чтобы получить изображение в формате ico, вам нужно просто сохранить файл с названием favicon.ico - можно сразу присвоить это расширение файлу при сохранении либо переименовать файл после.

Как загрузить favicon на сайт

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

Если вы хотите разместить favicon.ico в какой-либо другой папке, вам следует прописать путь к этому файлу внутри контейнера :

Тип (type) прописывать необязательно, но в дальнейшем эта информация понадобится для настройки кэширования.

Если вы используете CMS Wordpress:
вы можете сделать так, как написано выше, либо использовать специальный плагин Favicon by RealFaviconGenerator. Еще обратите внимание на официальную документацию Wordpress, касающуюся favicon: https://codex.wordpress.org/Creating_a_Favicon

Если вы используете CMS Joomla:
вам нужно загрузить файл в директорию /joomla/templates/<ваш шаблон>. Официальную документацию вы можете найти в этом разделе: https://docs.joomla.org/Changing_the_site_favicon

Как оптимизировать favicon

Используйте кэширование - пропишите в файле.htaccess соответствующую строку:

ExpiresByType image/x-icon "access 1 year"

Не забудьте про Nginx: проверьте, что тип файла ico включен в перечисление в файле конфигурации веб-сервера:

Location ~* \.(jpg|jpeg|gif|ico|png)$ { expires 365d; }

Как добавить favicon для портативных устройств

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

Выбор фавиконки для Android-устройства зависит от показателя PPI (pixels per inch - пикселей на дюйм); это важно учитывать, так как из-за этого одно и то же изображение может выглядеть по-разному на экранах с различным параметром PPI. Общая таблица с указанием коэффициента плотности и соответствующего ему размера фавиконки выглядит следующим образом:

Что касается формата, то изображения должны быть в формате png.

В отличие от Android, размер иконок для iOS-устройств зависит от наличия Retina и версии операционной системы. В таблице это выглядит так:

Для того, чтобы создать фавиконку для всех возможных форматов и устройств, вы можете воспользоваться специальным сервисом: https://realfavicongenerator.net/ .

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

Сначала вам нужно выбрать изображение, которое составит основу вашей фавиконки. Оно необязательно должно быть квадратным, но такой формат предпочтителен. В противном случае вы сможете заполнить пустые края изображения каким-либо цветом (для iOS) либо оставить их прозрачными (для Android). Также RealFaviconGenerator создает иконки и для других платформ (Windows 8 и 10).

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

После этого проверьте наличие всех необходимых иконок, введя адрес своего сайта в соответствующую строку на главной странице RealFaviconGenerator.

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

Фавикон - это сокращение от «избранный значок» (в переводе с английского языка). Название происходит от списка закладок в Internet Explorer, который называется «Избранное»/«Список избранного». При добавлении сайта в закладки Explorer (версии 5 и выше) обращается к серверу с запросом, имеет ли ресурс файл favicon.ico. Если такой файл существует, он будет использоваться для предоставления значка, который отображается рядом с закладкой с текстом.

Другие браузеры (например, Mozilla) также имеют поддержку для фавиконок. В зависимости от программы для поиска, этот значок может отображаться в различных местах, не только в списке закладок (на самом деле, он может даже не появляться там). Он отображается в или заголовке вкладки браузера.

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

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

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

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

Чтобы создать favicon.ico, вам необходимо просто сохранить PNG-файл размером 16х16 и преобразовать его в значок ресурса с png2ico. По собственному усмотрению, вы можете добавлять различные изображения в один и тот же значок, чтобы обеспечить альтернативные решения. Большинство браузеров используют только формат 16x16 для такого изображения, но в другом контексте (например, при перетаскивании URL из адресной строки на рабочий стол) большая иконка может быть отображена на рисунке. Если значок ресурса содержит только изображения 16х16, он будет масштабироваться до нужного размера, поэтому технически совершенно не нужно добавлять альтернативные решения. Однако это может повысить качество изображения. Перед тем, как установить фавикон на сайт, обязательно просмотрите, как выглядит картинка в разных размерах.

Имейте в виду, что для пользователя с медленным интернет-соединением фавикон может увеличить время загрузки страницы на несколько секунд. Это возможно, если файл изображения слишком большой, поэтому не переусердствуйте. Добавление альтернативы формата 32х32 должно быть достаточно, чтобы картинка начала хорошо смотреться даже в ситуациях с крупными значками. Использование большего количества вариантов - это бонусы, выполняемые только по желанию разработчика сайта. Старайтесь поддерживать количество цветов до 16 и создавайте 16-цветную иконку с помощью png2ico (или даже черно-белый значок). Это позволит сохранить меньший файл, который загружается быстрее.

При создании изображения для добавления в favicon.ico не стоит забывать и о том, что иконки могут быть отображены на различном фоновом цвете. По этой причине лучше использовать прозрачность, а не сплошной фон. Хорошо подумайте над тем, как установить фавикон наиболее грамотно, чтобы он гармонировал с любым задним планом. Стоит отметить, что можно устанавливать промежуточные значения, которые измеряются в процентах. Специалисты говорят о том, что идеальной является настройка, включающая в себя примерно 30-40% прозрачности фона.

Вы можете использовать логотип вашего бренда, символ тематики ресурса или любимое изображение, чтобы сделать ваш индивидуальный значок сайта. Рекомендуемый размер для фавикона - не менее 512 пикселей в ширину и в высоту. Изображение должно быть квадратным, но можно использовать большие прямоугольные картинки. Многие движки позволят вам обрезать картинку, когда вы будете добавлять ее (поэтому не стоит волноваться о том, как установить фавикон на SMF в виде большой картинки).

Создание иконки с помощью «Фотошопа»

Специалисты рекомендуют использовать например, Adobe Photoshop или GIMP. Это позволит создать значок сайта ровно 512×512 пикселей. Таким образом, вы можете сохранить точные пропорции картинки, использовать прозрачные изображения или залить фон на ваш выбор. Эта картинка может быть в JPEG или GIF. После этого нужно определить, как установить фавикон на сайт.

Зачем нужно добавлять на сайт?

Как уже было отмечено, иконка favicon - это маленький значок, который появляется рядом с названием сайта в браузере. Он помогает пользователям идентифицировать ссылку, а более частые посетители вашего сайта будут моментально определять это маленькое изображение. Это повышает узнаваемость бренда и помогает завоевать доверие среди аудитории. Таким образом, фавикон определяет «личность» вашего сайта. Кроме того, он также улучшает юзабилити и пользовательский опыт сайта.

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

Чтобы добавить ваш новый фавикон на веб-страницу, следует установить его на сервер в ту же папку, где расположена веб-страница (например, www.example.com/foo/favicon.ico для www.example.com/foo/index.html). Это те данные, которые в первую очередь любой браузер будет искать для загрузки. Если он не найдет иконку, то проверит каталог верхнего уровня сервера (www.example.com/favicon.ico для www.example.com на сервере). По этой причине, если вы установите его там, сможете иметь значок по умолчанию для всех страниц вашего домена. В зависимости от браузера и конфигурации, фавикон не всегда отображается, даже если он находится в одном из вышеуказанных мест и веб-страница видит его.

Для того, чтобы прописать в коде страницы наличие фавикона, можно добавить следующие 2 строки в разделе :

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

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

Если же вы задаетесь вопросом, как установить фавикон в "Директе", здесь тоже нет ничего сложного. Интерфейс имеет соответствующие пункты меню, которые позволят вам выбрать и загрузить картинку.

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

Начиная с версии WordPress 4.3 можно добавить favicon на сайт из области администратора. Просто перейдите в «Вид»/«Настройки» и выберите вкладку «Сайт».

Раздел идентификатора сайта в настройщике позволяет изменить название ресурса и описание. Перед выходом из меню обязательно появляется вопрос, действительно ли вы хотите отобразить новые данные в заголовке. Оно также позволяет вам загрузить ваш значок для сайта. Просто нажмите на кнопку «Выберите файл» и загрузите изображение, которое хотите использовать в качестве фавикона.

Добавление фавикона на блог

Дальнейшая инструкция, выглядит следующим образом. Если изображение, которое вы загружаете, превышает рекомендуемый размер, то WordPress позволит вам обрезать его. Если он соответствует рекомендованным параметрам, вы можете просто сохранить изменения. Стоит отметить, что инструкция, как установить фавикон на сайт Joomla, выглядит аналогичным образом.

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

Как установить фавикон на WordPress старой версии (4.2 или ниже)

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

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

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

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

Если не хотите разбираться с тонкостями работы с FTP, но при этом все же интересуетесь, как установить фавикон, также можете использовать специальный плагин, который регулирует загрузку иконки на всех этапах. Такие дополнения к движку доступны не только для WordPress, но и для других популярных систем, в том числе для Joomla.

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

Стандартный способ

Современные браузеры сами ищут favicon, поэтому иногда можно обойтись даже без html-кода. Достаточно загрузить favicon.icoв корень сайта, чтобы она была доступна по адресу https://вашсайт/favicon.ico

Но для надёжности в код сайта можно добавить такой тег (между )

Это – традиционный способ, который отвечает за вывод иконки во вкладке браузера и в результатах поиска Яндекс.

Расширенный favicon

Но возможности иконки сайта сегодня используются в гораздо большем количестве мест:

Генератор favicon

Большую часть можно сделать при помощи всего одного онлайн-генератора иконок — https://realfavicongenerator.net

Минимально допустимое изображение для загрузки – 70×70 пикселей, но если вы хотите задействовать его для всех возможных случаев, то загружайте размером свыше 256×256.

После, вы сможете посмотреть, как будет выглядеть ваш favicon в iOS, Android и плиточном Windows 8, а заодно изменить настройки для каждого случая: задать индивидуальное изображение, изменить цвет фона, масштабировать иконку.

В опциях оставьте всё, как есть: по умолчанию генератор создаст картинки, которые нужно будет поместить именно в корень сайта (обычно на хостингах корнем сайта называются директории /home/, /www/, /public_html/).

Во вкладке «Compression» можно уменьшить вес иконок (сжатие происходит в районе 20-80%, в зависимости от качества).

Нажимаем Generate и получаем на выходе архив, содержимое которого загружаем в уже названное выше место, и код, который вставляем в сайта.

После добавления их на сайт, можно проверить работоспособность тем же сервисом .

Картинка в социальных сетях

Работают по схожему принципу, но главная загвоздка в том, что если вы используете CMS, то можете поискать плагины, которые автоматически будут отдавать к каждой статье её уникальное превью-изображение (если оно есть). А вот если CMS нет, или к ней нет подходящего плагина, то придётся использовать одну картинку-заглушку для всех записей.

WordPress и Facebook (использование превью к записям)

Если используете плагин WordPressSEObyYoast, то достаточно зайти в раздел «Социальные сети» → «Facebook» и активировать пункт «Добавить Open Graph».

Во всех остальных случаях делаем следующее:

Открываем файл header.php вашей темы.
Самый первый тег меняем на
В секции head вставляем код:

$dom = simplexml_load_string(get_the_post_thumbnail());
$src = $dom->attributes()->src;
echo "content="".$src.""";
?>/>

WordPress и ВКонтакте

В functions.phpдобавьте функцию:

function vk_meta() {
if (has_post_thumbnail())
{
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(600,600));
$url = $thumb["0"];
echo "" . "\n";
}
}
add_action("wp_head", "vk_meta");

Общее изображение для всех материалов

Если же такого решения не нашлось, или вы просто не любите добавлять к материалам сайта превью, то выход один: сделать одно изображение на всех.

Чтобы социалки «подцепили» картинку, добавьте в head-секцию следующий код:

Принимаются форматы.jpg и.png.

Заключение

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

И где можно скачать готовые иконки для сайта ico. Надеюсь, вы уже подобрали себе подходящую картинку? Если нет, то в следующей статье я расскажу, с помощью онлайн генераторов. Не пропустите. Сегодня же поговорим о том, как установить favicon на сайт или заменить его, если он вам не нравится. Эта процедура одинакова для любых веб-ресурсов, но я покажу весь процесс установки на примере CMS WordPress.

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

Как установить favicon на WordPress

При установке иконок для сайта возможны три варианта развития событий:

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

Вставляем фавикон на блог из админки

Это самый простой способ. Во многих премиум-шаблонах WordPress есть возможность устанавливать логотипы и иконки. Для этого идем в настройки темы, выбираем нужный файл на компьютере и жмем “Загрузить “. Сохраняем изменения и любуемся результатом. В моей теме можно загружать картинки в формате png или gif размером 16х16.

Установка favicon на сайт без плагина

Допустим, что у нас уже есть готовый фавикон. Это может быть картинка с любым названием в форматах GIF, JPEG, PNG или BMP. Однако напомню, что лучше всего, если это будет файл изображения в формате.ICO с размером 16×16 пикселей favicon.ico . Переименуйте, если у вас не так.

Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt). Как заливать файлы на хостинг с помощью FTP-клиента FileZilla, читаем .

В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами надо прописать такой код:

В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href . Если картинка не в формате.ico, то укажите это в атрибуте type , заменив x-icon на нужный формат.

Многие советуют вставлять обе строки, но я считаю это лишним и советую прописывать только верхнюю строчку. Поясню, для Internet Explorer пишем значение “shortcut icon “, остальные браузеры понимают “icon “, которое уже входит в это значение.

Как прописать код favicon для WordPress :

Идем в админку “Внешний вид ” – “Редактор “.
Открываем файл header.php.
Вставляем код до закрывающего тега .
Жмем “Обновить файл “.

Как поменять иконку сайта

Если на сайте уже установлен favicon, но вы хотите заменить его другим, то просто открываем по FTP корневую папку блога и меняем существующий файл на новый с таким же названием и форматом.

Если картинка расположена в другом месте, то делаем следующее:

Открываем в браузере код страницы сайта (Ctrl+U).
Ищем строку, где прописан адрес фавикона.
Заменяем файл по указанному адресу.

Почему не отображается favicon

Если favicon не отображается в браузере после установки или замены, надо:

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

В поисковой выдаче Яндекса favicon появится только после того, как сайт посетит специальный робот. После этого фавиконка преобразуется в формат PNG и добавляется на сервер Яндекса по адресу http://favicon.yandex.. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.

Easy Favicons – Wordpress плагин для установки фавикона

Считаю, что использовать плагин для установки favicon на WordPress, это лишнее. Тем не менее, такая возможность для особо ленивых есть. Существует много подобных плагинов, но я покажу один, которым сам когда-то пользовался. Он называется Easy Favicons . Скачать его можно по .

Устанавливаем и активируем плагин (). Открываем в админке страницу с настройками.

Как видно выше, есть возможность установить фавикон тремя способами:

использовать свой Gravatar;
указать путь к картинке;
выбрать иконку для сайта из установленного набора.

Вот и все дела. Теперь, надеюсь, понятно, как установить фавикон на сайт. Какой бы способ вы не выбрали, помните, что любой популярный сайт должен иметь свою узнаваемую иконку. Кроме того, ее можно периодически обновлять. Например, во время каких-то интересных событий или праздников. Представьте, если под Новый год человеку в поиске попадется ваш блог с картинкой Деда Мороза. Это может лишний раз привлечь внимание пользователя и заставить его выбрать именно ваш ресурс.

Ну вот, хотел покороче, получилось, как всегда. А как вы установили favicon на свой сайт?

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

Что такое фавикон и для чего он нужен?

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

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

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

Теперь, когда мы разобрались и решил, что нам нужен фавикон, нам нужно его создать. Фавикон это картинка в формате ICO. Не буду вам расписывать, что это за формат. Фавикон так же допускается в формате GIF и PNG, но не все браузеры поддерживают фавикон в таких форматах, поэтому мы будем создавать картинку в понятном всем формате ICO.

Картинка должна быть размером 16х16 пикселей. Создавать мы ее будем в фотошопе. Создать картинку можно в любом другом графическом редакторе, это не имеет значение, потому как созданную картинку мы все равно потом будем переделывать в формат ICO, потому что фотошоп не поддерживает этот формат.

Создаем новый файл размером 16х16 и вставляем туда картинку. Картинка должна быть простой и с четкими контурами, чтобы было понятно, что там изображено в маленьком виде. Сохраняем файл в формате PNG.

Теперь нам нужно конвертировать картинку в формат ICO. Делать мы это будем с помощью онлайн сервиса favicon.ru. Заходим на него и на главной странице нажимаем на кнопку «Выберите файл».

Выбираем на компьютере, созданную нами картинку, ждем пару секунд, нажимаем кнопку «далее» и смотрим, что у нас получилось. Здесь можно немного подправить, если что-то не нравиться, сделать какие-то участки прозрачными и если вас все устраивает, нажимаем на кнопку «скачать favicon» -«скачать».

Минус данного сервиса, что он прозрачный фон заливает черным цветом. На всякий случай вот вам еще один сервис http://tools.dynamicdrive.com/favicon/. Тут тоже все просто. Выбираете файл, нажимаете на кнопку «Create Icon» и через пару секунд нажимаете «Download FavIcon». Но тут редактировать нельзя, зато прозрачный фон остается прозрачным.

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

Как установить фавикон на сайт?

Теперь, когда у нас есть файл, его нужно закачать к нам на сайт. Проверяем, на всякий случай, чтобы имя файла было «favicon.ico». Заходим к себе на сервер и закачиваем файл в корень сайта. Закачивать необязательно в корень, но в коде мы будем указывать ссылку на корень сайта.

Теперь нужно вставить вот этот код.

Вставлять его нужно между тегами . Покажу вам на примере всеми излюбленного worpdress. В файле header.php ищем (ctrl+f) тег и сразу после него вставляем код, как показано на картинке ниже.

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