Что такое фавикон и зачем он нужен? Фавикон из картинки: какую выбрать.

Фавикон (в переводе с английского FAVorite ICON - «значок для избранного») - миниатюрное изображение, выполненное в формате ico. Он виден как в поисковой выдачи, так и при открытии самого сайта, а именно: в верхней части браузера (смотрите на картинку). Favicon является миниатюрным изображением, которое относится к числу основополагающих составляющих любого интернет-ресурса. Если в 2006 году сайты в большинстве своем работали без прикрепленных фавиконов, то сегодняшние веб-сайты невозможно представить без них. Конечно, остались проекты, запущенные без favicon, но в 2017 году это единичные случаи, найти которые очень сложно, так как сами поисковики в 95% случая не пропускают их в свой ТОП по высокочастотным запросам.

Предназначение favicon:

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

Где демонстрируется favicon (фавикон):

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

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

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

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

Размер фавикона

Favicon - миниатюрная иконка, которая имеет квадратную форму. Ее размер в большинстве своем равен 8х8, 16х16, 32х32, 64х64 и 128х128 пикселей. Именно поэтому возникает сложность при перекодировании объемных картинок в формат ico, ведь подчас в такого рода изображениях присутствует более 1280 пикселей, что сильно портит внешний вид конечной ico картинки, превращая ее в квадрат со всевозможными красками.

Где взять favicon?

Фавикон можно как скачать из интернета, так и создать самостоятельно, в том числе заказав его разработку у специалиста:

• Скачанный из интернета favicon. Основным преимуществом является то, что такой фавикон полностью бесплатен. Вторым же достоинством стоит считать то, что в качестве такого фавикона может выступать любое изображение, главное правило: перекодировать его в формат ico. Но бесплатность не несет в себе ничего хорошего, все скаченные из интернета фавиконы являются собственностью их авторов, и в 99% случаях они присутствуют на других сайтах, что лишает их какой-либо уникальности. Например, в Европе и Соединенных Штатах Америки нередки случаи, когда владельцев сайтов привлекали к уголовной ответственности за кражу favicon (нарушение авторских прав).
• Созданный самостоятельно favicon. Создать фавикон самостоятельно сегодня может даже школьник. Для этого потребуется лишь воспользоваться возможностями, которые предоставляются специально разработанными для этих целей онлайн-генераторами иконок (icon) в формате ico. Основным преимуществом данного метода является то, что в качестве favicon может выступать логотип компании/фирмы/организации, перекодированный с помощью генератора фавиконов в формат ico.

• Заказанный у специалиста favicon. Разумеется, фрилансеры и компании, ориентирующиеся на создании фавиконов используют доступные в открытом доступе всем пользователям интернета российские и иностранные генераторы и редакторы изображений в формате ico. Хотя при этом, профессиональный фавикон всегда будет стоять выше того, который пользователь сможет создать самостоятельно.

Генераторы фавиконов:

• https://www.favicon.cc - один из самых первых онлайн-генераторов фавиконов, используя его пользователь сможет не только перекодировать картинку из классических изобразительных форматов в ico (например, логотип своей компании), но и создать свою иконку, которая хорошо будет выглядеть как при поисковой выдачи в Яндексе и Google, так и адресной панели браузера.

• https://www.favicongenerator.com - минималистический сервис, облегчающий генерацию фавиконов и упрощающий процесс редактирования изображений в формате JPG в ico. Результат моментально демонстрирует в специально отведенном окошке.

• https://www.genfavicon.com - этот сервис достаточно прост в понимании, так как создание фавикон проходит в три этапа, а именно: выбор файла в формате JPEG, GIF, PNG на компьютере; выбор конечного размера изображения и повсеместное его перекодирование в формат ico. Учтите, что изображение должно иметь квадратную основу.

Генераторы фавиконов с нуля:

• https://antifavicon.com
• https://favicon-generator.org
• https://favicon.ru
• https://www.favicon.cc
• https://www.degraeve.com/favicon

Коллекции фавиконов:

• https://www.iconj.com/gallery.php - коллекция фавиконов, насчитывающая свыше 10000 иконок.
• https://www.audit4web.ru/info/favicon/ - коллекция с фавиконами для сайта, в базе которой хранится более 20000 изображений в формате icon (ico).
• https://www.favicon.cc/?action=icon_list&order_by_rating=1 - генератор фавиконов и галерея анимированных и статичных иконок
• https://www.favicon.co.uk/gallery.php - генератор фавиконов для сайта и блога, а также каталог статичных и анимированных картинок.
• https://thefavicongallery.com - многообещающая веб-коллекция изображений в формате ico, доступных для бесплатного скачивания.
• https://findicons.com - самый масштабный сток на просторах российского и иностранного интернета с изображениями в формате icon (ico).

