Как сделать favicon для сайта

Автор: | 09.02.2017

Как создать и изменить favicon

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


Содержание статьи:
1. Что такое Favicon.
2. Для чего нужен Favicon.
3. Как создать Favicon.
4. Как установить Favicon.
5. Видео по созданию и установке Favicon.


Favicon — это favorite icon или же говоря русским языком иконка для избранного. Но это старая расшифровка, в нынешнее время favicon является еще и иконкой самого сайта, отображаясь во вкладке браузера перед title. Также во многих поисковых системах, рядом с сайтом, отображается favicon. И порой, вашу favicon можно встретить во многих рейтингах сайтов и блогов. Более редкие случаи, где можно встретить иконку сайта, это в панели закладок Windows или на рабочем столе, на сегодняшний день это тоже актуально, встречаются люди, которые делают нужные закладки на рабочем столе.

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

Зачем нужен Favicon

Как уже писалось выше Favicon это иконка вашего сайта и самое банальное ее предназначение — отображаться на вкладке браузера. Но у нее существует еще множество предназначений. Давайте я вам расскажу о всех, чтобы вы в полной мере осознавали значимость favicon на сайте.

Для чего нужен Favicon:

  • Иконка на вкладке браузера. Так сложилось, что давным давно иконку начали использовать создатели браузеров и помещать ее перед заголовком Titile на вкладке браузера, так она и прижилась там. На сегодняшний же день это считается уже стандартом.
  • Иконка в избранном. Избранное, оно же закладки, это место куда вы можете сохранить ссылку на сайт с какой-либо пометкой, чтобы не потерять. На самом деле очень полезная вещь, для тех, кто ведет активную деятельность в интернете, потому что порой не хочется терять любимые или полезные сайты. Ниже вы можете наблюдать пример из моего списка закладок.
  • Иконка в поисковой выдаче. Поисковые системы выводят ее слева от самой ссылки на сайт. Очень такой важный фактор, что на сайты имеющие favicon кликают несколько чаще, чем на сайты не имеющие его. Поэтому рекомендуется его устанавливать. На малых уровнях трафика вы этого не заметите, а когда у вас трафик будет 1000 и более, вы начнете чувствовать влияние иконки на вашем сайте. С целью повышения CTR (кликов) в выдаче стоит задуматься об ее установке. Пример вы можете видеть ниже.
  • Иконка на рабочем столе компьютера, если вы там располагаете ссылку на сайт. Это явление можно встретить реже, но оно все же встречается. Есть пользователи которые предпочитают сохранить любимые сайты на рабочий стол или же в панель быстрого доступа Windows. И вот тут могут возникнуть проблемы, если Favicon сделан не правильно. Дело в том, что размер Favicon не 16×16. Точнее 16×16 это один из размеров иконки на сайте, а их должно быть как минимум 3 в разных разрешениях. Но поискав информацию в сети, об этом мало кто знает. А сейчас я вам покажу главные различия в том, когда у вас одна иконка и несколько в разных разрешениях.
  • Иконка в рейтингах и на стартовых страницах. Существует целое множество различных рейтингов и анализаторов сайтов, в них вы можете тоже увидеть, что там используется. Рейтинги могут быть различные, где-то по числу подписчиков выстраивают сайты, где-то по посещаемости, где-то по показателям ТИЦ и PR и т.д. Вариантов может быть много, но в них, так же как и в поисковой выдаче иконка может привлечь больше внимания, чем сайт без иконки и вы получите больше чуть больший приток посетителей. По поводу стартовых страниц тут все понятно, это просто пользователь добавил вас для быстрого и удобного доступа, а добавив иконку, вы можете упростить ему жизнь. Имея Favicon пользователю не нужно читать адреса сайтов, он будет по иконке интуитивно узнавать ваш сайт. Это даст вам просто признание в глазах пользователя, ведь вы стараетесь для его удобства.

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

 

Как нарисовать Favicon

Прежде всего, перед тем, как приступить к созданию favicon, вам нужно обзавестись графическим редактором. Лично я рекомендую использовать для этих целей Adobe Photoshop, ни в коем случае не вздумайте рисовать фавикон в Paint.

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

Как создать и изменить favicon

