Как создать фавикон для блога и установить его без плагина? Фавикон для сайта как создать


Как установить Favicon на сайт быстро и легко

Доброго времени суток, друзья!

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

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

Расскажу все, что знаю о данной иконке. На что она влияет, как ее лучше создать и так далее.

Прежде, чем начать обсуждать данные вопросы я хотел бы разъяснить вопрос: "Что же вообще такое Favicon и где его можно увидеть?".

Все проще некуда. Favicon - иконка, которая отображается, когда вы находитесь на каком-то сайте. Также она отображается и в поисковой системе Яндекс, что очень даже хорошо. Почему это так, мы рассмотрим далее.

Вот, как выглядит моя иконка во вкладке браузера.

А вот, как та же иконка отображается в выдаче поисковой системы Яндекс.

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

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

Зачем нужен Favicon

Постараюсь объяснить все в виде чек-листа. Кстати, приготовил простенькую инфографику на этот счет.

  • Продвижение и узнаваемость бренда.

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

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

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

Данные 2 фактора из первого пункта взаимосвязаны. Без одного не будет второго.

  • Увеличение количества кликов из выдачи, а соответственно и прирост трафика.

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

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

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

  • Увеличение конверсии сайта.

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

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

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

Эти 3 причины я бы выделил в качестве основных. Может вы еще что-то добавите в комментариях. Будет интересно узнать больше.

Ну, а теперь пришло время приступить к самому процессу создания и установки данной иконки. Начнем с создания.

к содержанию ↑

Как создать Favicon

Сейчас мы поговорим о создании фавикона с точки зрения 2х моментов:

  1. Создание самого дизайна и оформления;
  2. Создание самой иконки.

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

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

Поэтому, если вы не обладаете хорошей фантазией и хорошими навыками фотошопа, как минимум, то вариантов в данном случае 2:

  1. Много париться и сделать самому;
  2. Обратиться к профессионалам.

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

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

Если же все таки вы человек-самоучка, то вот вам несколько советов, о которых стоит помнить при создании иконки:

  • Не копируйте никого - будет хуже только вам, а конкуренту будет плюс, так как вы его в некой мере пропиарите;
  • Иконка должна быть простая, чтобы во вкладке было четко понятно, что там нарисовано. Поэтому, чем меньше в ней элементов, тем лучше. Многие делают ее из своей фотографии, которую абсолютно не видно в таком размере. Не повторяйте данной ошибки;
  • Favicon должен давать понятие области вашей деятельности или же брендировать ваше имя. Если область деятельности, то постарайтесь что-то придумать интересное. Например, если сайт о заработке, то логично сделать иконку в видео каких-то монет или купюр. Но таких умников уже пруд пруди, поэтому нужно обыгрывать все по-своему. Почему я выше и писал, что необходима фантазия и умение ее воссоздать в дизайне. Если же это личный блог, то очень распространенный вариант - обыграть первую букву своего имени или фамилии. Я так и сделал. Это самый простой путь.

Теперь можно перейти и к процессу создания самой иконки с технической точки зрения.

к содержанию ↑

Создаем иконку

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

Также нам потребуется изображение маленького размера (32х32 или 16х16 пикселей) с нашей иконкой. Именно в таком размере и отображается фавикон. Во вкладке браузера он имеет размер 16х16 пикселей.

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

Когда выбрали иконку, мы можем нажать на кнопку "Create icon", после чего сервис автоматически преобразует наше изображение в иконку нужного формата (ico) и придаст ей размер 16х16 пикселей.

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

После скачивания иконки она будет в месте сохранения файла с нужным расширением и форматом. Можете в этом удостовериться.

Можно идти дальше и сделать так, чтобы иконка отображалась на сайте.

к содержанию ↑

Устанавливаем Favicon на сайт

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

Процесс установки состоит из 2х этапов:

  1. Загрузка иконки на сайт;
  2. Подключение вывода иконки на всех страницах.

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

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

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

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

Как видим, имеются все файлы и папки шаблона и среди них находится иконка.

После загрузки иконки на хостинг, необходимо сделать ее загрузку на всех страницах сайта. Для этого нужно добавить определенную строчку кода в файл header.php вашей темы в область между открывающим и закрывающим тегами <head></head>.

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