Как разместить фавикон на сайте?

Для размещения Вам потребуется лишь доступ к серверу. Формат фавикон: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

1. Разместите favicon в корневую папку сайта.
2. Добавьте в HTML-код главной страницы сайта, в элемент, ссылку на размещенный файл.
... ...

Метки: Фавикон, FAVorite ICON

Привет, друзья! Сегодня у нас на очереди фавикон. Слово новое, непонятное, неудобное.. Но, все просто. Мы уже давно видели эти фавиконы. Просто не знали, что это они и есть 🙂 . Так у нас бывает, что самые простые вещи всегда называют умно и непонятно. А на самом деле «фавикон» состоит из слова испанского «фаворит» и слова греческого «икона»(изображение). В переводе на русский язык, «любимое изображение» 🙂 . Мы узнаем что это. И зачем оно нужно.

И вот теперь мы улыбнемся, затем посмотрим на рисунок.

Вот эти значки слева от названия сайта или (его отдельной рубрики) и есть наше «любимое изображение». Так «фавики» выглядит в закладках Вашего браузера. Эти значки вы видели уже много раз. Всегда находили с их помощью нужное в панели закладок. Потому что сейчас наличие фавиконов — это общепринятая вещь.

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

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

В этом примере мы видим, что на маленьких (32х 32 пикселей) значках (как правило квадратных), на ярком фоне бросаются в глаза стилизованные изображения букв, которые происходят от названия сайтов («ок» — наши Одноклассники, «вк»- наш Вконтакте, а буква «f» это — иностранец Фейсбук (опять же по русски «книжная морда»)… Ничего не поделаешь, могучий русский язык плюс природный русский юмор..

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

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

Если Вы — яркая индивидуальность, то рекомендую начать с фотошопа. Можно сделать такой фавикон, которого нет ни у кого и еще при этом самовыразиться 😛 . Причем его можно сделать опять же полностью с нуля. Бесплатно. Другой вариант — можно скачать картинку (тот же фавикон) и переделать его под себя. Но, нужен фотошоп или другой редактор попроще, которым можно обрезать и уменьшать изображения.

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

Укажем имя файла, размеры одинаковые, этот вариант фавикона будет квадратный, и содержать только буквы из названия сайта, на каком нибудь ярком фоне. Нажимаем ОК.

Вот что выбрал я, и как это выглядело после печати того, как я набрал «текст»:

Нам теперь надо выровнять текст по центру:

Получилось как то так. Правда, поле случайно стало прямоугольным вместо квадратного.

Теперь немного стилизуем наше изображение. Есть волшебная кнопочка сверху на панели инструментов в виде изогнутой буквы «Т»:

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

Плюс к этому, мы можем ползунками сами менять кривизну в пределах каждого «стиля»:

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

Каждый новый элемент нашего рисунка мы создаем на так называемом слое. Текст мы разместили на одном фоне, а белый фон автоматически при создании файла на находится на другом слое. Сейчас мы для эксперимента попробуем еще третий слой создать и на него нанести какой нибудь другой фон. Жмем правой кнопкой мыши на слое. Или комбинацией клавиш Ctrl +Shift +N (как на рисунке) создаем новый слой:

Получается сначала так:

А потом выглядит так:

Курсор должен находиться на этом слое, мы с ним будем работать.

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

На созданном нами слое нужно встать мышкой а потом выбрать фон

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

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

Не волнуйтесь, изображение не закрасилось. Нам теперь надо наложить на этот желтый слой текст, который на соседнем слое. Все просто.

Получилось так:

Почти готово. Все-таки, текст должен быть пожирнее.Надо поиграть со шрифтом. Опять нажмём «Т» и выберем шрифт который больше подходит.

Простым передвижением мыши по списку шрифт будет изменяться на нашем фавиконе. Выбираем понравившийся шрифт. Я остановился пока на таком:

Брюки превращаются в элегантные шорты…Осталось сохранить наш рисунок и посмотреть, что получилось. Но сначала уменьшим его размер до 32х32 пикселя.

Ставим нужный размер, ширину и высоту 32х32:

Если человек владеет фотошопом и умеет рисовать, то можно создать более продвинутые значки. В видео еще один пример, как быстро создать фавикон.

Как сделать фавикон онлайн бесплатно?

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

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

Фавикон генератор что это такое и как?

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

Мы сейчас попробуем подгрузить туда наш готовый значок. Найдем его в папке

И вот, оно самое:

Вот как он выглядит, мой фавикончик. Нажимаем «Загрузить».

Вот мой фавикон в браузере, уже закачанный:

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

М-да, не Малевич, но главное не победа, а участие… Рисовать по клеточкам можно наверное только самые простые значки. Некоторые люди рисуют анимированные фавиконы. Они «шевелятся», меняют цвета. Ну и наконец самый быстрый способ получить фавикон онлайн — это заплатить за него. На момент написания статьи на этом же ресурсе цена заказа на анимационный favicon размером 32×32 px в формате gif — 1200 ₽, обычный фавикон — 700 рублей. Довольно недешево, но если разделить суммы на 64 пикселя, то нормально.

Как установить фавикон на сайт wordpress (вордпресс)?

Ну вот, когда мы определились, пора закидывать фавикон на сайт. Прежде чем это делать, нужно обязательно посмотреть на оформление Вашего сайта, мысленно «примерить» фавикон- подойдет ли он под оформление надписей и основных панелей. Все должно гармонировать. Хотя… искусство — это такая спорная вещь..

Я попробую закинуть его через мой любимый Total Commander

После соединения с доменом мы скопируем фавикон с папку с шаблоном:

У меня cайт на Word Press, в других платформах пути другие, но идея одна фавикон должен лежать в папке с шаблонами или темами, например: «ваш сайт.ru -wp-content-themes-Папка с вашим шаблоном- favicon.ico»

Значок скорее всего не сразу появится у вас на сайте. Роботы должны проиндексировать его. Если нужно быстро организовать появление фавикона, придется на каждой странице сайта в заголовках вставлять код между тегом Head

Еще проще настроить фавикон через административную панель Word Press. В настройках темы есть опция «Активировать фавикон:»

Я люблю яркие фавиконы, да и буквы можно было бы нарисовать покрупнее. Но пока пусть так. Художники — они такие ранимые 🙂 Всегда недовольны своими творениями… 🙂 В любой момент можно переделать… Сегодня мы убедились, что создание фавикона — полностью творческий процесс.

И заодно чуть-чуть познакомились с фотошопом. Можно потратить пару дней и сделать то, что тебе нужно. Вложить частичку души… Друзья. если знаете приемы фотошопа для фавиконов — пишите в комментариях что и как. А пока до встречи!

Favicon - (сокращение от слов «Favorite Icon» ) - это маленькая картинка размером 16×16 пикселей, которую увидит посетитель вашего сайта. Она отображается рядом с URL сайта в адресной строке браузера. Кроме того эта иконка отображается рядом с именем вашего сайта в списке открытых вкладок, в закладках и в результатах поиска, облегчая пользователю быстро найти ваш сайт среди других сайтов.

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

Хотя многие современные веб-браузеры поддерживают фавиконки в формате GIF, PNG или других популярных форматов файлов все версии Internet Explorer по-прежнему требуют значки в виде файлов ICO (формат Microsoft). В этом формате вашу иконку поймет любой браузер.

Зачем нужна фавиконка

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

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

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

В чем создать favicon

Вы, конечно можете попытаться найти готовый файл favicon.ico на сайте www.iconfinder.com, но думаю многим хотелось бы сделать что-то свое. Ведь именно фавиконка будет выделять ваш сайт в поисковой выдаче. О том как это сделать вы сейчас знаете. Итак, приступим.

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

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

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

Как происходит процесс создания иконки в Логастер

1. Чтобы фавиконка сочеталась с вашим логотипом, вам будет предложено сначала создать логотип (это бесплатно).
2. Напишите название и, если хотите, слоган, указываете вид деятельности, а Logaster самостоятельно подготовит для вас множество вариантов логотипов.
3. Выбираете подходящий логотип, вы сможете изменить его позднее.

Вот что у меня получилось

Теперь можно нажать на кнопочку «Скачать логотип». В бесплатной версии на нем будет водяная надпись Logaster.com

Логотип можно купить. После этого вы сможете скачать в выбранном формате (PNG, JPEG, PDF, SVG) и размере (1024 px, 5000 px).

Теперь переходим непосредственно к созданию фавиконки.

1. Опять-таки выбираете понравившийся вариант.
2. Можете изменить форму, сделав ее квадратной, с закругленными углами, круглой или вообще не вписывать ее в определенную форму.
3. При желании добавьте цветную обводку, кликнув на инструмент «Обводка».
4. Нажмите на кнопку «Сохранить».

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

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

1. Купите и активируйте фавиконку.
2. Скачайте ее.
3. Разархивируйте скачанный файл в корневую папку вашего сайта.
4. Вставьте следующий код на все страницы сайта в тег :

Дизайн-пакет со скидкой

Дополнительно вы можете приобрести весь комплект фирменного стиля. Вот один из вариантов.

Статья по теме: Как подключить Яндекс.Спеллер к WordPress

Плагин для создания фавиконок

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

Создать фавиконку можно прямо в Фотошопе. Для этого понадобится плагин, который можно скачать по адресу www.telegraphics.com.au . Для его установки, скопируйте файл ICOFormat.8bi в директорию c:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats.

С помощью плагина ICOFormat.8bi , вы сможете сохранять картинки в виде «.ico-файлов».

Как установить плагин ICO (Windows Icon) Format

1. 64-bit Windows (Vista/Windows 7):
   • Restart before installing;
   • Положить плагин в папку C:Program FilesAdobePhotoshopPlug-InsFile Formats, но у меня другая структура, у меня этот файл хранится здесь: C:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)Plug-ins .
   • If you are running on a 64-bit Windows system and are launching the 64-bit version of Photoshop CS4 or CS5, download the 64-bit version of the plugin and put it in the Plug-Ins folder corresponding to 64-bit Photoshop (i.e., the one in «Program Files» not «Program Files (x86)»).
