О favicon и не только

Генератор favicon.ico

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

http://www.michurin.net/online-tools/favicon-editor.html

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

Сделать Фавикон для сайта с помощью сервиса Favicon-Generator.org

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

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

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

Favicon.ru

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

Добавить картинку на сайт можно двумя методами:

При первом способе вы можете выбрать на своем ПК понравившуюся картинку и просто загрузить ее применив кнопку «Выберите файл».

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

После загрузки вашего файла вам придется кликнуть по кнопке «Сделать favicon из изображения!», далее просто подождите немного времени. Затем скачайте полученное изображение на свой ПК.

Favicon.cc

Данный генератор фавиконок не только мощнее, но и сложнее. Вначале зайдите на его главную страницу, потом кликните по кнопке «Image File», расположенной слева страницы.

Затем жмем по кнопке «Импорт изображений» и загружаем наше изображение. Из этой картинки мы постараемся сделать фавикон для сайта.Далее выберете, что сделать с картинкой после ее уменьшения: при выборе Keep dimensions мы оставим пропорции изображения неизменным, если мы выберем Shrink to square icon, то приведем картинку в квадратный вид. В этом случае изображение может выглядеть искаженно.

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

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

На сайте ваш фавикон будет находиться по адресу.

ПЕРВОЕ. Можно загрузить фавикон на сайт довольно быстро, для этого я использую программу FileZilla. Фавикон находится в папке uploads. Этот файл найдем по адресу /public_html/wp-content/uploads/год/месяц/название фавикона.ico. (На вашем хостинге он может находиться немного в другом месте).  Для этих целей включите данную программу, соединитесь с сервером и просто перекиньте фавикон в папку uploads.

ВТОРОЕ. Добавим faviconв главную папочку сайта. Для этого на хостинге поместим в папочку с блогом файлик, который назовем favicon.ico. Не забудьте, favicon должен быть 16 на 16 пикс.

ТРЕТЬЕ. Внутри сайта заходим в настройки вашей темы, там может быть меню «General», заходим в него, выбираем раздел «Иконка сайта», жмем по кнопке «Upload Now», загружаем его с ПК. При данной загрузке не забудьте, что он должен иметь расширение .ico. Но такой раздел есть не на всякой теме.

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

Как установить Favicon на сайт и прописать путь до него

Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта. Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки или ) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы). Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.

Если поставить фавикон таким образом у вас не получилось, то возможно вам придется очистить кэш вашего браузера, т.к. часто бывает, что из кэша загружается старая версия. Можете попробовать открыть ваш сайт в FireFox, у меня он лучше всего реагирует на проводимые изменения без очистки кэша. Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для favicon, отличное от корневой папки. Как это проверить?

Откройте исходный код любой страницы вашего сайта. Чтобы посмотреть ее исходный код, достаточно будет щелкнуть по странице правой кнопкой мыши и выбрать соответствующий пункт контекстного меню (например, «Исходный код» в старой Opera, либо «Исходный код страницы» в Мазила Фаерфокс, либо «Просмотр кода страницы» в Google Chrome, либо «Просмотр HTML-кода» в IE) или нажать сочетание клавиш Ctrl+U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.

Она может выглядеть примерно так:

<link rel="shortcut icon" type="image/ico" href="http:путь_до_вашей_иконки/favicon.ico" />

Также возможен и такой вариант :

<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon">

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

В Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). Т.е. для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:

/templates/папка_с_используемым_шаблоном_оформления/favicon.ico

Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

В общем, если хотите задать или поменять путь до вашего фавикона, который бы поняли и браузеры, и поисковый робот Яндекса, то вам нужно будет прописать в соответствующем файле шаблона Joomla, WordPress или любого другого движка, между открывающим и закрывающим тегами HEAD, следующие строчки кода:

<link rel="shortcut icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />

В каком именно файле шаблона нужно прописать эти строки, зависит от движка вашего сайта. Например, в в WordPress вам нужно открыть на редактирование файл header.php из папки с используемой вами темой оформления: . Открываете в редакторе и в самом его начале находите открывающий Html тег HEAD. В любом месте за ним, но до закрывающего HEAD прописываете одну из приведенных выше строчек кода с указанием пути до вашего графического файла мини-логотипа.

Как установить анимированный фавикон? В принципе, точно так же, как и обычный. Будет отличаться только код, вставляемый в шаблон вашего сайта, с помощью которого вы указываете браузерам и поисковому роботу Яндекса путь до нужного графического файла. Дело в том, что анимированный Favicon будет иметь расширение GIF, и, следовательно, в строках кода нужно будет прописать примерно так:

   <link rel="shortcut icon" href="/img/favicon.gif" type="image/gif" >
    <link rel="icon" href="/img/favicon.gif" type="image/gif" >

Вот и вся разница между анимированными favicon и обычными. Но следует учесть, что будет работать анимированная иконка только в FireFox, в остальных же браузерах она будет статичной. Яндекс же, при загрузке вашего анимированного фавикона, преобразует его в статичный формат PNG. Но, по-моему, овчинка выделки не стоит — устанавливать вместо обычного мини-логотипа для сайта анимированный не имеет особого смысла. Но это только мое ИМХО.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Обзор онлайн-генераторов, где найти коллекцию фавиконов