<link rel="shortcut icon" href="http://ваш-домен/wp-content/themes/название-темы/favicon.ico" />

<link rel="shortcut icon" href="http://ваш-домен/wp-content/themes/название-темы/favicon.ico" />

Идем в файл header.php и копируем в вышесказанное место эту строчку с вашими данными. В моем случае получилась следующая ситуация.

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

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

Как вы увидели, процесс установки Favicon настолько простой, что его сделает даже младенец. Тем более, что по традиции прилагаю видео-урок.

После этого все в ваших головах должно стать на свои места.

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

На этом все. До связи

С уважением, Константин Хмелев.

kostyakhmelev.ru

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

Как создать и изменить 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 на вкладке браузера

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

Favicon в панели закладок или в избранном

  • Иконка в поисковой выдаче. Поисковые системы выводят ее слева от самой ссылки на сайт. Очень такой важный фактор, что на сайты имеющие favicon кликают несколько чаще, чем на сайты не имеющие его. Поэтому рекомендуется его устанавливать. На малых уровнях трафика вы этого не заметите, а когда у вас трафик будет 1000 и более, вы начнете чувствовать влияние иконки на вашем сайте. С целью повышения CTR (кликов) в выдаче стоит задуматься об ее установке. Пример вы можете видеть ниже.

Favicon в поисковой выдаче

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

Favicon на рабочем столе 48x48

  • Иконка в рейтингах и на стартовых страницах. Существует целое множество различных рейтингов и анализаторов сайтов, в них вы можете тоже увидеть, что там используется. Рейтинги могут быть различные, где-то по числу подписчиков выстраивают сайты, где-то по посещаемости, где-то по показателям ТИЦ и PR и т.д. Вариантов может быть много, но в них, так же как и в поисковой выдаче иконка может привлечь больше внимания, чем сайт без иконки и вы получите больше чуть больший приток посетителей. По поводу стартовых страниц тут все понятно, это просто пользователь добавил вас для быстрого и удобного доступа, а добавив иконку, вы можете упростить ему жизнь. Имея Favicon пользователю не нужно читать адреса сайтов, он будет по иконке интуитивно узнавать ваш сайт. Это даст вам просто признание в глазах пользователя, ведь вы стараетесь для его удобства.Favicon в рейтингах

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

 

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

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

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

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

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

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

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

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

Создание Favicon. Размер иконки

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

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

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

Создание favicon. Рисуем иконку

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

Создание favicon. Сохранение иконки

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

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

Создание Favicon. Уменьшение иконки

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

Создание Favicon. Иконка 32x32

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

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

Создание Favicon. Иконка 16x16

Опять сохраняем получившуюся иконку под другим именем, эту можете назвать 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 сайту.

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

Поделиться ссылкой:

Похожее

Нашли что искали? Поддержите проект!

directory-seo.ru

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

favicon

Мне часто задают вопрос начинающие веб-мастера: «Как сделать иконку для сайта, чтобы она отображалась на вкладке браузера?»

Друзья мои, нет ничего проще. Вопрос решается прописыванием двух строк кода в секции <head> Вашего сайта. Чуть ниже расскажу, каких именно...

Но для начала немного теории. )))

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

По своей сути favicon — это картинка (рекомендую делать в формате .ico или .png — потому что эти форматы поддерживают прозрачность).

Стандартный размер фавиконки — 16×16 пикс. Так что особо мудреные логотипы туда не поместятся — надо использовать что-то попроще.

А сейчас главный вопрос — Как сделать саму фавиконку?

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

Но это не то, о чем я хотел сегодня рассказать.

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

X-Icon-Editor

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

В качестве загружаемых изображений данный сервис поддерживает форматы JPEG, PNG, ICO и другие. На выходе favicon-ке можно задать размер 16, 24, 32, 64 пикселя.

Favicon.cc

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

 Antifavicon

Стандартный размер favicon-ки (16×16) — это конечно же маловато для текста. Однако Antifavicon позволяет поместить две строчки текста в это маленькое пространство. Используемый шрифт конечно не ахти, но что поделаешь :) .

Заданные рамки конечно же сковывают. Однако, посмотрев некоторые примеры, можно придумать что-то довольно-таки интересное.

Faviconist

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

Genfavicon

