Секреты favicon.ico или как создать иконку для сайта в Photoshop. Как создать для сайта иконку


Как создать иконку favicon для сайта?

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

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

Как создать иконку favicon для сайта?

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

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

Сделать иконку для сайта можно несколькими способами:

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

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

Получение нужного формата для favicon

Итак, создав вашу иконку с расширением *.jpeg/jpg, *.gif или *.png нужно загрузить ее на одном из сервисов по изготовлению фавиконок.

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

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

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

Как создать иконку favicon для сайта?

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

Как добавить favicon на сайт?

1. После того, как вы скачали готовую иконку c расширением *.ico, ее нужно добавить на ваш сайт, чтобы она отображалась на вкладках браузеров. Это сделать очень просто. Нужно залить файл с иконкой в корневую папку вашего сайта. Я использую для этого FTP-клиент FileZilla. Но можно загрузить и с помощью панели управления вашего хостинга (в файловом менеджере нужно залить файл с иконкой в папку, где хранятся все файлы вашего сайта).

2. В шаблоне вашего сайта, между <head></head> нужно вставить следующий код:

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

И в нем, соответственно, измените путь к вашей иконке. Для удобства, название для иконки рекомендуем указывать favicon.ico

Теперь вы знаете, как сделать иконку favicon для сайта и как правильно ее подключить. Многие сайты почему-то до сих не используют favicon и я считаю, что зря. Потому что иконка является некой формой индивидуальности и по запоминающемуся логотипу всегда легко узнать и найти сайт – хоть в закладках браузера, хоть среди сайтов в поисковой выдаче. В общем, дерзайте! Сделайте иконку для своего сайта, чтобы он стал узнаваемым!

www.pandoge.com

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

Здравствуйте уважаемые гости блога webmixnet.ru! На связи Максим Обухов и сегодня я расскажу о том, как создать и установить иконку для сайта, работающего на WordPress.

как создать и установить иконку для сайта

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

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

Создание иконки для сайта работающего на WordPress

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

Перед собой вы увидите вот такое поле:

поле для рисования иконки

Это поле предназначено для самостоятельного создания иконки посредством простого рисования.

Справа располагается колонка с инструментами цвета:

поле для рисования иконки

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

поле для рисования иконки

На сайте представлена небольшая инструкция по созданию фавикона:

поле для рисования иконки

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

Этот ресурс позволяет сделать анимированное изображение. Для этого необходимо нажать на надпись под полем для рисунка:

поле для рисования иконки

После этого откроется следующее окно:

поле для рисования иконки

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

Создать иконку можно здесь: www.xiconeditor.com. Теперь перейдем к установке нашей иконки на Вордпресс!

Установка иконки для сайта!

Данную процедуру будем выполнять при помощи плагина «FavIcon Switcher». Найти, скачать и установить его можете прямо из админ-панели WordPress!

Выбираете добавить плагин:

добавить плагин

Затем в поисковик админ панели вводите название плагина: FavIcon Switcher

добавить плагин

Ввели название плагина и перед вами вышло следующее окно:

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

Теперь осталось дело за малым  нажать на кнопку установить сейчас и все! Как вы заметили выше, под красной стрелочкой стоит надпись «установленные». Это потому что у меня он уже стоит.

Находите с лева вот эту надпись:

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

Выбираете плагин нажав на ссылку с надписью FavIcon Switcher.

Пред вами откроется вот такое окно:

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

Здесь все интуитивно понятно. Вам нужно нажать на кнопку с надписью: «Выберите файл» и загрузить ваше творение. И после этого внизу нажать на клавишу «Обновить» Вот и все! Можете наслаждаться проделанной работой ведь теперь иконка уже создана!

Читайте так же:

Как сделать баннер для сайта качественно онлайн?

Написание статьи за деньги для сайта

Сколько платят за сайт в интернете?

Хостинг для сайта с самым лучшим бесплатным тарифом