Favicon generator — сервисы, где можно сотворить «мини-логотип» для сайта или преобразовать подходящую картинку в нужный формат.

Удобный сервис, в котором можно сделать эксклюзивную иконку — нарисовать ее с нуля попиксельно. Для этого переходим на сервис и в меню слева нажимаем кнопку «Create New Favicon».

В центральной части окна находится область, в которой каждый квадратик — это пиксель будущего фавикона. Следует закрасить эти квадратики в разные цвета. Чтобы это проделать, нужно обратиться к блоку «Color Picker», который расположен в правой части сервиса. Здесь необходимо выбрать из предоставленной палитры необходимый цвет и щелкнуть по определенной области, где находится пиксельная сетка. Чтобы удалить неправильную закраску, достаточно поставить галочку возле чекбокса «transparent» и щелкнуть по квадрату, после чего он станет прозрачным.

Чтобы переместить рисунок по холсту сервиса, ставится галочка возле чекбокса «move». Для того чтобы посмотреть что получилось предусмотрен блок «Preview», который находится под пиксельной сеткой. Для скачивания готового фавикона на компьютер нужно нажать кнопку «Download Favicon».

Если вы не Пабло Пикассо и нарисовать с нуля для вас равносильно прыжку из парашюта, загрузите на сервер для будущего фавикона картинку любого формата и размера, она будет, как болванка. Чтобы загрузить изображение на генератор, нажимается кнопка «Import Image» в левом меню.

На открывшейся странице нужно кликнуть кнопку «Выбрать файл», найти на компьютере подходящую картинку. При загрузке прямоугольной картинки можно отформатировать ее в квадрат (16х16). Для этих целей предусмотрена вкладка «Shrink to square icon». Учтите, в таком случае изображение будет искажено по одной из осей.

Чтобы соотношение сторон остались прежними, поставьте точку в чекбоксе «Keep dimensions».

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

Этот онлайн генератор еще и предоставляет коллекцию фавиконов, которые создавались другими пользователями этого сервиса ранее. Они выложены в общем доступе. Чтобы посмотреть галерею нужно в левом меню нажать кнопку «Latest Favicons» — экспонаты, отсортированные по дате или кнопку «Top Rated Favicons» — по рейтингу.

Чтобы скачать понравившийся экземпляр кликните левой кнопкой мыши по его названию и на открывшейся странице выберите «Download Favicon».

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

Для создания фавикона необходимо ввести название компании или сайта и нажать кнопку «Далее».

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

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

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

Последовательность действий следующая: выбираем файл и нажимаем кнопку «Create Favicon».

Сервис, предоставляющий возможность создавать фавикон с надписью. Цветовая гамма настраивается в области «Colors», а текст надписи вводится в полях «Top text» и «Bottom tex».

Для скачивания готового значка следует кликнуть по миниатюрной надписи «save as favicon file».

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

Для создания фавикона выбираем файл и нажимаем «Upload Now».

Также в сети можно найти и другие генераторы, которые позволяют создать фавиконы с нуля или же доработать уже имеющееся изображение. В частности FavIcon from Pics, DeGraeve, Generator, Онлайн редактор иконок favicon.ico, Online Favicon, Free Favicon Generator и Фавикон-генератор. Стоит отметить, что все они бесплатные.

Можно не растрачивать силы на эксклюзивность и найти уже готовые иконки в интернете. Для этого существуют специальные галереи с коллекциями бесплатных фавиконов. Хотелось бы выделить:

• Галерея иконок для сайта favicon.ico;
• Iconj;
• Favicon.cc;
• The Favicon Gallery.

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

Фавикон (favicon) что за атрибут?

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

Это изображение называется Фавикон  (читаем Favicon).

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

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

Словоформа Favicon состоит из пары слов английского языка Favorites Icon (воспользуйтесь переводчиком). Почти для каждого интернет проекта есть свой мини-логотип, который отображается на закладке браузера. Размер файла иконки составляет 16×16 пикселей и имеет расширение ico (хранилище иконок для Windows).

Отображение фавикона на закладках браузера

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

Почему фавикон нужен каждому сайту

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

Наш инструмент «Анализ сайта», который проводит полный техосмотр вашего ресурса, в том числе проверяет и наличие фавикона. Вы можете проанализировать свой сайт, просто зарегистрировав аккаунт в SE Ranking.

Если фавикон есть, а аудит его не видит — значит, проблема с индексацией или адресом иконки. Проверьте все еще раз. 

Наши англоязычные коллеги говорят: «Дьявол — в мелочах». И фавикон — та самая маленькая деталь, которая может влиять на восприятие вашего сайта и бренда, на их узнаваемость и даже количество переходов из поиска. 

Хороший фавикон — неотъемлемая часть бренда и технический стандарт каждого сайта, и точно стоит потраченного на него времени.   

Просмотры:
22 573

Юлия Торчинская

Юлия — контент-маркетолог c 10-летним опытом работы в журналистике, копирайтинге, рекламе и PR.