Здесь я сделал его специально в большом разрешении, чтобы добавить в статью. Для сайта favicon такого разрешения использовать нельзя, он должен иметь строго заданные размеры: 16 x 16px. Это общепринятый стандарт и стоит его придерживаться, если вы хотите, чтобы иконка вашего сайта отображалась везде.

Для того, чтобы начать, откройте Photoshop и начните создание документа файл — создать или же можно обойтись короткой комбинацией клавиш CTRL + N.

Как создать и изменить favicon

В открывшемся окне, вам необходимо указать размеры создаваемого изображения — 48 x 38px. Также вам необходимо задать разрешение, укажите его равным 300 пикселям на дюйм. Это необходимо для получения наиболее красивой картинки.

Далее нажмите на клавишу ОК и вы увидите, как у вас появится рабочая область, которая будет размером 48 x 48 и она будет очень маленькая. Вам необходимо сделать её на весь экран, для удобного рисования. Можете перетащить ползунок масштабирования или же просто нажать CTRL и «+».

Как создать и изменить favicon

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

Мы с вами получили иконку размером 48×48 и нам нужно ее сохранить. Для этого выбираем «файл» — «сохранить как». Но есть и второй вариант, если вы яростный поклонник экономить место или вам важна скорость загрузки сайта, то зайдите во вкладку чуть ниже «сохранить для web». Лично я сохраняю просто.

Нажимаем «сохранить» и получаем окно, где необходимо выбрать место для сохранения вашего favicon. Что касается формата, то выбирайте любой. Хоть и очень часто можно встретить информацию, что нужен формат ico, то это устаревшая информация, его нужно сохранять в формате PNG и это не будет ошибкой.

Далее вам необходимо создать еще несколько копий иконки, поэтому её необходимо уменьшить еще до двух размеров, до 32×32 и 16×16. Давайте для начала сделаем копию 32×32, будем идти плавно по уменьшению. Для этого вам нужно перейти в раздел «изображение» — «размер изображения».

После того, как вы нажмете на «размер изображения», у вас откроется вкладка, где нужно будет настроить параметры уменьшения favicon. В нашем случае его с размера 48×48 нужно уменьшить до размера 32×32.

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

Теперь осталось сделать последнюю копию картинки, это ту, которая будет отображаться на самих вкладках браузера, то есть favicon 16×16. Для этого опять переходим в раздел «размер изображения» и уменьшаем до размера 16×16.

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

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

Как поменять favicon

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

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>ваш сайт</title> 
.......
<link rel="icon" type="image/png" href="/favicon.ico">

</head>

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

<link rel="icon" type="image/png" href="/favicon.ico">

После того, на месте данного тега, нам с вами необходимо прописать сразу 3 наших иконки. Дело в том, что с введением HTML5, не обязательно, чтобы формат был ico. Теперь можно использовать и png. И мы с вами будем добавлять именно в этом формате. На место старого кода вставьте новый, правильный код favicon.

<link rel="icon" type="image/png" href="/favicon-16x16.png" >
<link rel="icon" type="image/png" href="/favicon-32x32.png" >
<link rel="icon" type="image/png" href="/favicon-47x48.png" >

Указав иконку сайта таким образом, в трех форматах, мы даем понять, что у нас имеются разные размеры и брать стоит тот, который требуется, в случае, если нужна большая, то возьмется 48×48. Так же и с остальными, для вкладок браузера будет браться 16×16 и так далее. Но суть в том, что теперь ваша иконка, при необходимости большой, будет выглядеть красиво и сглажено, что является хорошим плюсом.

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

Надеюсь эта статья и видео вам помогли, всем удачи!

Как сделать favicon для сайта: 6 комментариев

  1. Den

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

  2. Ferablog

    Здравствуйте Иван, спасибо за вашу инструкцию, она мне очень помогла. Я сначала взял, нарисовал favicon в фотошопе, а потом не мог понять как её поставить на сайт, везде пишут, что нужно строго ico, а вы тут скинули замечательный код, который разрешает грузить любой формат, теперь не надо мучаться над поиском программы делающей ico. Спасибо еще раз, поменял свой favicon и теперь не могу нарадоваться.

  3. Татьяна

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

  4. Ольга

    У меня фавикон установлен с помощью плагина. Нужно будет сделать как вы описали и удалить лишний плагин.

  5. Иван

    Почему у вас у самих favicon только 16 пикселей? Сапожник без сапог?

    1. Иван Скречко

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

Обсуждение закрыто.