Что такое сайт в интернете и зачем он нужен?

Как создать сайт приносящий доход?

Что такое трафик на сайте?

Как проверить статистику сайта?

Каким должен быть сайт?

Как найти тот запрос которого нет?

Из чего состоит сайт в интернете?

Как создать свой сайт новичку и зарабатывать на нем деньги? Пошаговая инструкция

С уважением, Максим Обухов!!!

 

webmixnet.ru

Секреты favicon.ico или как создать иконку для сайта в Photoshop — Da Diego

Вы хотите оригинальную и красивую иконку для вашего сайта? Сделайте её сами – в этом вам поможет данная статья.

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») – это специальная стандартная или пользовательская иконка маленького размера, которая находится слева от ссылки (URL) в адресной строке веб-браузера. Также такие иконки используются в закладках рядом с названием сайта, во вкладках браузеров или как ярлык для web-страниц на рабочем столе или других папках Windows. Под маленьким размером подразумевается 16 на 16 пикселей – стандартный размер для иконок данного типа. Основная цель такой иконки — сделать дизайн вашего сайта целостным и детализированным.

Все, что вам необходимо сделать, чтобы добавить иконку на сайт – это поместить готовый «favicon» в формате Windows Icon (.ico) в корневую папку вашего сайта. Большинство современных сайтов, за исключением Internet Explorer (IE), поддерживают использование иконок в формате GIF (включая анимированные варианты) и PNG (включая поддержку полной прозрачности фона), но так как абсолютно все браузеры, IE в том числе, понимают формат .ico, имеющий особенности, которые не дублируются в GIF и PNG, предлагаю ознакомиться именно с их созданием.Системные требованияТак как мы будем создавать иконки в “Photoshop”, нам необходимо научить программу понимать расширение Windows Icon (ICO). Для этого нам потребуется специальный плагин экспорта формата файлов .ico, который можно бесплатно загрузить с Telegraphics. Плагин читает и записывает ICO-файлы в 1, 4, 8-битных индексированных и 24-битных RGB режимах, а так же читать и записывать 32-битные “ХР” иконки (с 8-битным альфа-каналом). Чтобы установить плагин, вам необходимо на сайте разработчиков выбрать подходящий вариант системы, распаковать скачанный архив и поместить в папку “x:\Program Files\Adobe\Adobe Photoshop CS5.1\Plug-ins\File Formats\” (х = буква вашего диска, на который установлен Photoshop) файл с расширением “.8BI”, после чего запускаем или перезапускаем сам Photoshop.

Приступаем к созданиюТак как рабочая зона размером в 16х16 пикселей является недостаточно большой для удобной работы с изображением, лучше начать ваш проект с размером рабочей зоны хотя бы 64х64 пикселя (лучше использовать как можно большие размеры при создании иконок для более удобного выражения творческих идей, впоследствии изображение можно легко отмасштабировать с сохранением пропорций). Чтобы задать необходимые размеры рабочего поля необходимо выбрать в меню Photoshop пункт «File>New» или нажать сочетание клавиш Ctrl+N.

Дизайн иконкиЕсли у вас уже имеется готовый логотип большего размера, попробуйте уменьшить его до 16х16 пикселей и посмотрите, как хорошо он смотрится. Если при таких размерах логотип плохо различим и его графическая информативность невысока, создайте поле 64х64 пикселя и сделайте наипростейший дизайн иконки, который будет содержать основные цвета вашего сайта. Когда вы будете готовы протестировать готовый дизайн — выберите меню «Image>Image Size» или нажмите комбинацию клавиш «Alt+Ctrl+I» и задайте размер 16х16, выставив при этом режим интерполяции «Bicubic Sharper» (этот режим наилучший для уменьшения изображения и дает возможность оценить будет ваша иконка “размытой” при уменьшении или нет). В случае, когда изображение все-таки недостаточно четкое, вернитесь к исходному изображению и сделайте ваш рисунок более четким, насыщенными и/или контрастным, после чего заново отмасштабируйте вашу иконку.

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