Своим опытом и знаниями она делится, создавая полезные статьи про SEO и диджитал-маркетинг для блога SE Ranking и популярных медиа.

Когда Юлия не пишет статьи, она осваивает новые асаны, путешествует и помогает волонтерской организации YWCA.

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

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

В вашем распоряжении поле 16х16, так что можно нарисовать какую-то простенькую картинку, например, букву, или фигурку. Для рисования есть инструменты:

• Карандаш;
• Пипетка для копирования цвета;
• Ластик;
• Заливка.

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

Там же на сайте, можно заказать фавиконку, или взять готовую в коллекции.

Стоит отметить, что фавикон, т. е. графический файл, может быть с расширением GIF, PNG, BMP или GPEG, но лучше, если он будет иметь расширение ICO. Для удобства, переименуйте файл в favicon. Теперь этот файл нужно закинуть в корневую папку сайта.

Далее найдите файл header.php в теме вашего сайта, а затем между тегами <head> и </head> вставьте код ниже:

PHP

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

1	<link rel=»shortcut icon»href=»/favicon.ico»type=»image/x-icon»>

или этот

PHP

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

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

Тема сайта находится по следующему пути: domen.ru/wp-content/themes.

Если вы загрузили фавикон в другую папку, тогда нужно указать полный путь к этой папке. Укажите его в коде href=»/. Если фавикон не ICO, тогда надо указать это и в коде type и x-icon, например:

PHP

<link rel=»shortcut icon» href=»/favicon.png» type=»image/x-png»>

1	<link rel=»shortcut icon»href=»/favicon.png»type=»image/x-png»>

Советую вставлять в файл первый код.

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

Как сделать фавикон для сайта с помощью плагина Favicon Rotator

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

Особенности:

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

Установка и настройка:

1. Предварительно создайте, или скачайте фавикон на свой компьютер, чтобы его можно было загрузить на сайт.
2. Установите и активируйте плагин;
2. В панели администратора, перейдите «Внешний вид» -> «Favicon»

3. Нажмите кнопку «Add Icon», чтобы загрузить картинку с компьютера.

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

4. Жмите «Save changes», чтобы сохранить изменения, и на этом все.

Если фавикон на сайте не отображается, значит в теме сайта не прописан тег wp_head()

Как сделать фавикон онлайн с плагином HFG

А с помощью этого плагина, еще легче сделать фавикон онлайн. Итак, перейдем сразу к делу. Установите и активируйте этот плагин прямо с панели администратора. Потом переходите в левой колонке «Настройки» -> «Heroic Favicon Generator Settings», а затем жмите «Select Favicon».

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

Плагин Genie WP Favicon

Установите этот плагин и активируйте его. Далее перейдите «Внешний вид» -> «Genie WP Favicon». Жмите «Выбрать файл» и загрузите иконку со своего компьютера. Далее клика «Update favicon» и на этом все.

При загрузке изображения на сайт с помощью этого плагина, оно сохраняется в исходном размере, т. е. оно не конвертируется под размер фавикона, поэтому вам надо заранее подготовить картинку нужного размера. Размеры изображения могут быть 16х16 или 32х32, максимум 128х128. Поддерживаются файлы .ico, .png, .gif , размером до 100 kb.

Как сделать фавикон для сайта? Обзор онлайн-сервисов

Создать файл .ico можно при помощи специальных сервисов, которые мы разберем ниже.

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

1. Favicon.cc

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

2. Создание Favicon на сайте Cy-pr.com

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

Например, вы нашли подходящее изображение какого-то предмета. Вы можете загрузить его на сайт и на его основе сделать favicon.ico. Все просто – выбирайте файл и нажимаете на кнопку «Конвертировать». Ниже появляется иконка. Нажимаете на нее правой кнопкой мышки и сохраняете на своем компьютере файл.

3. Xiconeditor.com

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

4. Favicon.ru

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

5. Findicons.com

Крупная база бесплатных иконок. Можно найти интересную иконку и конвертировать ее в фавикон для сайта при помощи описанных выше онлайн-сервисов.

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

Проще всего добавить файл в формате favicon.ico в корневую папку сайта. Например, для этого блога он будет находиться по адресу http://adblogger.ru/favicon.ico

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

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

FAQ по добавлению и замене фавиконок

1. Как поменять фавикон?

Замените файл favicon.ico в корневой папке сайта на новый вариант. Данные изменения автоматически появятся на сайте. В поисковых системах обновление пройдет после специального апдейта.

2. Как проверить фавикон сайта в Яндексе?

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

3. Как проверить наличие фавиконки в Google?

Задайте запрос, по которому ваш проект находится в ТОП-10. Проверьте, что рядом со ссылкой выводится ваша иконка. Если ее нет, возможно, требуется подождать.

4. Можно ли размещать фавиконку не в корневой папке сайта?

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

5. Можно ли установить разные фавиконки для разных страниц сайта?

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

X-Icon-Editor

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

Как сделать анимированный фавикон

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

Благодаря специальной панели, в процессе рисования favion-ки вы будете сразу видеть, как она смотрится в пределах браузера Internet Explorer.