2. Move the plugin into the «File Formats» folder inside your Photoshop Plugins folder:
   • For Windows (32-bit), ICOFormat.8bi
   • For Windows (64-bit), ICOFormat64.8bi
   • For Mac OS X, ICOFormat.plugin (note that separate versions are provided for CS2, CS3/4 and CS5)
   • For Mac OS X/Classic, icoformat
   • For 68K MacOS, icoformat(68K)
3. If using Corel PSP Photo X2, put the plugin in C:Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns
4. Quit and relaunch Photoshop, if it’s already running.

Есть еще онлайн-сервис www.convertico.com . ConvertICO это бесплатный онлайн-конвертер файлов ICO/PNG. Он работает быстро и прост в использовании. Он используется для преобразования значков рабочего стола, иконок приложений, а также фавиконок для веб-сайтов.

Как сделать favicon.ico самому

1. Открыть Фотошоп.
2. Создать документ 32×32 пикселей.
3. Вставить из Иллюстратора смарт-объект готового изображения.
4. С помощью команды «Сохранить как» сохранить фавиконку в формате.ICO *.
5. Полученную фавиконку загрузить в корень сайта и подключить через тему Вордпресс, либо руками прописать в шаблон сайта. О том как подключать favicon , я уже писал ранее.

* Если у вас не установлен специальный плагин ICO (Windows Icon) Format , можете скачать его с сайта www.telegraphics.com.au/sw/ . Там есть для Маков, Винды 32, 64-разрядных с поддержкой всех версий Photoshop, включая CS6.