Сохранение и загрузка полученной иконкиДля сохранения полученного результата необходимо в меню выбрать пункт «File>Save As» или нажмите комбинацию клавиш «Shift+Ctrl+S» и задать обязательное имя файла «favicon.ico». В меню «Format» необходимо выбрать Windows Icon (ICO) из выпадающего меню. Этот формат будет доступен в Photoshop, только если вы скачали и правильно установили необходимый плагин и задали правильный цветовой режим при создании рабочего окна (1, 4, 8-битный индексированный или 24-битный RGB).Следующим шагом будет размещение новой иконки в корневой папке вашего сайта. Для этого соединитесь с сервером, на котором находится ваш сайт, и закачайте туда созданный «favicon.ico». Этот файл необходимо обязательно поместить в папку, в которой находится домашняя (index.html) страница, а не в папку с изображениями или какую-либо другую папку, так как стандартным местоположением этого файла является именно корневая папка сайта. Если файл был правильно размещен (а его название точно «favicon.ico»), большинство браузеров автоматически распознают его.

Однако для некоторых браузеров необходимо указать прямую ссылку на иконку вашего сайта непосредственно в HTML-коде, а именно добавить ее в хедер каждой страницы, на которой необходимо разместить «favicon.ico»:

<link rel="Shortcut Icon" href="/favicon.ico">

<link rel="Shortcut Icon" href="/favicon.ico">

В большинстве современных тем для Joomla, WordPress и прочих движков используются отдельные файлы (например “header.php”), где достаточно прописать 1 раз эту строчку в начале файла и все страницы будут автоматически подхватывать указанные в них настройки. Также существует расширенный вариант написания данной строчки:

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

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

Если вы сомневаетесь, какой вариант подходит именно вам, пропишите обе строчки.

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

Для использования иконки в формате GIF или PNG необходимо прописать следующие строчки:

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

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

или

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

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

Однако запомните, что оба эти формата не поддерживаются IE и не будут в нем работать.

Мультиразмерный FaviconПомимо обычного favicon размером 16х16 пикселей, которые используются для оформления адресной строки, существует его разновидность с размерами в 32×32 пикселя и 48×48 пикселей. Эти иконки очень распространены в среде Windows. Например, если вы хотите поместить ярлык на веб-страницу на ваш рабочий стол, Windows автоматически попытается использовать favicon в качестве изображения для ярлыка. Но стандартного размера (16х16 пикселей) будет недостаточно для качественного отображения, так как стандартный размер ярлыка в среде Windows 48х48 пикселей – это значит, что ярлык будет растянут до необходимых размеров и станет некрасивым и практически нечитаемым.

Однако существует способ исправить этот недостаток. Полезное свойство файлов .ico заключается в том, что они могут содержать в себе много вариантов одной и той же иконки с разными размерами и глубиной цвета (наподобие возможности .gif-файлов содержать множество фреймов). Поэтому если поместить в favicon.ico изображение сразу в нескольких размерах и с разной глубиной цвета, Windows сможет автоматически выбрать наиболее подходящие параметры для применения к ярлыку. Наиболее распространённые размеры ярлыков, которые могут быть использованы, — 16×16, 24×24, 32×32 и 48×48 пикселей.

Создание мультиразмерной иконки не намного сложнее, чем создание обычного favicon размером 16х16 пикселей. Необходимый плагин мы можем найти все на том же сайте Telegraphics, он позволит поместить несколько иконок в одном .ico-файле. В принципе это даже не плагин, а отдельная программа, которую можно использовать как в Windows (через командную строку), так и в MacOS (посредством перетаскивания). Также у этой программы существуют аналоги, как например: Sib Icon Studio (www.sibcode.com/icon-studio) и Any to Icon Convertor (www.aha-soft.com/anytoicon).