Последний сервис, который мы рассмотрим, — это Genfavicon. Здесь можно загрузить изображение, преобразовать его в иконку и сразу же увидеть, как она будет смотреться в браузере. После этого вы можете скачать иконку заданного размера.

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

Как привязать favicon к сайту?

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

В секции <head> добавляем следующий код:

<link rel="icon" href="http://Ваш_сайт.ru/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="http://Ваш_сайт.ru/favicon.ico" type="image/x-icon">

Как Вы уже поняли, Ваш_сайт.ru заменяем на доменное имя Вашего сайта. А саму фавиконку закидываем в корневую папку Вашего сайта.

Тут есть еще один нюанс. Когда Вы все это сделаете — Вы не увидите Вашу новую фавиконку... Чтобы ее увидеть, нужно обновить кэш браузера (и желательно еще перезапустить браузер). Вот тогда Вы сможете полюбоваться своими трудами в полной мере.

Желаю удачи!

P.S. Не забываем подписываться на обновления сайта. Это очень Важно! )))

free-site-master.ru

Как создать фавикон для всех браузеров и устройств

Иконка сайта (фавикон) — очень важный элемент дизайна сайта. Она делает ваш ресурс заметней в выдаче, повышает его узнаваемость. Часто разработчики оставляют создание фавикона на последний момент, и вовсе о нем забывают. В лучшем случае, вставят одну строчку link тега только с одним вариантом favicon.

Отображение фавкиона в поисковой системе Яндекс

Отображение фавкиона в поисковой системе Яндекс

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

Внимание мелочам!

Сам фавикон не так прост, как нам хотелось бы думать. Да, для десктопа всё просто и тривиально. А что делать со смартфонами, для которых иконка должна быть представлена в разных размерах. А с ГуглТВ что делать?

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

Десктопный фавикон

Это всем нам привычная иконка (см. картинку выше). Все версии браузеров отображают иконки следующих размеров:

А поддерживаемый формат — как .png, так и .ico (.ico только для старых версий Internet Explorer).

Фавикон для Андроида

Тут уже мы должны учитывать разрешение экрана мобильного устройства. Именно от него и зависит итоговый размер фавикона. Разрешение смартфона — это плотность пикселей на дюйм (PPI). Именно из-за разных разрешений устройств необходимо делать иконки в разных физических размерах:

  • 36×36 — PPI = 0.75
  • 48×48 — PPI = 1
  • 72×72 — PPI = 1.5
  • 96×96 — PPI = 2
  • 144×144 — PPI = 3
  • 192×192 — PPI = 4

Android отлично понимает .png иконки, а также использует файл manifest.json, в котором можно прописать дополнительные параметры вывода. А если вы забыли сделать фавикон под андроид, то система будет использовать apple-touch-icon.

Favicon для Apple устройств

«Яблочные» устройства также имеют разный PPI в зависимости от модели и года выпуска, также в них используются Retina-экраны. Поэтому мы вынуждены также делать разные иконки для них:

  • 57×57 — для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
  • 60×60 — для iPhone с не ретина дисплеем и iOS версии 7.0
  • 72×72 — для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
  • 76×76 — для iPad с не ретина дисплеем и iOS версии 7.0
  • 114×144 — для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
  • 120×120 — для iPhone с ретина дисплеем и iOS версии 7.0
  • 144×144 — для iPad с ретина дисплеем и iOS версии 6.0 и ниже
  • 152×152 — для iPad с ретина дисплеем и iOS версии 7.0
  • 180×180 — для iPhone 6 Plus c iOS версии 8.0

Другие фавиконки

Есть ещё некоторые нестандартные параметры иконок, к примеру:

  • Для IE10 под Windows 8 обязательно требуется указать цвет фона
  • Браузер IE11 под Windows 8 и 10 понимает несколько видов иконок, опирается на XML файл параметров browserconfig.xml
  • Safari под Mac OS X El Capitan обязательно требует наличие SVG иконки для закрепленных табов
  • 96×96 — используется в Google TV
  • 228×228 — используется в Opera Coast

Теперь вы понимаете, что на вопрос «какой размер фавикона использовать» ответом будет — ВСЕ размеры для ВСЕХ устройств!

А как всё это будем подключать?

Вручную всё это делать — убить очень много времени. Поэтому будем генерировать фавиконки онлайн с помощью сервиса.