Отображение favicon

Чтобы ваш сайт отображал фавиконку, ее можно просто расположить в корне сайта. Браузер и поисковые системы сами определят, что у вас есть файл favicon.ico и будут ее отображать автоматически. Данный способ является самым простым и он действенен в 95% случаев. Но, можно и явно подключить фавиконку.

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

Итак, сначала разберемся что такое фавикон . Если Вы посмотрите на адресную строку Вашего браузера, то увидите примерно вот такую картину:

Вот эта маленькая картинка (пиктограмма) рядом с адресом Яндекса и есть фавикон.Фавиконы употребляются еще в нескольких местах, например, на страницах поисках Яндекса и т.д. :

У большинства сайтов перед названием стоят фавиконы. Некоторые фавиконы несут смысловую нагрузку, связаны с тематикой сайта, как например, на сайте Mail.ru:

А некоторые представляют собой просто абстрактные картинки, типа фирменного знака:

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

Немного отвлекусь. На скриншоте представлена картинка с автоновостями и я невольно подумал: хорошо бы, если фавикон хоть немного отображал суть сайта. Однако это не всегда может получиться. Например, Вас интересует (и Вы об этом пишите) Ремонт АКПП Ауди А8 . Нарисовать АКПП — на таком маленьком рисунке никто ничего не разберет. В общем, в этом вопросе я пока не знаю как поступить.

Продолжим. Само слово фавикон происходит от английского favicon, которое в свою очередь является сокращением двух слов – FAVorites ICON, что переводится как «иконка (значок) для избранного». Так она стала называться потому, что первоначально использовалась в Microsoft Internet Explorer в качестве картинки около закладки в «Избранном».

Такие картинки были одного формата 16×16 пикселей, формат таких картинок, как правило, — ico и располагаются они в одном месте – корне сайта.