Что касается глубины цвета, вы могли заметить, что некоторые иконки имеют неровности (как зазубрины) по краям, в то время как другие сглаживают эти неровности и выглядят очень симпатично. Это возможно благодаря 32-битной глубине цвета, которая отображает настоящую прозрачность, как и Photoshop. Вы можете создать 32-битную версию иконки вместе с 24-битной (16 миллионов цветов, с поддержкой прозрачности как в .gif-файлах), 16-битную (256 цветов) и даже 8-, 4- или 2-битную версию, и поместить их всех в один ico-файл.

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

16×16, 16-бит (256) цветов16×16, 32-bit colors32×32, 16-бит (256) цветов32×32, 32-bit colors48×48, 16-бит (256) цветов48×48, 32-bit colors

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

Решение возможных проблемОбщие проблемыВ случае если после проделанных действий ваш «favicon» так и не появился, попробуйте несколько раз (около 5) обновить вашу страницу или очисть кэш браузера, или поставьте “?” в конце ссылки (например “http://diego.com.ua/?”) — это действие заставит думать браузер, что страница является новой и еще не была добавлена в кэш.

Еще одним способом решения этой проблемы является переход по прямой ссылке на ваш «favicon» (например: http://diego.com.ua /favicon.ico), после чего браузер (IE) немедленно отобразит и запомнит иконку.

Проблемы совместимости с браузерами“Microsoft IE 6” (а также 7, 8 и 9) может не отображать “favicon” до тех пор, пока ссылка на вашу страницу не будет добавлена в избранное. В таком случае попробуйте следующий вариант – зажмите левую клавишу мышки на отображаемом “favicon” (обычно стандартная иконка IE), после чего “потрясите” его и отпустите. Данные действия приведут к перезагрузке страницы и обновлению иконки. Другим способом решения данной проблемы является добавление следующего кода в секцию “” страниц, на которых вы хотите видеть ваш “favicon”:

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

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

“Safari” для Mас-систем не будет отображать обновленный “favicon” до тех пор пока не будет очищен кэш браузера. Однако нажатие кнопки меню “Empty cache” не решит проблему, так как “Safari” хранит иконки в отдельной папке. Чтобы очистить папку кэша иконок необходимо зайти в меню “Edit > Reset Safari” и поставить галочку напротив “Remove all website icons”. Альтернативным (ручным) способом является удаление содержимого следующей папки: “User>Library>Safari>Icons”. Для Windows-версии “Safari” путь немного отличается: “C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari”, в этой папке необходимо удалить файл “WebpageIcons.db”. Напоминаю, что папка “Local Settings” и вложенные в неё папки скрыты по умолчанию, а значит для того, чтобы в них попасть, необходимо настроить отображение скрытых файлов и папок Windows. После удаления вышеуказанных фалов необходимо перезапустить “Safari” (в некоторых случаях также необходимо перезагрузить компьютер).

Для решения аналогичной проблемы в “Mozilla FireFox” необходимо очистить кэш браузера и перезапустить программу.

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

Другой проблемой в ОС “Windows” является обновление иконок для Интернет-страниц (к примеру, при размещении иконки страницы на Рабочем столе). Для принудительного обновления изменившихся иконок необходимо выполнить следующие действия:1. Нажать правой кнопкой по Рабочему столу;2. Выбрать пункт меню “Свойства” (для “Windows XP”) или “Персонализировать” (для “Windows Vista” или “Windows 7”) и перейти на вкладку “Свойства Экрана”;3. Поменять качество цветопередачи с 32-разрядного на 16-разрядное и нажать кнопку “ОК” или “Применить”;4. Обратно поменять качество цветопередачи на 32-разрядно и нажать кнопку “ОК” или “Применить”.

Проблемы с плагином “Photoshop”для работы с иконкамиФормат “Windows Icon” (ICO) будет недоступен, если:1. Вы неправильно установили плагин;2. Вы неправильно определили версию плагина подходящую для вашей ОС;3. Рабочая область в “Photoshop” была создана не в 1, 4, 8-битных индексированных или 24-битных RGB режимах.

Также после установки плагина необходимо перезагрузить сам “Photoshop” для вступления в действие сделанных изменений.

diego.com.ua

Как сделать иконку для сайта

Здравствуйте уважаемые начинающие веб-мастера. Продолжим тему Первичная оптимизация.

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

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

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

Иконку можно сделать двумя способами:

1. Самостоятельно.

2. С помощью специального сервиса.

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

Сначала о трудностях. Favicon — это как правило изображение, и изображение очень маленькое. Размеры его составляют 16 х 16, или 32 х 32 пикселя.

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

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

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

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

Заключается он в использовании сервиса по созданию иконок.

Найти такой сервис очень просто. Достаточно ввести в поисковой строке браузера запрос «Сделать favicon», как вам откроется куча предложений.

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

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

1. Выбрать картинку и загрузить её в сервис (Кнопка «Загрузить файл»).

2. Выбрать размер иконки (Кнопка «Создать favicon»).

3. Получить готовый файл с расширением .ico

4. Загрузить полученный файл, в корневую папку сайта.

Первые два пункта никакой сложности не представляют вообще. Единственный совет, который хотелось бы дать — это выбирайте картинку всё же поменьше, и с одинаковыми высотой и шириной.

Чем ближе будет размер начального элемента, тем меньше будет искажений в готовом.

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

Начнём с того, что Мы нажали «Скачать favicon.ico». Что и как с ним делать дальше?

12

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

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

11

После сохранения, щёлкнем по файлу правой правой клавишей, и просканировав его анти вирусом, перейдём в «Свойства».

13

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

14

Нажимаем «Разблокировать», и «ОК», после чего системное окно закроется.

Открываем его снова, щёлкнув по файлу правой клавишей, и выбрав «Свойства». Информация в окне должна выглядеть вот так.

15

Теперь можно устанавливать иконку на Ваш сайт. Для этого обязательно нужно использовать FTP соединение.

Если Вы послушались моих советов в предыдущих статьях, и выбрали хостинг Бегет, то достаточно будет щёлкнуть по «Файловый менеджер», в панели управления Вашего аккаунта.

Оказавшись в каталоге, выбираем Ваш сайт, затем «public.html», затем «Загрузить», далее выбрать, и выбираем, полученный нами favicon.

16

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

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

Желаю творческих успехов.

Перемена

Жена — мужу.-Дорогой, я не хочу-у-у к маме!!!-Молчи и копай.

Сайт в интернете, что дальше? Оптимизация сайта < < < В раздел > > > Что такое язык HTML и для чего он нужен

 

starper55plys.ru

Как сделать иконку для сайта. Как установить Favicon на сайт

Приветствую вас, читатели Seo bloga Fomika! Сегодня поговорим о Favicon — Фавикон для сайта. Что это такое и зачем он нужен для блога?

как сделать иконку для сайта

Как создать его и установить на блог? Обо всём этом будет сегодняшний пост.

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

Фавикон

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

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

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

Сервис по созданию Фавиконов — favicon.cc поможет создать вам свою уникальную иконку для сайта. Регистрироваться на этом сервисе не обязательно.

Он на английском языке к сожалению, но если вы работаете на Гугл Хром (как я), то он быстро переведёт вам эту страничку. Там в принципе нет ничего сложного. Выбираете цвет фавикончика и рисуете его, тыкая курсором в квадратики)))

Можно:

  1. Создать Favicon из готового изображения;
  2. Посмотреть последние созданные Favicon;
  3. Посмотреть лучшие фавиконы (и я не думаю что вы захотите ставить себе на сайт чей-то фавик, хотя дело ваше)

Под цифрой 4 я обозначил стирательную резинку(ставьте галочку  и стирайте) и под цифрой 5 можно передвинуть фавикон. Вообщем всё там очень просто.

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

Загрузить только что созданный вами фавикончик вы сможете нажав на кнопку Download Favicon

Идём дальше. Ещё один сервис для создания фавиконов — favicon.ru Это к счастью русский сервис, разберётесь без перевода.

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

Дальше вы можете/Обрезать картинку/ и /Редактировать картинку/ ну и конечно /Создать ещё одну картинку/

Ещё Список сервисов Онлайн-генераторов иконок для сайта:

  1. favicon-generator.org
  2. degraeve.com
  3. favicongenerator.com
  4. antifavicon.com
  5. chami.com
  6. webscriptlab.com

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

  • iconj.com — сервис с огромной базой иконок. Также имеется возможность сгенерировать  (создать из уже имеющегося изображения) иконку и создать анимационный фавик-вкладка Animated Favicon
  • favicon.co.uk — тоже огромная база готовых иконок для сайта

Как установить Фавикон на сайт под управлением движка WordPress

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

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

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

Итак, давайте прикрепим наш фавикон к сайту. Теория такая: — Нужно файл фавикона положить в корневую папку вашего блога(сайта). Для этого нужно подключиться к вашему хостингу через Ftp клиент FileZilla и закачать ваш фавикон в папку public html.

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

Если это не помогло, тогда нужно прописать специальный код в соответствующем файле header.php вашего шаблона WordPress. Эту строчку кода нужно вставить между открывающими и закрывающими тегами HEAD. У меня вставлено сразу после открывающего тега HEAD.

&lt;head&gt; &lt;link rel=&quot;shortcut icon&quot; href=&quot;http://dengi-iz-ineta.ru/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt; &lt;link rel=&quot;icon&quot; href=&quot;http://dengi-iz-ineta.ru/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;

Как прописать код в файле header.php? Можете скопировать эти строчки, только поменяйте адрес сайта на свой.

Для этого нужно также зайти на хостинг через Ftp клиент FileZilla и с помощью Notepad++  открыть файл header.php, который находится в папке с вашей темой -wp-content/themes/Папка с вашей темой оформления/ и после открывающего тега HEAD вставить туда этот код.

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

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

&lt;head&gt; &lt;link rel=&quot;shortcut icon&quot; href=&quot;http://dengi-iz-ineta.ru/favicon.gif&quot; type=&quot;image/gif&quot; /&gt; &lt;link rel=&quot;icon&quot; href=&quot;http://dengi-iz-ineta.ru/favicon.gif&quot; type=&quot;image/gif&quot; /&gt;

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

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

С уважением, Алексей Фомицкий.

Статьи по теме:

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

dengi-iz-ineta.ru

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

    Всем привет! Сейчас закончим основные настройки внешнего вида сайта. Здесь расскажу про фавикон, т.е. как сделать favicon.ico для сайта или блога. К выбору или созданию Фавикона (иконка для сайта) нужно отнестись серьезно. Если Вы выбирали доменное имя для сайта, как названия своего корабля, то favicon — это флаг вашего сайта. По нему пользователи Интернета (при выдаче результатов поиска в поисковике Яндекса) будут сразу замечать ваш фавикон. Помните, он может выделить Ваш сайт среди других.

  Википедия. Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

    Наверняка, Вы много раз его видели, но не подозревали, что он так называется. Я сам, когда создал свой первый сайт долго не мог правильно сформулировать вопрос в поисковике, чтобы найти информацию как сделать Favicon и как прикрепить favicon к сайту. Проще говоря, Favicon (фавикон) — это картинка (иконка), которая стоит в браузере перед адресом сайта. На фото наглядно покажу Favicon моего блога и иконку поисковика Яндекса:

Список сервисов с готовыми favicon (фавикон)

  Сперва для ленивых дам список сервисов с готовыми favicon (фавикон). Здесь можно просмотреть уже готовые иконки и попробовать найти что-то подходящее:

1. favicon.co.uk — сервис с огромнейшей базой

2. Не ленитесь поищите в Интернете — здесь тоже можно найти множество предложенных иконок для сайта

Создание favicon (фавикон) из готового изображения

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

    На этом сервисе у Вас не должно возникнуть проблем, он на русском языке. Просто указываете изображение, которое хочется видеть в роли иконки вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico”, а дальше уже “Скачать favicon.ico”. И favicon готов.

Как создать Favicon (фавикон) самому

     Для любителей делать все своими руками посоветую один очень удобный сервис. Он имеет адрес favicon.cc. (там кстати тоже есть готовые иконки для сайта). Этот сервис по созданию фавиконок выглядит так:

     Чтобы нарисовать favicon достаточно выбрать цвет и просто вставлять в квадратики нужный Вам цвет и таким образом рисовать свою иконку. Если у Вас что-то, где-то не так получилось, для удаления фрагмента рисунка поставьте галочку на против «transparent» и “тыкайте” на квадратики (пикселы), которые нужно убрать:

    Очень удобно в этом сервисе favicon.cc то, что можно мгновенно видеть результат своего труда прямо в браузере (Google Chrome, Opera, Internet Explorer и т.п.)  и посмотреть итог работы в оригинальном размере в раздел Previw.

    Когда у Вас получится создать favicon, для сохранения иконки для сайта нужно нажать на кнопку “Download Favicon”.

Как вставить Favicon (фавикон) в свой сайт

    После того, как Вы создали фавиконку, Вам нужно его “водрузить” на свой сайт. Для этого потребуется сделать следующее: Ваш favicon.ico скопировать в корневую папку сайта «public_html» (т.е. устанавливаете FTP соединение открываете папку «public_html» и копируете туда свой фавикон).

    Далее идете по адресу: public_html/wp-content/themes/ открываете вашу тему, там находите и открываете файл «header.php» при помощи программы Notepad++. Прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>):

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

 <link rel="icon" href="http://адрес_сайта/favicon.ico" type="image/x-icon" />

   Не забудьте в 2 местах слова адрес_сайта поменять на адрес своего сайта. У меня это выглядит вот так:

   Осталось сохранить файл header.php: закрываете редактор, на запрос заменить жмете «заменить все», запрашиваете в браузере свой сайт и смотрите на результат. Как видите, у меня на сайте фавикончик “встал” правильно. Надеюсь у Вас тоже не возникло проблем.

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

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

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

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

from your own site.

www.realnodengi.ru

Что такое favicon и как создать иконку для сайта.

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

Что такое favicon сайта?

С английского языка это слово можно перевести, как иконка для избранного (сокращение от слов Favorites Icon). То есть такие картинки создаются специально для отображения в браузере. Если нажать на «Избранное» в Internet Explorer или на вкладки в Google Chrome, то можно увидеть иконки каждого добавленного сайта.

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

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

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

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

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

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

  1. Favicon помогает сделать сайт более привлекательным для будущих посетителей. Я сам замечал, что часто кликаю по сайтам, у которых интересные или знакомые иконки. В этом плане я не люблю использовать Гугл, так как он не показывает изображения для каждого сайта. Для меня favicon – это небольшое визуальное отражение сайта, поэтому я всегда обращаю внимание на качество и наличие фавикон. Думаю, что для других пользователей иконка сайта также имеет значение.
  2. Фавикон положительно влияет на продвижение сайта. Если сделать качественную фавикон, которая будет привлекать внимание своей оригинальностью, то будущие читатели будут кликать на сайт в несколько раз чаще, чем на ссылку без иконки.
  3. Иконка – это логотип сайта, который остается в памяти людей надолго. Также как изображение логотипа Mercedes или Toyota, фавикон – это марка вашей компании. Если вы часто будете менять иконку для сайта, ваши потенциальные читатели могут усомниться в постоянстве вашего интернет ресурса. Поэтому рекомендую создавать иконку раз и навсегда. Только в этом случае изображение фавикон будет ассоциироваться с вашим сайтом.

Какая должна быть фавикон сайта?

  1. Фавикон – это файл в формате ico, поэтому при создании иконки, нужно обязательно проследить, чтобы картинка была сохранена именно с таким разрешением.
  2. Размер изображения должен составлять 16 на 16 пикселей. Если картинка будет большего размера, то, скорее всего, файл не будет отображаться.
  3. Желательно, чтобы фавиконка содержала название сайта, либо указывала на основную тематику сайта.
  4. Если у сайта есть свой логотип, который, как правило, находится в шапке, то лучше всего продублировать его в иконке. У читателя останется в памяти ассоциация: сайт = изображение.
  5. Фавиконка должна привлекать внимание и отличаться от других. Оригинальных иконок сейчас очень много, нужно лишь подобрать самую интересную. Также не следует устанавливать favicon, как на других популярных сайтах – это приведет лишь к разочарованию ваших читателей. Хотя в некоторых случаях одинаковые иконки могут привлечь дополнительных посетителей. Смотрите сами!

Как создать favicon.

Самый простой способ для создания иконки – это использование специализированных сервисов онлайн. Наиболее популярным сайтом для создания уникальных иконок является favicon.ru. Данный сервис позволяет создать иконку «с нуля» либо сделать favicon из изображения. Также существует возможность заказать иконку у профессионала.

Находим в интернете картинку, которая отвечает тематике нашего сайта и сохраняем на компьютере. Затем на сайте http://favicon.ru/ выбираем «сделать favicon из изображения» и в обзоре находим нашу картинку.

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

После этого, нажимаем кнопку «скачать favicon», и выбранное изображение будет сохранено в формате ico c нужным названием.

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

Межпарламентская Ассамблея государств - участников Снг»?

Большой юридический словарь. Значение слова «Межпарламентская Ассамблея государств - участников Снг», определение и толкование термина ...http://slovareko.ru/byus/mezhparlamentskaya-assambleya-gosudarstv-uchastnikov-sng

Кроме сайта favicon.ru существует множество сервисов, которые предлагают похожие услуги по созданию иконки. Однако, если вы не хотите создавать картинки таким способом, для вас имеет огромное количество готовых изображений с разрешением ico. Многие сайты предлагают большую коллекцию иконок совершенно бесплатно. Ваша задача – выбрать иконку, которая больше всего подходит для вашего сайта.

Например, сервис http://www.iconj.com/gallery.php предлагает огромный ассортимент иконок, которые можно скачать в два клика. При этом вы можете выбрать разрешение картинки (gif, ico), узнать html код и свойства изображения.

Как закачать favicon в wordpress.

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

Далее нам нужно внести небольшие изменения в файл header.php. Для этого переходим в главное меню WordPress и «выбираем внешний вид» — «редактор». Здесь из правой колонки выбираем «Заголовок (header.php)», находим начало тега <head> и сразу после него прописываем следующий код:

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

<link rel=”icon” href=”http:путь_до_иконки/favicon.ico” type=”image/x-icon” />

Вместо текста «http:путь_до_иконки/favicon.ico» нужно указать путь к вашему файлу favicon.ico. В связи с тем, что файл иконки был сохранен в корневую папку сайта, адрес изображения будет следующим http://ваш сайт.ru/favicon.ico.

Нажимаем «Обновить файл» и смотрим, как стандартная иконка для сайта меняется на выбранную вами фавикон. После индексации сайта в поиске Яндекс будет отображаться новая иконка.

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

Как создать анимированную иконку для сайта?

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

<link rel=»shortcut icon» href=»/ http:путь_до_иконки/favicon.gif» type=»image/gif» >

<link rel=»icon» href=»/ http:путь_до_иконки/favicon.gif» type=»image/gif» >

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

На этом я предлагаю закончить данную статью, посвященную теме создания фавикон. Желаю вам успешной установки оригинальной иконки для своего сайта!

xn----7sbbhnalk3aocq1b4e.xn--p1ai