Онлайн генератор фавикона

Онлайн генератор фавикона

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

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

Процесс генерации favicon онлайн

Процесс генерации favicon для iOs онлайн сервисом

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

Встраиваем фавикон в страницу

После того, как мы настроили наш фавикон на все устройства, можно заняться его генерацией. Далее система нам предложит несколько вариантов подключения, в том числе, и привычный способ подключения через <head> в HTML коде страницы. Нужно будет просто скачать получившийся архив и вставить код на сайт.

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

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

Всё, у нас сгенерирован и встроен отличный фавикон!

Полезность напоследок

Подставьте вместо site.ru свой домен и увидите, как поисковые системы воспринимают ваш фавикон

  • Яндекс: http://favicon.yandex.net/favicon/site.ru
  • Google: http://www.google.com/s2/favicons?domain=site.ru

 

Хотите задать вопрос или заказать услугу? Пишите!

Гарантирован ответ в течение 1 часа в рабочее время!

Понравилась статья? Поделись ею с друзьями!

eduardkozlov.ru

как создать и установить Favicon

4Здравствуйте, уважаемые читатели! Сегодня мы с вами узнаем о том, как создать Фавикон для сайта, а также как установить Favicon на сайт без использования специального плагина.

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

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

41

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

Обычно в качестве фавикона используют графический файл с расширением и стандартным названием Favicon.ico.

Такой значок можно сделать в любом графическом редакторе – либо нарисовать самому, либо взять, например свою фотографию или какой-то другой рисунок, убрать все лишнее, уменьшить до размера 16 x 16 пикселей или 32 х 32 (стандартные размеры для Favicon), сохранить файл в формате «gif» или «png», а после заменить расширение на «ico».

Но, есть такие редакторы, например «Paint.NET», с помощью которого вы можете создать фавикон и сохранить его сразу с расширением «ico».

Или же можно воспользоваться другим вариантом – через специализированные сайты, например Favicon.ru, favicongenerator.com.

Вы можете загрузить любую картинку, выбрать нужный размер (16 х 16 или 32 х 32), нажимаете кнопку создания фавикона, а после – кнопку сохранения для загрузки на компьютер.

Все, что вам останется сделать, это скопировать фавикон в корень вашего блога или сайта через FTP соединение. А сейчас, давайте приступим к созданию фавикона самостоятельно через онлайн сервис Favicon.cc.

Создаем Favicon (фавикон) для сайта самостоятельно

Итак, давайте сейчас перейдем на сайт Favicon.cc и приступим рисовать иконку сайта самостоятельно. Определяемся с цветом, и начинаем рисовать в специальной выделенной области.

42

Также, если вы что-то неправильно нарисовали, вы всегда можете удалить ненужный пиксел специальным инструментом – Transparent. Ставите галочку и клацаете по не нужным местам, то есть по «квадратикам».

43

Вот, к примеру, то, что я нарисовал.

44

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

45

Создаем Favicon (фавикон) из любого изображения

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

Favicon.cc

Favicon.ru

Просто загружаете любую готовую картинку, выбираете размеры и жмите создать иконку. Давайте разберем это на простом примере через сервис Favicon.cc.

1. Соответственно переходим на сайт, нажимаем на ссылку «Import image».

46

2. Далее жмем на кнопку «Выберите файл». Выбираете готовое изображение и нажимаем на кнопку «Upload».

47

3. Опускаемся вниз страницы, смотрим результат и если все устраивает, под результатом нажимаем на ссылку «Download Favicon».

48

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

Как установить Favicon (фавикон) на сайт без плагина?

Это делается очень и очень просто.

1. Скопируйте готовый фавикон в корень вашего сайта или блога.

49

2. Далее вам необходимо выбрать для редактирования файл «header.php». В этом файле, должен находиться контейнер «…». Вот именно сюда, то есть между этими тегами, вы должны вставить вот этот код:

<link rel="shortcut icon" href="http://ваш_блог/favicon.ico" type="image/x-icon" />

Там, где написано «ваш_блог», вставьте доменное имя вашего блога и сохраните изменения.

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

Похожие записи

seo-dnevnik.ru

Как сделать фавикон (favicon) для сайта

Как сделать фавикон (favicon) для сайта

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

Для чего нужен фавикон?

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

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

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

Онлайн создание favikon для сайта

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

favikon.cc

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

«create new favicon» — создать новый значок«import image» — импорт изображений«latest favicons» — последние фавки«top rated favicons» — лучшие по рейтингу значки

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

Если вам не понравился ваш только что нарисованный значок, то вы можете нажать на кнопку «clear frame» и стереть его. Есливы хотите оставить ваш значёк и перейти к рисованию следующего нажмите «append new frame», весьма удобная функция, можно например нарисовать неограниченное количество рисунков и тут же переключатся между ними и выбрать таким образом самый лучший для вас.

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

favicon-generator.org

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

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

Если вам не понравился созданный вами рисунок, то просто нажмите на reset editor и экран для рисования удалит полностью ваше изображение.

favicon.ru

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

Для этого нажмите «choose file» и выберите изображение на вашем компьютере.

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

Готовые фавикон для сайта

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

1. hefavicongallery.com — Иконок не очень много зато сделаны весьма качественно и на разные тематики.2. favicon.co.uk/gallery.php — Стильные и весьма приятные для глаз иконочки.3. favicon-generator.org/gallery/- Ещё одна не большая коллекция.4. audit4web.ru/info/favicon/- Более 15000 различных фавиконов.Как установить фавикон для сайта.

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

И ещё желательно что бы размеры были 16×16 пикселей. На этом всё уважаемые читатели блога, вот так во просто можно сделать фавиконку для своего сайта.

minterese.ru

Фавикон (favicon) для сайта. Как его создать и установить? – SEO

Что такое фавикон, его основная роль и предназначение. Как создать фавикон и установить на сайт uCoz.

 

Favicon (фавикон) – это иконка (значок) сайта в виде изображения размером 16×16 (иногда 32х32) пикселей в формате .ico, отображаемая во вкладках браузеров в верхней части открытой страницы перед ее заголовком.Помимо браузеров, фавикон отображается в результатах выдачи поисковой системы Яндекс (в Google его нет) в специально предназначенном для его отображения участке сниппета. На этот участок посетители так же обращают свое внимание, а иногда фавикон «побуждает» посетителя совершить переход на сайт (например, если человек ищет запрос, связанный с проблемами здоровья, то красный крест, символизирующий медицинскую тематику, побудит посетителя совершить переход).

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

На всех сайтах, созданных системе uCoz по умолчанию используется стандартный фавикон, который я рекомендую заменить на свой. Это связано с тем, что у большинства интернет-пользователей стандартная иконка uCoz ассоциируется с некачественным, трудночитаемым и неуникальным контентом, а соответственно определенный процент посетителей просто игнорируют сниппеты в которых видят «приевшуюся» иконку.

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

 

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

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

Для создания фавиконов есть несколько способов:

  1. Воспользоваться специальными онлайн генераторами (найти их в интернете очень просто).
  2. Скачать готовые фавиконы, которые распространяются бесплатно в специально собранных тематических коллекциях.
  3. С помощью специализированных программ, созданных исключительно для создания иконок сайта.
  4. С помощью любимой программы фотошоп со специально установленным плагином.

 

Я хочу рассмотреть именно последний вариант – создание иконки сайта с помощью программы фотошоп.

Для этого нам потребуется скачать и установить плагин ICOFormat, позволяющий сохранять изображения в формате ICO.

Файл ICOFormat.8bi нужно скопировать в папку Program Files/Adobe/Adobe Photoshop CS4(CS3)/Plug-Ins/, после этого перезапустите Фотошоп.

 

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

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

 

 

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

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

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

Если спустя время вы до сих пор наблюдаете стандартную иконку, то сделать замену нужно техническим способом с помощью редактирования блока HEAD. Для этого в HEAD ВСЕХ страниц сайта (всех модулей, разделов, категорий, страниц материалов и т.д.) необходимо дописать дополнительную строку:

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>

 

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

 

Я писал, что в качестве фавикона можно использовать изображения размером 32х32 пикселя, но этот размер не поддерживается браузером Internet Explorer (для отображения во вкладках). Для своих сайтов (и этого в том числе) я установил фавикон именно 32х32, так как с более крупным изображением проще работать, и я делал ориентир на поисковую выдачу Яндекса, а не на браузеры.

seo-for-ucoz.com