Что такое фавиконы, я думаю, Вы теперь себе отчетливо представляете. Несколько сложнее ответить на вопрос: а зачем они, собственно, нужны?

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

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

Более-менее похоже на правду утверждение – «чтобы было как у всех», «чтобы было не хуже, чем у соседа» и все в таком роде. Ну, не знаю – не знаю, это дело каждого.

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

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

А что Вы думаете, для чего еще нужен фавикон? Напишите в комментариях, буду Вам признателен.

Бесплатный генератор фавикона и советы: как подобрать фавикон, какие размеры нужны и как установить фавикон на сайт.

Что такое фавикон

Favicon (сокр. от англ. FAVorites ICON - «значок для избранного») - значок сайта или страницы. Отображается браузером в адресной строке перед , а также в качестве картинки рядом с закладкой, в табах и в других элементах интерфейса. Лучше всего смотрится изображение, которое можно вписать в квадрат. Стандартные размеры - 16x16, 32x32, для некоторых браузеров и ОС нужны размеры 60x60, 120x120, 192x192.

Обычно используют формат ICO, но еще доступны PNG, GIF, JPEG, SVG. Файл формата ICO содержит несколько версий фавикона , некоторые браузеры могут выбрать не ту версию и использовать значок более низкого разрешения, поэтому некоторые веб-мастера советуют PNG.

В России фавиконы в выдаче поддерживает Яндекс:

Сайты с фавиконами в выдаче Яндекса

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

Выдача Google в Великобритании

Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.

Сайты с фавиконами на вкладках и на панели закладок

Зачем нужен фавикон

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

Разберем, для чего нужен файл favicon.ico и можно ли без него обойтись.

• Выделяет сайт в выдаче

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

Сайт без фавикона в выдаче среди прочих

• С фавиконом сайт запоминается лучше

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

Логотип компании в фавиконе

• Упрощает поиск нужного сайта

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

Закладки в Google Chrome

• Избавляет от ошибки в лог-файлах

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

К примеру, такую:

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at http://localhost:8383/favicon.ico

Фавикон из картинки: какую выбрать

• Тематическую

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

Фавикон с чашкой для сайта о кофе выглядит гармоничнее

• Контрастную

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

• Упрощенную

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

• Оригинальную

Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.

Как создать favicon для сайта

Есть три самых распространенных способа:

1. Специальный плагин для Photoshop
   Позволяет работать этому популярному редактору изображений с форматом ico.
2. Специальные программы для изготовления фавиконов
   Они специально «заточены» для изготовления иконок для сайта.
3. Онлайн генератор favicon
   Самый простой и доступный способ - загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

RealFaviconGenerator сделает фавиконы для разных платформ и браузеров. Если вам достаточно одного значка, отконвертирует изображение в файл ICO 16х16.

Панель бесплатного генератора фавикона

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

... ...

Атрибут "rel" указывает на тип ресурса. Большинство браузеров распознают "icon", для Internet Explorer нужен "shortcut icon".

От формата файла зависит тип передаваемых данных. Для ICO это "image/x-icon" или "image/vnd.microsoft.icon", для PNG - "image/png" и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel="apple-touch-icon".

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

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

Размер фавикона для браузеров и устройств

С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне - где-то требуется больший размер, где-то достаточно небольшого файла.

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

Популярные десктопные браузеры

Стандартно для фавикона делают файл favicon.ico , он поддерживается всеми браузерами, но можно выбрать и другой формат. Обычно рекомендуют установить несколько размеров фавикона для разных случаев: 16x16, 32x32 и 48x48.

Пример кода:

Фавикон в HTML5

В HTML5 с помощью расширенного описания можно указать размеры и формат иконки. Для файла ICO, в котором несколько фавиконов, можно указать размеры в атрибуте sizes через пробел. Для фавикона в векторе укажите размер "any".

Пример кода:

Android

Указать фавикон и его расположение для Android можно через спецификацию The Web App Manifest . В ней описан простой JSON-файл, в котором веб-мастера указывают иконки, размеры и форматы для сайта или приложения. Его поддерживают Chrome, Opera, Samsung Internet и Firefox.

Манифест указывают с помощью:

Пример кода:

{ "name": "My App", "icons": [{ "src": "64.png", "sizes": "64x64" }, { "src": "192.png", "sizes": "192x192" }], "display": "fullscreen", "orientation": "landscape", "theme_color": "tomato", "background_color": "cornflowerblue" }

Apple

Для iOS рекомендуют делать иконку PNG размером 180x180. В документации Safari такие называются Web Clips , в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.

Пример кода:

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью.

Пример кода:

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

У Microsoft есть «Browser configuration schema reference» - XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

#da532c

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