Сегодня мы затронем очень интересную тему. При работе над вашим сайтом, у вас рано или поздно возникнет необходимость в создании фавикона. Говоря простым языком, фавикон - это значок вашего сайта, который отображается на вкладке в браузере. Также, его можно увидеть в области быстрого доступа браузера, если ваш сайт был добавлен в "Избранное".
Фавиконы самых популярных сайтов
Думаю, нет смысла говорить о том, что фавикон должен быть хорошего качества, ведь он является в какой-то мере лицом вашего сайта. В данной статье мы научимся создавать удовлетворяющие нашим потребностям фавиконы, а также познакомимся с сервисом для их конвертации. Подробнее читайте ниже.
Видеоверсия:
Каким должен быть фавикон
Прежде чем приступать к созданию самого фавикона, было бы неплохо остановиться на том, какими они должны быть в идеале. Итак, идеальный фавикон:
- Является четким и понятным
- Сделан в хорошем качестве
- Передает смысл вашего сайта
- Имеет общую стилистику с вашим сайтом
- Выделяется на фоне значков других сайтов
Вышеперечисленные параметры можно отнести к идеальному фавикону. И нам необходимо создать именно такой значок для нашего сайта. Однако, существуют споры о том, что именно должно быть изображено на фавиконе. Я считаю, что в этом вопросе нужно исходить из общей стилистики и тематики вашего сайта. На нем может быть изображена какая-нибудь картинка или текст. В случае размещения на фавиконе текста, он должен состоять не более чем из 2-х букв. Иначе, никто не сможет разобрать подобный текст, ведь размеры фавикона в основном составляют 16*16 пикселей.
Каких размеров бывают значки сайтов
Как Вы знаете, сейчас существует огромное множество браузеров, мониторов и устройств. И их требования к размерам фавиконов отличаются. Существуют следующие варианты размеров, которые следует учесть:
- 16*16px - стандартные размеры фавиконов, подходящие для большинства браузеров и устройств
- 32*32px - используются в некоторых случаях в Internet Explorer и Safari
- 57*57px - используются при отображении на iPhone
- 72*72px - используются при отображении на iPad
- 114*114px - используются при отображении на ретина дисплеях (57*2=114)
- 144*144px - используются при отображении на ретина дисплеях iPad (72*2=144)
Какого формата должны быть фавиконы
Раньше браузеры воспринимали фавиконы только в формате "ico" . Сейчас они научились понимать и другие форматы, в том числе и "png" . В нашем случае, мы убьем 2-х зайцев одним выстрелом. Вначале мы создадим фавикон в формате "png" , а затем сконвертируем его в "ico" .
Несколько способов создания фавиконов
На сегодня существует два основных способа создания фавиконов:
- Через специальные онлайн сервисы
- Создание самостоятельно через специальные программы типа Photoshop и Adobe Illustrator
Каждый способ имеет свои особенности. Преимущество создания фавикона через онлайн сервисы состоит в том, что Вам не нужно для этого обладать какими-то специальными навыками. Вы просто загружаете необходимое изображение, дорабатываете его и скачиваете готовый фавикон. Либо просто работаете с текстом и рисуете значок инструментами онлайн сервиса. В общем, главный плюс данного метода заключается в простоте. Однако, обратная сторона медали заключается в том, что качество таких значков для сайтов оставляет желать лучшего. Уникальный фавикон вы не получите по той простой причине, что галерея значков онлайн сервисов не является безграничной. А при использовании собственных изображений, при помощи инструментов сервиса не так-то просто создать качественный продукт. В случае рисования значка вручную через инструменты онлайн сервиса получается "нечто невообразимое".
Поэтому, мы выбираем второе, более сложное но удачное решение. Для создания фавикона мы воспользуемся программой Photoshop . Если вы не имеете опыта работы с этой программой, то ничего страшного. Следуя моим инструкциям вы легко справитесь с поставленной задачей.
Создаем фавикон
Как я уже упоминал, фавикон можно создать при помощи изображения или просто букв. В нашем случае я буду использовать какую-нибудь картинку. Например, давайте представим что у нас сайт автомобильной тематики. Следовательно, нам нужно найти изображение из области авто. Я предлагаю сделать значок нашего сайта в виде колеса.
Подбираем изображение
Брать изображения Вы можете откуда угодно. Например, через тот же яндекс картинки . Главное условие - чтобы изображение было простое, без теней и объемов. Это связано с тем, что при ее уменьшении до размеров в 16 пикселей она не будет обладать большой детализацией. Из-за лишних объемов и теней картинка может смазаться.
Я нахожу подходящее изображение при помощи поиска google по запросу "колесо". Мне лишь остается ее сохранить кликнув правой кнопкой мыши и выбрав функцию "Сохранить картинку как".
Подходящее изображение в google images
Далее, мы открываем это изображение при помощи Photoshop . Очень важно, чтобы фавикон был с прозрачным фоном. В нашем случае это не так. Для удаления заднего фона мы используем инструмент "Волшебная палочка". Суть ее работы очень проста. С помощью этого инструмента мы можем выделять области на изображении одного и того же цвета. Так как фон нашего изображения четко контрастирует с самим колесом, сделать это будет очень легко. Кликнув один раз мы выделяем одноцветную область. Нажав сочетание клавиш CTRL+Delete мы удаляем эту область.
Удаляем фон нашего колеса
Делаем это со всеми частями фона изображения. Таким образом, на нашей картинке колесо находится на прозрачном фоне, что и требовалось сделать. Итак, заготовка для значка нашего сайта готова.
Создаем фавикон в 2-х разных размерах
Я предлагаю сделать 2 фавикона размерами 64px и 16px. Для начала нам нужно создать значок большего размера (64px). Для этого мы нажимаем сочетание клавиш CTRL+N . В появившемся окне мы выбираем высоту и ширину изображения в 64px.
Задаем размеры будущего фавикона
Далее, нам необходимо перенести наше колесо в область только что созданного изображения. Для этого мы возвращаемся на картинку с колесом и выбираем инструмент "Перемещение". Следующим шагом мы кликаем по изображению колеса и при зажатой левой кнопке мыши перемещаем ее в область нового изображения. Убедитесь, чтобы при перемещении был выделен слой с колесом. В противном случае перенос не удастся.
Переносим колесо в новое изображение
После перемещения колеса в новое изображение мы видим что они не подходят по размеру. Нам нужно уменьшит колесо до размеров в 64 px. Для этого мы зажимаем клавишу SHIFT и кликнув по диагональной точке изображения уменьшаем ее. Вот мы и создали первый фавикон для нашего сайта. Напоминаю что он у нас размером 64*64px. Теперь нам остается сохранить ее выбрав функцию "Сохранить для веб" во вкладке "Файл". Мы выбираем формат PNG-24 и папку images . Сам фавикон называем также, только латинскими буквами - "favicon" .
Сохраняем фавикон
Отлично. Теперь нам остается создать фавикон меньшего размера. Для этого мы кликаем по вкладке "Изображение" и выбираем функцию "Размер изображения". Здесь мы задаем ширину и высоту в 16px. Теперь нам остается сохранить данное изображение для веб. Ее мы можем назвать "favicon-2".
Итак, вот мы и создали 2 фавикона для нашего сайта в формате "png" . Мы создали сначала вариант с размером в 64px для того, чтобы потом легко уменьшить ее до размеров в 16px. Если вначале создать вариант с 16px, то увеличить ее до 64px без потери качества не получится. Поэтому, имейте это ввиду чтобы не делать двойную работу.
Устанавливаем фавикон на сайт
Для установки фавикона на сайт внутри тега мы прописываем:
В случае, если у нас фавикон в формате "ico" то мы вместо "png" прописываем "ico" . Например:
Как видите, значок сайта отображается как мы и задумывали.
Конвертируем значок для сайта в формат "ico"
Современные браузеры без проблем могут распознавать и отображать фавиконы в формате "png"
. Однако, у Вас может возникнуть необходимость конвертировать ее в формат "ico"
. Одним из преимуществ данного формата является хранение фавиконов всех размеров в одном файле. Согласитесь, что это очень удобно. Итак, для конвертации наших значков мы воспользуемся классным сервисом - xiconeditor.com . Работать с ним очень просто. Все происходит 4 шага:
1. Для начала нам нужно загрузить наши фавиконы. Для этого мы кликаем по кнопке "Import"
.
Загрузка фавиконов в сервисе xiconeditor.com
3. При желании можно кликнуть на кнопку "Preview" и посмотреть как они будут отображаться. Для скачивания наших фавиконов в формате "ico" мы кликаем по кнопке "Export" .
Итак, вот мы и научились создавать фавиконы в "png" и конвертировать их в формат "ico" . Я специально не рассматривал детальную обработку изображения в фотошопе, так как для многих это будет излишне. При необходимости, вы конечно же можете дополнительно улучшить качество фавикона поработав с пикселями в фотошопе. Я же постарался изложить все самое необходимое и в упрощенной форме. И на этом у меня все. Надеюсь данный урок оказался для вас полезным. Если это так:
- Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
- Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.
На этом я с Вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
Сегодня хочу познакомить вас с сервисами по созданию фавикона для вашего сайта . Favicon – это сокращения английских слов favorite и icon. Это картинка размером 16 на 16 пикселей, которая носит название favicon и имеет расширение ico . Она помещается в корневую папку вашего сайта на хостинге. При загрузке сайта браузер автоматически ищет этот файл, затем добавляет его в адресную строку перед URL страницы и в закладки, присваивая его вашему сайту. Никакой практической пользы иконка веб-сайта не несёт и служит только его узнавания.
Сейчас любой веб-дизайнер, который хоть как-то задумывается об уникальности и оригинальности своего ресурса, просто обязан сделать для него специальную иконку. В любом браузере в адресной строке, название вашего сайта вместе с иконкой, будет выглядеть современно и актуально. Так же будет заметен он и в закладках, и в Избранном , что позволит ему выделиться из массы подобных сайтов. Можно подобрать значок, согласно тематики вашего ресурса и ещё не начав изучать его, посетитель сразу сможет понять, о чём он. Это будет хорошо влиять на узнаваемость сайта и формирование его как бренда.
По умолчанию, для веб-сайта отображается значок, который предусмотрен для этого в текущем браузере. Так же большинство версий современных браузеров поддерживают персональные фавиконы сайтов. А в поисковой системе Яндекс, которая сейчас доминирует вместе с Google на русскоязычном пространстве, при поисковом запросе, ранжируемые сайты появляются вместе со своей иконкой. Поэтому, не откладывая на потом, обязательно необходимо уделить её созданию пристальное внимание.
Есть много ресурсов в интернете, на которых хранятся уже готовые иконки. Их великое множество, но сейчас нас интересует именно создание фавикона.
Нужно создать favicon для сайта? Рассмотрим сервисы для создания фавикон онлайн
Самый популярный сервис для создания иконки для сайта . Работать в нём достаточно просто и с этим справиться даже начинающий пользователь. Мы загружаем картинку, которую хотим видеть в качестве иконки сайта. Он её обрабатывает. Смотрим получившееся изображение и если оно нам подходит, то нажимаем Скачать . Автоматически сохраняется файл с название . Можно и самостоятельно попиксельно порисовать и если понравится, то тоже сохранить как иконку. Важно, чтобы для создания фавикона использовался простой рисунок. Если будет много всего разноцветного, то получиться невзрачное пятно.
Следующий сервис, который так же прост в использовании – . Работа в нём приблизительно схожа с предыдущим аналогом. Единственное, что он англоязычный и здесь больше рекламы. Но в целом, действия по генерации достаточно похожи. Загружаете изображение, смотрите, редактируете и сохраняете.
Сейчас почти каждый ресурс предоставляющий услуги продвижения сайтов или сбора аналитики по ним, имеет дополнительную опцию по созданию фавиконов. Например, всем известные сервисы, которые тоже имеют эту дополнительную опцию:
Но мне нравятся сервисы, которые заточены непосредственно под создание. Вот, посмотрите, ещё один симпатичный онлайн инструмент для генерации иконок различных размеров и форматов . Скромненько и со вкусом. Загрузили наш файл. Выбрали размер. Предпросмотр и сохраняем на компьютер.
Можно было бы конечно использовать для создания иконки всеми любимый Фотошоп. Но он не сохраняет картинки с расширением ico
. Вернее сохраняет, но для этого необходимо распаковать специальный плагин – icoformat.8bi
установить его в папку Plug-Ins\File Formats
в папке Фотошоп. Это позволит сохранять файлы с нашим нужным расширением. По мне, так это достаточно хлопотно.
Я предлагаю такой вариант. В Фотошопе мы создаём картинку, которую хотим видеть в качестве иконки, сохраняем с любым расширением и отправляем на один из выше представленных сервисов, где мы и получим из этих изображений нужный нам .
Можно также воспользоваться онлайн конвертерами графических изображений из одного формата в другой. Например вот или . С помощью них можно изменить любое расширение графического файла на ico .
Как же сделать так, чтобы иконка стала фавиконом для сайта?
Необходимы следующие шаги:
1 Убедиться, что файл называется .
2 С помощью Filezilla помещаем его в корневую папку нашего сайта. По идее, этих действий достаточно и браузер автоматически определит, где он находиться. Но мы перестраховываемся и прописываем html-кодом путь к этому файлу.
3 Для этого берём файл нашей темы header.php (можно его редактировать в администраторской панели непосредственно в WordPress, а можно скачать его с сервера), открываем его и прописываем перед закрывающим тегом следующий код:
/favicon.ico"/>
/favicon.ico"/> |
4 Сохраняем файл и переносим обратно на хостинг.
5 Чистим кэш текущего браузера и всё. Получили искомый результат.
Кстати, не обязательно, чтобы фавикон располагался в корне. Атрибут href задаёт непосредственно путь к нему. Получается так:
|
|
Так же не обязательно, чтобы значок был с расширение ico . Можно использовать также расширения png и gif . Для этого в коде меняется тип выводимого файла.
То есть меняем type с image/x-icon на image/png или gif .
Кстати, можно добавит ещё кое-что. Мы создали и поставили фавикончик для сайта, а в администраторской панели WordPress, остался стоять по умолчанию стандартный фавикончик. Чтобы он изменился вообще везде, нужно в файл нашей темы function.php , вставить следующий php -код:
function sp_set_favicon() { echo " "; } add_action("admin_head", "sp_set_favicon"); add_action("login_head", "sp_set_favicon"); add_action("wp_head", "sp_set_favicon");
function sp_set_favicon() { echo ".get_bloginfo ("template_url" ) /> " ; add_action ("admin_head" , "sp_set_favicon" ) ; add_action ("login_head" , "sp_set_favicon" ) ; add_action ("wp_head" , "sp_set_favicon" ) ; |
Теперь он отразится во всех заголовках.
На этом, в общем-то, и всё. Сегодня мы обсудили, зачем нужно создать favicon для сайта и рассмотрели онлайн сервисы по созданию фавикон для сайта и тонкости её установки . Не забывайте подписываться на обновления блога. До скорых встреч!
Смотрите видео, как создать favicon.ico и разместить его на хостинге:
Всем привет!
В этой статье я расскажу вам о том, как установить фавикон на сайт. Сделать это можно с помощью корневого каталога сайта или используя функционал шаблона. Мы разберем все варианты и определим, какой из них будет наилучшим для того или иного случая.
Но перед этим мы поговорим о том, как этот самый favicon можно нарисовать. Далее разберемся в том, какой размер должен быть у логотипа, в конце расскажу, как вставить созданную иконку на сайт.
Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:
Также иконка отображается в поисковой выдаче, и если ваш сайт не имеет собственного фавикона, то пользователи вряд ли будут обращать на него внимание. Особенно более опытные, которые действительно ценят каждую мелочь.
В Яндекс Вебмастере отсутствие фавикона классифицируется как ошибка, которую срочно нужно исправить. Связано это не только с тем, что люди в поисковике могут не доверять сайту без иконки, но и с определенными поисковыми алгоритмами. Роботы видят такие технические недостатки и чаще всего понижают ресурс в выдаче. Печальное явление, которое может сказаться на всем SEO-продвижении.
Подведем небольшие итоги:
- Favicon влияет на поведенческие факторы и кликабельность в выдаче.
- Поисковые роботы также могут учитывать наличие или отсутствие фавикона.
- Такой технический недочет может привести к падению трафика.
Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.
Теперь давайте разберемся в том, как можно эту самую иконку нарисовать. Сделать это можно при помощи различных онлайн-сервисов, редакторов.
Где скачать готовый вариант
Далеко не лучший выбор, но кто-то им пользуется. Вы можете скачать готовый фавикон из интернета и особо не заморачиваться над самостоятельным созданием своего. Все они представлены в удобных форматах и нужных размерах.
Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.
Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.
Готовые варианты можно поискать и на различных сайтах. Как правило, там представлены целые подборки всевозможных тематических логотипов, которые могут прийтись по вкусу некоторым вебмастерам.
Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.
Создание фавикона
Онлайн-сервисы
Нарисовать фавикон можно в онлайн-сервисах. Достаточно просто ввести в поисковик соответствующий запрос, после чего вашему вниманию будет представлен целый перечень сайтов, которые могут помочь вам реализовать задуманное.
На этом курсе будут рассмотрены самые главные особенности грамотного создания информационных проектов, взаимодействия с командой и прочие полезные аспекты, которые обязательно понадобятся вам при развитии вашего бизнеса.
В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон ). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон .
Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:
Эта иконка является своеобразным логотипом Вашего блога. Поэтому к созданию фавикона нужно отнестись со всей ответственностью. Помните, он может выделить Ваш блог среди других.
План урока :
- Создание Favicon с нуля.
- Создание фавиконки из готового изображения.
- Сервисы с готовыми иконками для сайта.
- Прикрепление полученной иконки к сайту.
Как создать Favicon (фавикон) с нуля
Есть один очень удобный сервис. Он имеет адрес favicon.cc . Этот сервис по построению фавиконок выглядит так:
Чтобы нарисовать favicon
достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:
Я нарисовал следующий фавиконку:
Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:
Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:
Создание favicon (фавикон) из готового изображения
Допустим Вы не хотите создавать с нуля иконку для своего сайта, а хотите сделать ее из уже готового изображения. В этом случае для Вас будет удобен сервис для создания фавиконки favicon.ru .
Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico ”, а дальше уже “Скачать favicon.ico ”.
В этом уроке рассмотрено создание Favicon, вы узнаете, для чего необходима данная иконка, получите рекомендации по улучшению ее вида и привлекательности.
Кроме этого мы рассмотрим процесс создания и добавления Favicon для сайта.
Favicon - это небольшая иконка которую вы можете видеть в адресной строке браузера и на вкладках открытых страниц, а также при добавлении сайта в закладки браузера туда же добавляется и данная иконка.
Кроме этого поисковая система Яндекс отображает иконку Favicon в результатах выдачи рядом с вашим сайтом. Ваша задача сделать так чтобы данная иконка выделялась, запоминалась, бросалась в глаза на фоне остальных иконок в выдаче, а также имела какие-то ассоциации с вашим сайтом. Красиво созданная и привлекающая внимание иконка Favicon может значительно увеличить количество заходов на ваш сайт по сравнению с теми на которых она не установлена или имеет не привлекательный вид.
Вот некоторые рекомендации, которые необходимо учитывать при создании Favicon.
#1. Значок должен быть легко распознаваемым и иметь ассоциации с вашим сайтом или нишей, к которой относится ваш сайт. В качестве значка вы можете использовать логотип или символ вызывающий ассоциацию с вашим сайтом. Кроме этого можно использовать ту цветовую гамму, в которой создан ваш сайт или логотип.
#2. Не используйте стандартные значки. Многие после создания сайта на той или иной CMS, оставляют значок , ничего, не меняя. В результате в выдаче поисковой системы может находиться не один сайт с таким значком, а множество. Этим вы не как не выделите свой сайт, поэтому используйте только уникальные иконки Favicon созданные специально для вашего сайта. Сюда же можно отнести ситуацию, когда используют иконки из различных коллекций или элементов интерфейса других сайтов. Помните для того чтобы выделяться вам нужна уникальная Favicon.
#3. Старайтесь при создании значка использовать более яркие и светлые цвета, как правило, они привлекают больше внимания.
#4. Не используйте анимированные значки. Во первых анимация поддерживается не всеми браузерами, во вторых внимание посетителя должно быть сосредоточенно на содержимом, а не на иконке.
Теперь рассмотрим непосредственно сам процесс создания Favicon. Для этого существует множество сервисов. Однако они больше подходят для тех у кого уже есть готовая иконка которую они где нибудь содрали или взяли из какой-то коллекции. Но как я уже говорил выше, иконка должна быть уникальной, поэтому здесь я рассмотрю процесс ее создания при помощи программы Photoshop, на примере сайта сайт.
Создание заготовки Favicon в Photoshop
#1. Создайте новый документ в Photoshop размером 64*64px , для этого пройдите в меню "Файл" >> "Новый..." или нажмите сочетание клавиш Ctrl+N. Вообще сам значок должен быть 16*16px , но лучше вначале создавать его таки размером, а потом уменьшить до необходимого.
#2. В моем случае у меня нет какого либо логотипа для сайта поэтому я решил использовать символ "W" с которого начинается адрес сайта, а также те цвета которые преобладают в верхней части сайта это синий и желтый. Поэтому я установил значение цвета #6A91D0 и при помощи инструмента "Заливка" (G) задал синий цвет ранее созданному документу.
#3. После этого я выбрал инструмент "Текст" (Т) добавил символ "W" и задал ему следующее значение цвета #FAC31D.
Для того чтобы символ более выделялся на синем фоне я добавил ему обводку черным цветом и размером 2px. Для этого необходимо пройти в пункт меню "Слой" >> "Стиль слоя" >> "Обводка" , выбрать цвет и размер обводки.
После этого необходимо объединить слои, для этого необходимо пройти в пункт меню "Слой" >> "Объединить видимые" или нажать сочетание клавиш Shift + Ctrl + E.
Для того чтобы линии были плавные без засечек я добавил размытие. Для этого необходимо пройти в пункт меню "Фильтр" >> "Размытие" >> "Размытие по Гауссу..." и установить радиус 0,3 пикселя.
Свой символ или изображение размещайте так, чтобы оно заняло максимум пространства, потому что если он будет маленького размера, то при размере значка 16*16 оно не будет заметно.
#4. Теперь необходимо изменить размер значка. Для этого нужно пройти в меню "Изображение" >> "Размер изображения" и установить размер 16*16px.
#5. Осталось сохранить значок. Иконка Favicon должна иметь имя favicon и расширение.ico. Все дело в том что по умолчанию Photoshop не сохраняет изображения в формате.ico. Поэтому сохраните его в формате.png, для этого пройдите в пункт меню "Файл" >> "Сохранить как..." и из раскрывающегося списка выберите пункт PNG.
Конвертирование изображение в формат.ICO
После этого мы конвертируем его в формат.ico при помощи сервиса . Зайдите на данный сервис и при помощи кнопки "Обзор" выберите ранее сохраненный файл в формате PNG после чего нажмите на кнопку "Создать favicon.ico".
После этого на загрузившейся странице появится ссылка "Скачать favicon.ico!" кликнув по которой можно сохранить готовую иконку Favicon на компьютер.
Теперь пришло время добавить Favicon к вашему сайту, чтобы она отображалась для всех его страниц. Для этого поместите иконку в корневую папку вашего сайта. Если ваш сайт уже находится на хостинге то обычно эта папка называется "public_html". Затем, в каждую страницу вашего сайта, перед закрывающим тегом добавьте следующие строки:
Но в каждую страницу данные строки необходимо добавлять, если у вас сайт на HTML. Но так как, скорее всего ваш сайт создан на базе, какой-то CMS, то вам будет достаточно добавить эти строки в главный файл вашей темы, которую вы используете для сайта.
Если вы используете WordPress то пройдите в папку wp-content/themes/папка-с-вашей-темой/ найдите в ней и откройте файл header.php, а заетм вставьте необходимы строки и сохраните файл.
Если вы используете Joomla то пройдите в папку templates/папка-с-вашей-темой/ и откройте файл index.php вставьте необходимые строки и сохраните.
В некоторых темах в WordPress и Joomla уже могут быть прописаны свои пути к файлу favicon.ico в таком случае удалите их и замените на свои.
Если вы используете, какую либо другую CMS то все делайте по аналогии.
На вкладках страниц и в адресной строке браузера ваша иконка отобразится сразу, что же касается поисковой выдачи Яндекса то здесь нужно, чтобы прошло время, и специальный поисковый робот Яндекса нашел вашу иконку, после этого она станет отображаться в результатах поиска.
Материал подготовлен проектом:
